第一天 認識jQuery mobile 架構,資源,書籍前言jQuery mobile 架構縱覽headercontentfooter

這裡就不對jquery mobile做過多的曆史介紹,直接進行jQuery mobile的學習

<a target="_blank" href="http://blog.51cto.com/attachment/201202/201658768.png"></a>

從上面的圖示我們可以知道,一個完整的頁面是由

這三部分組成.那這三部分是不是一個jQuerymobile 頁面必須擁有的元素呢,而且必須是這樣的排序呢?答案是:不是,這些元素可以組合和排序可以任由自己自由選擇,當然,我個人建議還是嚴格按照規範進行排序.

在進行我們第一個jQuery Mobile Hello world程式之前,我們要對html5進行一個簡單的認識,因為,jQuery Mobile是基于Html5開發的.

相比當初html 4 那種冗長的文檔的聲明相比,html5的文檔聲明無疑簡潔很多,你隻需在你的頁面第一行輸入:

&lt;!DOCTYPE html&gt; 

這樣就完成了一個html5 的文檔類型聲明了,接下來就開始一個标準的html的頁面編寫:

&lt;html&gt;   

&lt;head&gt;   

&lt;meta charset="utf-8"&gt;   

&lt;title&gt;Hello,Mobile,world&lt;/title&gt;   

&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /&gt;   

&lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;   

&lt;script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"&gt;&lt;/script&gt;   

&lt;/head&gt;   

&lt;body&gt; &lt;/body&gt;   

&lt;/html&gt; 

這樣一個标準的jQuery Mobile的文檔格式就初始化完畢,這裡,我使用了jQuery Mobile 的CDN 連接配接,如何是本地的話,隻要做出相應的替換即可.

編碼的步驟按照我上面的元素寫即可,page,header,footer,注意!html5 新增的一個屬性,data-role!!!

&lt;div data-role="page"&gt;   

&lt;div data-role="header"&gt;      

&lt;h1&gt;Hello,World!!&lt;/h1&gt;     

&lt;/div&gt;   

&lt;div data-role="content"&gt;      

&lt;p&gt;Hello,Mobile World!&lt;/p&gt;     

&lt;div data-role="footer"&gt;    

&lt;h1&gt;Coypright:youxiachai&lt;/h1&gt;   

&lt;/div&gt; 

這樣就完成了我們第一個jQuery mobile的頁面,很簡單是不?

一個完整的jQuery mobile頁面

&lt;!DOCTYPE html&gt;  

&lt;html&gt; &lt;head&gt; 

&lt;meta charset="utf-8"&gt; 

&lt;title&gt;Hello,Mobile,world&lt;/title&gt; 

&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /&gt; 

&lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt; 

&lt;script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"&gt;

&lt;/script&gt; &lt;/head&gt;  &lt;body&gt;  &lt;div data-role="page"&gt;     

&lt;div data-role="header"&gt;         &lt;h1&gt;Hello,World&lt;/h1&gt;     

&lt;/div&gt;       &lt;div data-role="content"&gt;          

&lt;p&gt;Hello,Mobile,World!!&lt;p&gt;     &lt;/div&gt;     &lt;div data-role="footer"&gt;         

&lt;h4&gt;Copyright:youxiachai&lt;/h4&gt;     &lt;/div&gt; &lt;/div&gt;   &lt;/body&gt; &lt;/html&gt; 

我們的第一個jQuery Mobile就這樣完成了,是不是簡單到難以置信呢?沒錯,jQuery mobile就是這麼友善,下面介紹一下,我們從那裡擷取學習的資源,第二天,我詳細說說jQuery mobile 的幾個常用元件,如果,你覺得這些很不夠的話,我建議你,認真看下我提供的傳送門

jQuery 的學習資源

<a href="http://jquerymobile.com/resources/">http://jquerymobile.com/resources/</a> jQuery Mobile 已經提供了非常豐富的學習資源,涵蓋了,jQuery mobile 項目的示範,書籍,架構,第三方插件,,工具,還有相應的教程和文章,當然,都是英文的…

jQuery 書籍介紹

以下都是豆瓣的傳送門,書籍介紹我已經全部補全了 jQuery mobile <a href="http://book.douban.com/subject/6724989/">http://book.douban.com/subject/6724989/</a> <a href="http://book.douban.com/subject/6954448/">http://book.douban.com/subject/6954448/</a> <a href="http://book.douban.com/subject/7564687/">http://book.douban.com/subject/7564687/</a> <a href="http://book.douban.com/subject/7070561/">http://book.douban.com/subject/7070561/</a> 對了大家應該更關心電子版吧.呵呵,正在上傳中,因為版權問題,等課程完了就撤銷…還有下載下傳了的朋友不要到處傳,就算要傳也要記得不要寫上轉載位址.本來是打算打包上傳..不知道為什麼115上傳速度才幾K….就單個上傳好了,如果要轉帖的話,記得把下載下傳的連結去掉… <a href="http://115.com/file/aqx9nw32#">http://115.com/file/aqx9nw32#</a> __jQuery_Mobile.pdf <a href="http://115.com/file/cl142kj7#">http://115.com/file/cl142kj7#</a> __Adobe_Dreamweaver_CS5_5_Studio_Techniques__Designing_and_Developing_for_Mobile_with_jQuery__HTML5__and_CSS3.pdf <a href="http://115.com/file/aqx9nbee#">http://115.com/file/aqx9nbee#</a> __Using_the_CSS3_Mobile_Pack_for_Adobe_Fireworks_CS5.epub <a href="http://115.com/file/cl142epx#">http://115.com/file/cl142epx#</a> __jQuery_Mobile_First_Look.pdf 本文轉自 liam2199 部落格，原文連結： http://blog.51cto.com/youxilua/772634    如需轉載請自行聯系原作者