O'REILLY jQuery Mobile 学习笔记1

以前看书都是买中文版的,最近学习jQuery Mobile,在网上看了一圈没发现什么好书,就抱着试试看的心态买了本英文原版的。收到后发现真是够薄,整本书才100多页,就40多块,要是中文书,40多块能买本挺厚的了。不过也好,厚了没准更没信心看明白了。

打开看了一会,还好,大多数单词还是能看懂的,再靠猜一下基本上就OK了。老外的书不能说讲的有多好,但不得不承认讲的够细致,比如:

    jQuery Mobile包含四个文件:一个JavaScript文件,一个CSS文件,两个PNG文件。

创建第一个jqm应用:

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile Application</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
        <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    </head>
    <body>
    </body>
</html>

其实就是个HTML5的页面,只不过多了三个引用而已。

看到这,心里对jqm最初的疑惑就解开了,不错,继续看。

OK,以下就是第一章的所有的内容了。

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile Application</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
        <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    </head>
    <body>
        <section id="page1" data-role="page">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                <p>First page!</p>
                <p><a href="#page2">Go to the second page!</a></p>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
        </section>
        <section id="page2" data-role="page">
            <header data-role="header"><h1>jQuery Mobile</h1></header>
            <div class="content" data-role="content">
                <p>Second page!</p>
            </div>
            <footer data-role="footer"><h1>O'Reilly</h1></footer>
        </section>
    </body>
</html>

定义了两个section,通过id实现页面跳转的效果。

原文地址:https://www.cnblogs.com/liuxiuming/p/3361669.html