JqueryMobile入門基礎附源碼下載

時間 2019-11-12

原文原文鏈接

最近要作一個手機版的網站，因此就瞭解了一點JqueryMObile,下面是我整理的筆記，如今分享給你們，但願朋友們喜歡，先給個首頁看看吧！！！javascript

1、JqueryMobile基本頁面結構css

<!DOCTYPE html> 
<html> 
     <head>
      <title>jQuery Mobile基本頁面結構</title>   
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script> 
      <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>  
     </head>   
     <body> 
             <div data-role="page" id="home">    
                      <div data-role="header"> <h1>Header</h1> </div>    
                      <div data-role="content">  
                          <p>Content goes here</p>  
                      </div>           
                      <div data-role="footer">   
                          <h4>Footer</h4>   
                      </div>       
            </div>
    </body> 
</html>

View Code

代碼說明：html

要使用 jQuery Mobile，首先須要在開發的界面中包含以下3個內容：java

CSS文件jquery.mobile-1.0a3.min.css
jQuery類庫文件 jquery-1.5.min.js
jQuery Mobile文件 jquery.mobile-1.0a3.min.js

在上面的頁面基本模板中，引入這三個元素採用的是jQuery CDN方式，開發人員也能夠下載這些文件及主題到你的服務器上。jquery

咱們能夠看到頁面中的內容都是包裝在div標籤中並在標籤中加入data-role=」page」屬性。這樣jQuery Mobile就會知道哪些內容須要處理。web

說明：data-屬性是HTML5新推出的頗有趣的一個特性，它可讓開發人員添加任意屬性到html標籤中,只要添加的屬性名有「data-」前綴。在」page」div中，還能夠包含」header」，」content」，」footer」的div元素,這些元素都是可選的，但至少要包含一個「content」div。 windows

2、jQuery Mobile 入門：api

使用jQuery Mobile的第一步，先建立一個html頁面，並在head標籤中加入如下內容：瀏覽器

正如你在代碼中看到的，jQuery Mobile是jQuery的一個擴展。目前來講，壓縮後的jQuery Mobile 僅12Kb。

在建立第一個jQuery Mobile頁面時你須要建立三塊基本內容，下面的推薦模版展現了這一過程，你能夠在將來的項目中使用它：

1.在 head 標籤內填寫：

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
<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.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

2.在body標籤內填寫：

<div data-role="page">
 <div data-role="header"><h1>Page Title</h1></div><!-- /header --> <div data-role="content"><p>Page content goes here.</p></div><!-- /content --> 
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --> </div><!-- /page -->

在模版中有些地方值得咱們注意。首先是DIV元素的使用，咱們知道，既然HTML5在移動設備中如此流行，爲何不使用HTML5的 header, article, section, footer 標籤元素呢？這是由於較老的智能手機瀏覽器沒法明白新的HTML5元素。在某些狀況下，例如windows phone上老版本的IE會出現一個bug使得沒法加載頁面的css。而DIV元素卻被普遍支持。此時你已經能夠保存你的網頁並在瀏覽器中查看了，這些代碼一樣能夠在桌面瀏覽器中正常工做。我推薦你使用Chrome來進行本地測試。要在真實環境測試，你就須要相應移動設備了。

3.使用超連接：

普通網頁和移動網頁的一個巨大的不一樣即是屏幕中呈現內容的數量多寡上。雖然你能夠在你的iPhone上加載紐約時報的主頁，但你須要縮放它才能順利閱讀上面的內容。這樣的體驗並很差，而更好的解決方案是減小那些雜亂的內容，只在屏幕上顯示你須要顯示的內容。

若是是傳統的網站，你可能會建立一些包含少許內容的子頁面，而當你使用jQuery Mobile時，你最好在頁面中包含「微量」的內容，這樣纔會更有效率。

在上面例子中你已經看到了如何利用模版來建立一個頁面。如今讓咱們更進一步，來建立內容的「page」。jQuery Mobile中的一個「page」結構通常使用一個DIV來組織。如今你可使用上面的模板來建立一個包含四個跳轉到其餘頁面的連接的導航頁面：

<!-- Start of first page --> 
<div data-role="page" id="menu">   
 <div data-role="header"><h1>Menu</h1></div><!-- /header -->    <div data-role="content">    
     <p>What vehicles do you like?</p> 
     <p><a href="#Cars">Cars</a></p>  
     <p><a href="#Trains">Trains</a></p>    
   <p><a href="#Planes">Planes</a></p>    
</div><!-- /content -->   
 <div data-role="footer"><h4>Page Footer</h4></div><!-- /footer --> </div><!-- /page -->

上面這段代碼中第一個div很是重要，它包含有一個id和一個data-role屬性：

data-role="page" id="menu"

data-role定義了這個div是一個「page」，page這個術語稍微有點讓人誤解，「page」這裏其實指的是一個可視面或者在屏幕裏未隱藏的HTML代碼部分，而不是指的一個單獨的頁面（或者說單獨的HTML文件）。data-role="page" 意味着jQueryMobile會根據div元素在屏幕中構建可視內容。而id屬性容許你經過a標籤連接到該page，或者其餘page。

上面建立的導航頁是咱們在瀏覽器看到的第一個頁面，接下來咱們再添加三個「page」，他們有不一樣的id：Cars， Planes，Trains。

<div data-role="page" id="Cars">    
<div data-role="header">    
   <h1>Cars</h1>    
</div><!-- /header -->   
<div data-role="content">    
     <p>We can add a list of cars</p>  
 </div><!-- /content --> 
 <div data-role="footer">   
    <h4>Page Footer</h4>   
 </div><!-- /footer --> 
</div><!-- /page --> 
<!-- Start of third page --> 
<div data-role="page" id="Trains">    
    <div data-role="header">    
        <h1>Trains</h1>   
     </div><!-- /header -->  
 <div data-role="content">  
       <p>We can add a list of trains</p> 
 </div><!-- /content -->   
 <div data-role="footer">    
   <h4>Page Footer</h4>    
   </div><!-- /footer --> 
</div><!-- /page --> 
<!-- Start of fourth page --> 
<div data-role="page" id="Planes">   
     <div data-role="header">      
        <h1>Planes</h1> 
    </div><!-- /header --> 
   <div data-role="content">    
     <p>We can add a list of planes</p>   
 </div><!-- /content -->  
  <div data-role="footer">    <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->

如今，在你的Android或者IOS設備裏測試一下，當你加載好頁面後你會發現這三件事情：

導航頁出如今屏幕中（你能夠上下滾動一下，並無別的東西出現）

當你點擊一個連接時，會動畫切換到另外一個頁面。

其實這些div元素預先會加載並緩存到你的瀏覽器中，所以「頁面」間的切換會很是流暢。

在同一個HTML頁面建立多個在屏幕上顯示的「頁面」使得你能夠大大減小頁面加載的次數，但同時也會致使許多移動設備運行緩慢。jQueryMobile將頁面全部的連接跳轉都視做Ajax調用，這樣能夠充分利用CSS的過渡效果，當你想要連接到你本身的web程序以外的某些連接時，你能夠這樣編寫你的連接代碼：

<a href="http://www.lampweb.org" rel="external">lampweb.org</a>

如上所示，僅須要爲a標籤添加 rel="external"屬性便可。然而jQueryMobile對於（同域的）外部連接並非簡單地跳轉完事兒，相比於其餘移動框架它更進了一步，由於他對（同域的）全部連接都採用Ajax調用方式，從而實現漂亮的轉場效果。基於此你能夠將你的網頁內容分離到許多頁面來建立更大型的項目。

4.使用組件

連接和頁面只是移動網頁設計中一個很小的部分，APP程序（好比採用Object-C，C#，java等在Android或者IOS設備上建立的本地應用程序）快速增加的同時產生了豐富的控件和組件（例如菜單欄，列表等控件）使得開發者能夠很方便地建立複雜的應用程序，這正是許多移動網頁開發者第二個巨大的挑戰——由於在原生的HTML裏面並無這些控件或者組件。針對這一問題，jQueryMobile當前正在建立一組很是有用的組件。如下是已經發布的組件：

Pages（頁面）

Dialog boxes（對話框）

Toolbars（工具欄）

Buttons（按鈕）

Content formatting（內容格式化）

Form elements（表單）

List views（列表）

只要你懂的html基礎知識，你會發現添加這些組件並不困難，接下來咱們看幾個例子。

1>>爲頁面添加header和footer

上面的模版已經爲你展現瞭如何輕鬆地建立工具欄（header，footer）。咱們知道，在不一樣尺寸的屏幕上建立自適應工具欄一般都是很是難的活兒。而如今，jQueryMobile讓你可以很是容易地建立一個帶有一個居中標題和兩個按鈕而且自適應任何屏幕尺寸的header：

<div data-role="header" data-position="inline"> 
   <a href="cancel.html" data-icon="delete">Cancel</a>   
 <h1>Edit Contact</h1>   
 <a href="save.html" data-icon="check">Save</a> 
</div>

代碼中a標籤的順序決定了按鈕顯示的位置。以上代碼在幾乎全部的設備中都能取得一致的顯示效果。

header和footer一樣能夠被自定義爲你想要的樣式，好比改造一個導航條：你能夠添加一些按鈕在footer裏面，從而導航到某一頁面的不一樣部分：

<div data-role="navbar">
    <ul>   
        <li><a href="#nav1" class="ui-btn-active">One</a></li> 
         <li><a href="#nav2">Two</a></li>   
   </ul> 
</div><!-- /navbar -->

從這些代碼你能夠發現jQueryMobile不過是一些簡單的HTML代碼，導航條依然是div，而諸如ui-btn-active這個class可使得你的按鈕顯示爲被選擇狀態。

當你點擊一個按鈕並導航到該頁面的另外一個部分時，jQueryMobile會自動加上一個back按鈕，如下的代碼結構能夠清晰地展示這一過程：

建立位置固定的header和footer

工具條固定在屏幕上方或者下方是一個很常見的界面設計，你能夠爲footer或者header添加 data-position="fixed"來實現這一點。

如下代碼會強制footer/header固定在下方/上方：

<div data-role="header" data-position="fixed">  

     <h1>Navigation</h1>  

  </div><!-- /header -->    

<div data-role="content" >   

    <ul data-role="listview" data-dividertheme="d" style="margin-top: 0;">   

        　<li data-role="list-divider">Royal Family</li>     

    　　 <li><a href="#nav1">Henry VIII</a></li>     

     　　<li><a href="#nav1">George V</a></li>     

    　　 <li><a href="#nav1">Prince of Wales</a></li>        

  　　   <li><a href="#nav1">Elizabeth I</a></li>    

    　　 <li><a href="#nav1">Elizabeth II</a></li>        

 　　    <li data-role="list-divider">Prime Miniseters</li>         

 　　    <li><a href="#nav2">Winston Churchill</a></li>       

 　　   <li><a href="#nav2">Tony Blare</a></li>       

  　　  <li><a href="#nav2">David Cameron</a></li>    

   </ul>    

</div><!-- /content -->

　　<div data-role="footer" data-position="fixed">  

  　　　　<div data-role="navbar">  

    　　　　 <ul>        

  　　　　　　<li><a href="#nav1" class="ui-btn-active">Royals</a></li>  

       　　　　 <li><a href="#nav2">Leaders</a></li>      

 　　　 　　 </ul>    

　　       </div><!-- /navbar --> 

    </div><!-- /footer --> 

 </div><!-- /page -->

<div data-role="page" id="nav1" data-position="fixed">  

 <div data-role="header">   

    <h1>Royal Family</h1> 

 </div><!-- /header --> 

<div data-role="content"> 　
　　　　　 <p>Members and relatives of the British Royal Family historically represented the monarch in various places throughout the British Empire, sometimes for         extended periods as viceroys, or for specific ceremonies or events. Today, they often perform ceremonial and social duties throughout the United Kingdom and abroad on behalf of the UK, but, aside from the monarch, have no constitutional role in the affairs of government. This is the same for the other realms of the Commonwealth though the family there acts on behalf of, is funded by, and represents the sovereign of that particular state, and not the United Kingdom.</P> 
</div><!-- /content -->  
<div data-role="footer" data-position="fixed">  
     <h4>Royal Family</h4>  
</div><!-- /header --> 
</div><!-- /page --> 
<div data-role="page" id="nav2" data-position="fixed">   
 <div data-role="header">     
   <h1>Prime Ministers</h1>   
 </div><!-- /header --> 
 <div data-role="content"> The Prime Minister of the United Kingdom of Great Britain and Northern Ireland is the Head of Her Majesty's Government in the United Kingdom. The Prime Minister and Cabinet (consisting of all the most senior ministers, who are government department heads) are collectively accountable for their policies and actions to the Sovereign, to Parliament, to their political party and ultimately to the electorate. The current Prime Minister, David Cameron, was appointed on 11 May 2010.</div><!-- /content --> 
 <div data-role="footer" data-position="fixed">  
   <h4>Prime Minister</h4>      
 </div><!-- /header -->  
</div><!-- /page -->

View Code

看，如今不使用Objective-C ，你也能夠建立一個易用的界面，是否是很不錯？

2>>對話框

使用data-rel屬性能夠方便地建立彈出式對話框，如下代碼將會以對話框形式加載dialog.html頁面：

<a href="dialog.html" data-role="dialog">Open dialog</a>

因爲對話框在jQueryMobile裏面其實和其餘page沒有任何區別，所以你能夠在對話框裏添加任何類型的HTML代碼，固然你也能夠在同一個html文件裏建立兩個page，一個是主界面：

<div data-role="page"> 
   <div data-role="header">    
   <h1>Dialog Box</h1>   
 </div><!-- /header -->
 <div data-role="content">   
   <a href="#dialogPopUp" data-rel="dialog" data-role="button">Open dialog</a>  
    </div><!-- /content -->
     <div data-role="footer">  
         <h4>Page Footer</h4> 
     </div><!-- /footer --> 
</div><!-- /page -->

另外一個是對話框（上面的HREF屬性便指向這個對話框page）：

<div data-role="page" id="dialogPopUp"> 

   <div data-role="header">     

  <h1>Dialog Title</h1>   

 </div><!-- /header -->   

 <div data-role="content"> This is a dialog box </div><!-- /content --> 

 <div data-role="footer">

　　<h4>Additional Footer information</h4>

  </div><!-- /footer -->

</div><!-- /page -->

要注意以上代碼中footer是可選的，可是你必須包括header，由於若是沒有header，將沒法顯示自動生成的對話框關閉按鈕。

3>>列表

當你有大量的數據條目須要顯示時，列表是一個不錯的選擇。下面是使用ul時的HTML代碼：

<ul> 

   <li><a href="#nav1">Henry VIII</a></li>  

  <li><a href="#nav1">George V</a></li>  

  <li><a href="#nav1">Prince of Wales</a></li>   

 <li><a href="#nav1">Elizabeth I</a></li>   

 <li><a href="#nav1">Elizabeth II</a></li> 

</ul>

在jQueryMobile你能夠經過data-role="listview"來將一個普通的列表轉換成一個很是華麗如同本地APP通常的列表樣式：

<ul data-role="listview">  

  <li><a href="#nav1">Henry VIII</a></li>   

 <li><a href="#nav1">George V</a></li>   

 <li><a href="#nav1">Prince of Wales</a></li>   

 <li><a href="#nav1">Elizabeth I</a></li> 

   <li><a href="#nav1">Elizabeth II</a></li> 

</ul>

就是這樣，僅須要20個字母，你就搞定了這一切。

除此以外，jQueryMobile還爲列表提供了一些加強的選項，如下代碼將爲列表添加分隔符（divider):

<ul data-role="listview" data-dividertheme="d">    

<li data-role="list-divider">Royal Family</li>  

  <li><a href="#home">Henry VIII</a></li> 

   <li><a href="#home">George V</a></li>   

 <li><a href="#home">Prince of Wales</a></li>  

  <li><a href="#home">Elizabeth I</a></li>  

  <li><a href="#home">Elizabeth II</a></li> 

  <li data-role="list-divider">Prime Ministers</li>    

 <li><a href="#home">Winston Churchill</a></li>  

 <li><a href="#home">Tony Blare</a></li> 

<li><a href="#home">David Cameron</a></li>

</ul>

如上面的代碼所示，爲li元素添加data-role="list-divider"便可實現分隔符的效果。

你還能夠爲列表添加小氣泡來展現一些附加數據（本例展現了英國皇室的統治時間）：

<ul data-role="listview" style="margin-top: 0;">  

  <li><a href="#nav1">Henry VIII <span class="ui-li-count">Reign 37 Years</span></a></li>   

 <li><a href="#nav1">George V <span class="ui-li-count">Reign 25 Years</span></a></li>   

 <li><a href="#nav1">Prince of Wales <span class="ui-li-count">N/A</span></a></li>   

 <li><a href="#nav1">Elizabeth I <span class="ui-li-count">Reign 44 Years</span></a></li>   

 <li><a href="#nav1">Elizabeth II<span class="ui-li-count">Reign since 1952</span></a></li>

</ul>

下面是一個更加複雜的例子，列表中包含了連接，圖片，文本：

<ul data-role="listview" style="margin-top: 0;"> 
   <li>
    <img src= "http://img.freebase.com/api/trans/image_thumb/en/henry_viii_of_england?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />       <h3><a href="index.html">Henry VIII</a></h3>  
         <p>Reign 37 Years</p>   
             <a href="#home">Details</a>  
   </li>   
   <li>    
      <img src="http://www.iwise.com/authorIcons/15/King_George%20V_64x64.png" />   
          <h3><a href="index.html">George V</a></h3> <p>Reign 25 Years</p> 
                <a href="#home">Details</a>  
   </li>   
   <li>    
      <img src="http://img.freebase.com/api/trans/image_thumb/en/prince_of_wales_secondary_school?pad=1&errorid=%2Ffreebase%2Fno_image_png&maxheight=64&mode=fillcropmid&maxwidth=64" />  
       <h3><a href="index.html">Prince of Wales</a></h3> 
       <p>Reign N/A</p>  
       <a href="#home">Details</a>  
   </li>  
   <li>  
     <img src="http://www.iwise.com/authorIcons/13846/Elizabeth%20I%20of%20England_64x64.png" />   
         <h3><a href="index.html">Elizabeth I</a></h3>    
            <p>Reign 44 Years</p>    
               <a href="#home">Details</a>  
   </li>   
   <li>  
        <img src="http://www.iwise.com/authorIcons/9098/Elizabeth%20II_64x64.png" />  
        <h3><a href="index.html">Elizabeth II</a></h3>   
        <p>Reign Since 1952</p> 
        <a href="#home">Details</a>  
   </li> 
 </ul>

View Code

在你須要展示富文本時這種列表尤其有用，好比顯示一個包含照片，名字，平均分等信息的學生名單。

最後：部署你的jQueryMobile站點

當你完成了開發，最後一步固然是展現你的成果啦！

到現目前爲止，jQueryMobile都只是包含了一些HTML，CSS，javascript文件罷了，部署方式與通常的HTML站點無異。用FTP（或者其餘你喜歡的方式）上傳到你的web服務器就能夠了，固然，你要確保你上傳了全部用到的文件。

此時已經大功告成，你就能夠用你的移動設備訪問站點啦！

使用jQueryMobile的目標羣是移動設備用戶，所以你能夠考慮爲你的網站建立兩個版本，一個爲桌面用戶準備，另外一個則爲移動用戶（準備好比主站爲http://www.zhuzhan.com，移動站位 :http://www.yidong.com）。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

尚未結束：下面呢是個人筆記，分享給你們，固然是JqueryMobile的啦。一些經常使用的組件和屬性，以實例和代碼的形式展現給你們，但願對想了解JqueryMobile的朋友有幫助。很少說了，先給個圖看一下：

還猶豫什麼，想學習就點擊這裏：http://files.cnblogs.com/itxiaoyan2013/JqueryMObile.zip這是個人勞動成果，免費分享給你們。。。