jQuery Mobile的簡單使用

原創 xuewufeifang 2020-02-21 22:10

jQuery Mobile使用

基本頁面

[html] view plaincopy
  1. <!DOCTYPE html>   
  2. <html>   
  3.   <head>   
  4.   <title>Page Title</title>   
  5.     <link rel="stylesheet"  href="css/jquery.mobile-1.2.0.min.css" />  
  6.   
  7.     <script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>  
  8.    
  9.     <script src="js/jquery.js"></script>  
  10.     <script src="js/jquery.mobile-1.2.0.js"></script>  
  11.   
  12. </head>   
  13. <body>   
  14.     
  15.   <!--  
  16.           我們可以看到頁面中的內容都是包裝在div標籤中並在標籤中  
  17.            加入data-role=”page”屬性。 這樣jQuery Mobile就會知道  
  18.            哪些內容需要處理 .       
  19.           說明：data-屬性是HTML5新推出的很有趣的一個特性，  
  20.           它可以讓開發人員添加任意屬性到html標籤中,只要添加  
  21.           的屬性名有“data-”前綴    
  22.             
  23.           在”page”div中，還可以包含”header”， ”content”，   
  24.     ”footer”的div元素,這些元素都是可選的，  
  25.           但至少要包含一個 “content”div  
  26.   -->  
  27. <!--   
  28. <div data-role="page">   
  29.     
  30.   <div data-role="header" data-role="fixed">   
  31.     <h1>Page Title</h1>   
  32.   </div>   
  33.     
  34.   <div data-role="content">   
  35.     <p>Page content goes here.</p>      
  36.   </div>   
  37.     
  38.   <div data-role="footer">   
  39.     <h4>Page Footer</h4>   
  40.   </div>   
  41. </div>   
  42. -->  
  43.   </body>   
  44. </html>   



頁面超鏈接跳轉

[html] view plaincopy
  1. <!DOCTYPE html>   
  2. <html>   
  3.   <head>   
  4.   <title>Page Title</title>   
  5.     <link rel="stylesheet"  href="css/jquery.mobile-1.2.0.min.css" />  
  6.   
  7.     <script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>  
  8.    
  9.     <script src="js/jquery.js"></script>  
  10.     <script src="js/jquery.mobile-1.2.0.js"></script>  
  11.   
  12. </head>   
  13. <body>      
  14.     
  15.   <!--   
  16.       在一個頁面中添加多個data-role=”page”。  
  17.       這意味着瀏覽器僅僅得到一個頁面，就可以  
  18.       實現頁面平滑切換的客戶體驗  
  19.         
  20.         
  21.       上面的代碼中包含了兩個”page”:  
  22.       主頁(id爲home)和”about”(id爲about)。  
  23.       從Home鏈接到About頁面採用的是連接地址爲#about，  
  24.      about頁面返回到首頁的鏈接地址爲#home。jQuery Mobile  
  25.      會自動切換鏈接的目的div顯示到移動瀏覽器中。該框架會隱藏  
  26.      除第一個包含data-role=”page”div以外的其它”page”  
  27.    -->  
  28. <div data-role="page" id="home">   
  29.     
  30.   <div data-role="header">   
  31.     <h1>Home</h1>   
  32.   </div>   
  33.     
  34.   <div data-role="content">   
  35.     <p><a href="#about">About this app</a></p>      
  36.   </div>   
  37.     
  38. </div>   
  39. <div data-role="page" id="about">   
  40.     
  41.   <div data-role="header">   
  42.     <h1>About This App</h1>   
  43.   </div>   
  44.     
  45.   <div data-role="content">   
  46.     <p>This app rocks! <a href="#home">Go home</a></p>      
  47.   </div>   
  48.     
  49. </div>   
  50.     
  51. </body>   
  52. </html>   

AJAX 導航

爲了實現在移動設備上的無縫客戶體驗，jQuery Mobile默認採用AJAX的方式載入一個目的鏈接頁面。因此，當在瀏覽器中點擊一個鏈接打一個新的頁面時，jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，並把請求得到的內容注入到當前頁面的DOM裏。另外還需要確保請求的頁面url唯一標識的。

這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕鬆的顯示到這個頁面裏。這種平滑的客戶體驗相比於傳統打開一個新的頁面並等待數秒的方式要好很多。當一個新的頁面做爲新的data-role=”page” div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時能夠儘快的顯示出來。這個工作過程聽起來難以置信的複雜，但是做爲開發人員的我們大部份不需要了解其中工作的具體細節。只要能看到效果就OK。

注意:如果你不想採用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個鏈接頁面，只需要在打開的鏈接上添加屬性 rel=”external”屬性


切換效果（顯示新頁面內容）

你可以使用多種不同的切換效果來顯示新頁面內容，只需要在鏈接裏添加data-transition屬性即可。可能的值如下


例如

[html] view plaincopy
  1. <p><a href=”#about” data-transition=”flip”>關於頁面</a></p>  

在瀏覽器中查看效果

注意：查看以上的效果需要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。

對話框

通過在鏈接中添加data-rel=”dialog”的屬性，可以使鏈接頁面的顯示方式變爲對話框。給顯示的對話框加入切換的效果也是一個不錯的選擇

例如我們將about的鏈接變成一個對話框並加入相應的切換效果。代碼如下


[html] view plaincopy
  1. <p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>     

按鈕

按鈕是觸摸式應用程序的一部分，它們扮演鏈接的功能，因爲它們提供了更大的目標，當你點擊鏈接的時候(比較適合，手指比較胖的人羣)

在jQuery Mobile中把一個鏈接變成button的效果，只需要在標籤中添加data-role=”button屬性即可”。例如：

[html] view plaincopy
  1. <p><a href="#about" data-role="button">About this app</a></p>    

另外jQuery Mobile也會自動的轉換像表單元素中的submit，reset，button，或image爲按鈕樣式。

還可以利用data-icon屬性建立各式各樣的按鈕，建立行內按鈕和按鈕組(水平或垂直的)


格式化文本

爲了使其儘可能的靈活，jQuery Mobile使更多的普通HTML內容更加獨立。加入適當的縮進使內容的可讀性更強。

有兩種佈局方法使其格式化變得更簡單：佈局表格和可摺疊的內容塊

◆佈局表格：組織內容以列的形式顯示，有兩列表格，和三列表格

◆可摺疊的內容：當點擊內容塊的標題，則會將其隱藏的詳細內容展現出來

下面是一個可摺疊內容的實例，單擊標題將看到具體的內容，再點擊標題則會將展現的內容隱藏。

[html] view plaincopy
  1. <div data-role="page" id="home">   
  2.     
  3.   <div data-role="header">   
  4.     <h1>Home</h1>   
  5.   </div>   
  6.     
  7.   <div data-role="content">   
  8.     <div data-role="collapsible" data-state="collapsed">   
  9.       <h3>About this app</h3>   
  10.       <p>This app rocks!</p>   
  11.     </div>   
  12.   </div>   
  13.     
  14. </div>   


觸摸選擇的表單元素

jQuery Mobile會自動替換標準的HTML表單元素，例如文本框，複選框，列表框。以這種自定義的樣式工作在觸摸設備上的表單元素，易用性更強。

例如，複選框將會變得很大，易於點選。點擊下拉列表時，將會彈出一組大按鈕列表選項，提供給用戶選擇。

該框架支持新的HTML5元素，例如search和range。另外你可以利用列表框並添加data-role=”slider”並添加兩個option選項，創建不錯的”打開/關閉”開關，

另外一個不錯的特點是組合單選框和組合複選框，可以利用fieldset元素添加屬性data-role=”controlgroup”來創建一組單選按鈕或複選框，jQuery Mobile自動格式化他們的格式。使它們看上去更fashion!

一般來說，開發者不需要關心表單的那些高級特性，開發者僅需要以正常的方式創建你的表單，jQuery Mobile框架會幫你完成剩餘的工作。另外有一件事情需要開發人員來完成，即使用div或fieldset 屬性data-role=”fieldcontain”包裝每一個label/field。這樣jQuery Mobile會在label/field對之間添加一個水平分割條。這樣的對齊方式可以使其更容易查找。

下面是一個jQuery Mobile版的表單元素


[html] view plaincopy
  1. <form action="#" method="get">   
  2.       
  3.      <div data-role="fieldcontain">   
  4.        <label for="name">Your Name:</label>   
  5.        <input type="text" name="name" id="name" value=""   />   
  6.      </div>   
  7.        
  8.      <div data-role="controlgroup">   
  9.        <legend>Which flavour(s) would you like?</legend>   
  10.          
  11.        <input type="checkbox" name="vanilla" id="vanilla" class="custom"  />   
  12.        <label for="vanilla">Vanilla</label>   
  13.          
  14.        <input type="checkbox" name="chocolate" id="chocolate" class="custom"  />   
  15.        <label for="chocolate">Chocolate</label>   
  16.          
  17.        <input type="checkbox" name="strawberry" id="strawberry" class="custom"  />   
  18.        <label for="strawberry">Strawberry</label>   
  19.          
  20.      </div>      
  21.        
  22.      <div data-role="fieldcontain">   
  23.        <label for="quantity">Number of Cones:</label>   
  24.        <input type="range" name="quantity" id="quantity" value="1" min="1" max="10"   />   
  25.      </div>   
  26.     
  27.      <div data-role="fieldcontain">   
  28.        <label for="sprinkles">Sprinkles:</label>   
  29.         <select name="sprinkles" id="sprinkles" data-role="slider">   
  30.           <option value="off">No</option>   
  31.           <option value="on">Yes</option>   
  32.         </select>   
  33.      </div>   
  34.     
  35.      <div data-role="fieldcontain">   
  36.        <label for="store">Collect from Store:</label>   
  37.         <select name="store" id="store">   
  38.           <option value="mainStreet">Main Street</option>   
  39.           <option value="libertyAvenue">Liberty Avenue</option>   
  40.           <option value="circleSquare">Circle Square</option>   
  41.           <option value="angelRoad">Angel Road</option>   
  42.         </select>   
  43.      </div>   
  44.        
  45.     <div class="ui-body ui-body-b">   
  46.       <fieldset class="ui-grid-a">   
  47.         <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>   
  48.         <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div>       
  49.       </fieldset>   
  50.     </div>   
  51. </form>  



主題

jQuery Mobile渲染的灰色、黑色和藍色及圓形的組件使其看起來很漂亮，但是如果你的整個應用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：

◆Font family

◆Drop shadows

◆按鈕和盒狀元素的邊框圓角半徑

◆圖標組件

另外，每一個主題包含26種不同顏色的切換(標記從a 到z)，可以控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可以使用data-theme屬性。例如

[html] view plaincopy
  1. <div data-role="page" id="home">   
  2.     
  3.   <div data-role="header">   
  4.     <h1>Home</h1>   
  5.   </div>   
  6.     
  7.   <div data-role="content">   
  8.     <a href="#" data-role="button" data-theme="a">About this app</a>   
  9.     <a href="#" data-role="button" data-theme="b">About this app</a>   
  10.     <a href="#" data-role="button" data-theme="c">About this app</a>   
  11.     <a href="#" data-role="button" data-theme="d">About this app</a>   
  12.     <a href="#" data-role="button" data-theme="e">About this app</a>   
  13.   </div>   
  14.     
  15. </div>   

事件

框架還提供了簡單的用戶接口，並添加了移動設備支持的特殊事件。


[html] view plaincopy
  1. <script type="text/javascript">   
  2.     
  3. $( function() {   
  4.     
  5.   $('body').bind( 'taphold', function( e ) {   
  6.     alert( 'You tapped and held!' );   
  7.     e.stopImmediatePropagation();   
  8.     return false;   
  9.   } );    
  10.     
  11.   $('body').bind( 'swipe', function( e ) {   
  12.     alert( 'You swiped!' );   
  13.     e.stopImmediatePropagation();   
  14.     return false;   
  15.   } );    
  16.     
  17. } );   
  18.     
  19. </script>    
  20.   
  21.   
  22. <div data-role="page" id="home">   
  23.     
  24.   <div data-role="header">   
  25.     <h1>jQuery Mobile Events</h1>   
  26.   </div>   
  27.     
  28.   <div data-role="content">   
  29.     <p>Try:</p>   
  30.     <ul>   
  31.       <li>Tapping and holding</li>   
  32.       <li>Swiping</li>   
  33.     </ul>   
  34.   </div>   
  35.     
  36. </div>  

jQuery Mobile設計思想


jQuery Mobile設計思想是本文要介紹的內容，主要是來了解jQuery Mobile的使用方法技巧的學習，具體內容來看本文詳解。

一、選擇網頁元素

jQuery的基本設計思想和主要用法，就是"選擇某個網頁元素，然後對其進行某種操作"。這是它區別於其他Javascript庫的根本特點。

使用jQuery的第一步，往往就是將一個選擇表達式，放進構造函數jQuery()（簡寫爲$），然後得到被選中的元素。

選擇表達式可以是CSS選擇器：

  1. $(document) //選擇整個文檔對象  
  2. $('#myId') //選擇ID爲myId的網頁元素  
  3. $('divmyClass') // 選擇class爲myClass的div元素  
  4. $('input[name=first]') // 選擇name屬性等於first的input元素 

也可以是jQuery特有的表達式：

  1. $('a:first') //選擇網頁中第一個a元素  
  2. $('tr:odd') //選擇表格的奇數行  
  3. $('#myForm :input') // 選擇表單中的input元素  
  4. $('div:visible') //選擇可見的div元素  
  5. $('div:gt(2)') // 選擇所有的div元素，除了前三個  
  6. $('div:animated') // 選擇當前處於動畫狀態的div元素 

二、改變結果集

jQuery設計思想之二，就是提供各種強大的過濾器，對結果集進行篩選，縮小選擇結果。

  1. $('div')has('p'); // 選擇包含p元素的div元素  
  2. $('div')not('myClass'); //選擇class不等於myClass的div元素  
  3. $('div')filter('myClass'); //選擇class等於myClass的div元素  
  4. $('div')first(); //選擇第1個div元素  
  5. $('div')eq(5); //選擇第6個div元素 

有時候，我們需要從結果集出發，移動到附近的相關元素，jQuery也提供了在DOM樹上的移動方法：

  1. $('div')next('p'); //選擇div元素後面的第一個p元素  
  2. $('div')parent(); //選擇div元素的父元素  
  3. $('div')closest('form'); //選擇離div最近的那個form父元素  
  4. $('div')children(); //選擇div的所有子元素  
  5. $('div')siblings(); //選擇div的同級元素 

三、鏈式操作

jQuery設計思想之三，就是最終選中網頁元素以後，可以對它進行一系列操作，並且所有操作可以連接在一起，以鏈條的形式寫出來，比如：

  1. $('div')find('h3')eq(2)html('Hello'); 

分解開來，就是下面這樣：

  1. $('div') //找到div元素  
  2. 　find('h3') //選擇其中的h3元素  
  3. 　eq(2) //選擇第3個h3元素  
  4. 　html('Hello'); //將它的內容改爲Hello 

這是jQuery最令人稱道、最方便的特點。它的原理在於每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。

jQuery還提供了end()方法，使得結果集可以後退一步：

  1. $('div')   
  2. 　find('h3')  
  3. 　eq(2)  
  4. 　html('Hello')  
  5. 　end() //退回到選中所有的h3元素的那一步  
  6. 　eq(0) //選中第一個h3元素  
  7. 　html('World'); //將它的內容改爲World 

四、元素的操作：取值和賦值

操作網頁元素，最常見的需求是取得它們的值，或者對它們進行賦值。

jQuery設計思想之四，就是使用同一個函數，來完成取值（getter）和賦值（setter），即"取值器"與"賦值器"合一。到底是取值還是賦值，由函數的參數決定。

  1. $('h1')html(); //html()沒有參數，表示取出h1的值  
  2. $('h1')html('Hello'); //html()有參數Hello，表示對h1進行賦值 

常見的取值和賦值函數如下：

  1. html() 取出或設置html內容  
  2. text() 取出或設置text內容  
  3. attr() 取出或設置某個屬性的值  
  4. width() 取出或設置某個元素的寬度  
  5. height() 取出或設置某個元素的高度  
  6. val() 取出某個表單元素的值 

需要注意的是，如果結果集包含多個元素，那麼賦值的時候，將對其中所有的元素賦值；取值的時候，則是隻取出第一個元素的值（text()例外，它取出所有元素的text內容）。

小結：關於淺談jQuery Mobile設計思想的內容介紹完了，希望通過本文的學習能對你有所幫助！

站內首發文章
xuewufeifang
發佈了18 篇原創文章 · 獲贊 10 · 訪問量 16萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章