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实现页面跳转的效果。

 

 

posted @ 2013-10-10 17:10  nevgip  阅读(338)  评论(0)    收藏  举报