摘要：jQuery Mobile使用基本頁面<!DOCTYPE html> <html> <head> <title>Page Title</title> &n
jQuery Mobile使用
基本頁面
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> <script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.2.0.js"></script> </head> <body> <!-- 我們可以看到頁面中的內(nèi)容都是包裝在div標(biāo)簽中并在標(biāo)簽中 加入data-role=”page”屬性。 這樣jQuery Mobile就會知道 哪些內(nèi)容需要處理 . 說明：data-屬性是HTML5新推出的很有趣的一個特性， 它可以讓開發(fā)人員添加任意屬性到html標(biāo)簽中,只要添加 的屬性名有“data-”前綴 在”page”div中，還可以包含”header”， ”content”， ”footer”的div元素,這些元素都是可選的， 但至少要包含一個 “content”div --> <!-- <div data-role="page"> <div data-role="header" data-role="fixed"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> --> </body> </html>
頁面超鏈接跳轉(zhuǎn)
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" /> <script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script> <script src="js/jquery.js"></script> <script src="js/jquery.mobile-1.2.0.js"></script> </head> <body> <!-- 在一個頁面中添加多個data-role=”page”。 這意味著瀏覽器僅僅得到一個頁面，就可以 實現(xiàn)頁面平滑切換的客戶體驗 上面的代碼中包含了兩個”page”: 主頁(id為home)和”about”(id為about)。 從Home鏈接到About頁面采用的是連接地址為#about， about頁面返回到首頁的鏈接地址為#home。jQuery Mobile 會自動切換鏈接的目的div顯示到移動瀏覽器中。該框架會隱藏 除第一個包含data-role=”page”div以外的其它”page” --> <div data-role="page" id="home"> <div data-role="header"> <h1>Home</h1> </div> <div data-role="content"> <p><a href="#about">About this app</a></p> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>About This App</h1> </div> <div data-role="content"> <p>This app rocks! <a href="#home">Go home</a></p> </div> </div> </body> </html>
AJAX 導(dǎo)航
為了實現(xiàn)在移動設(shè)備上的無縫客戶體驗，jQuery Mobile默認(rèn)采用AJAX的方式載入一個目的鏈接頁面。因此，當(dāng)在瀏覽器中點擊一個鏈接打一個新的頁面時，jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，并把請求得到的內(nèi)容注入到當(dāng)前頁面的DOM里。另外還需要確保請求的頁面url唯一標(biāo)識的。
這樣的結(jié)果就是用戶交互始終保存在同一個頁面中。新頁面中的內(nèi)容也會輕松的顯示到這個頁面里。這種平滑的客戶體驗相比于傳統(tǒng)打開一個新的頁面并等待數(shù)秒的方式要好很多。當(dāng)一個新的頁面做為新的data-role=”page” div插入到主頁面時，主頁面會有效的緩存取到的內(nèi)容。使得當(dāng)要訪問一個頁面時能夠盡快的顯示出來。這個工作過程聽起來難以置信的復(fù)雜，但是做為開發(fā)人員的我們大部份不需要了解其中工作的具體細(xì)節(jié)。只要能看到效果就OK。
注意:如果你不想采用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個鏈接頁面，只需要在打開的鏈接上添加屬性 rel=”external”屬性
切換效果（顯示新頁面內(nèi)容）
你可以使用多種不同的切換效果來顯示新頁面內(nèi)容，只需要在鏈接里添加data-transition屬性即可?？赡艿闹等缦?/p>
例如
<p><a href=”#about” data-transition=”flip”>關(guān)于頁面</a></p>
在瀏覽器中查看效果
注意：查看以上的效果需要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。
對話框
通過在鏈接中添加data-rel=”dialog”的屬性，可以使鏈接頁面的顯示方式變?yōu)閷υ捒?。給顯示的對話框加入切換的效果也是一個不錯的選擇
例如我們將about的鏈接變成一個對話框并加入相應(yīng)的切換效果。代碼如下
[html] view plain copy
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>
按鈕
按鈕是觸摸式應(yīng)用程序的一部分，它們扮演鏈接的功能，因為它們提供了更大的目標(biāo)，當(dāng)你點擊鏈接的時候(比較適合，手指比較胖的人群)
在jQuery Mobile中把一個鏈接變成button的效果，只需要在標(biāo)簽中添加data-role=”button屬性即可”。例如：
[html] view plain copy
<p><a href="#about" data-role="button">About this app</a></p>
另外jQuery Mobile也會自動的轉(zhuǎn)換像表單元素中的submit，reset，button，或image為按鈕樣式。
還可以利用data-icon屬性建立各式各樣的按鈕，建立行內(nèi)按鈕和按鈕組(水平或垂直的)
格式化文本
為了使其盡可能的靈活，jQuery Mobile使更多的普通HTML內(nèi)容更加獨立。加入適當(dāng)?shù)目s進(jìn)使內(nèi)容的可讀性更強(qiáng)。
有兩種布局方法使其格式化變得更簡單：布局表格和可折疊的內(nèi)容塊
◆布局表格：組織內(nèi)容以列的形式顯示，有兩列表格，和三列表格
◆可折疊的內(nèi)容：當(dāng)點擊內(nèi)容塊的標(biāo)題，則會將其隱藏的詳細(xì)內(nèi)容展現(xiàn)出來
下面是一個可折疊內(nèi)容的實例，單擊標(biāo)題將看到具體的內(nèi)容，再點擊標(biāo)題則會將展現(xiàn)的內(nèi)容隱藏。
<div data-role="page" id="home"> <div data-role="header"> <h1>Home</h1> </div> <div data-role="content"> <div data-role="collapsible" data-state="collapsed"> <h3>About this app</h3> <p>This app rocks!</p> </div> </div> </div>
觸摸選擇的表單元素
jQuery Mobile會自動替換標(biāo)準(zhǔn)的HTML表單元素，例如文本框，復(fù)選框，列表框。以這種自定義的樣式工作在觸摸設(shè)備上的表單元素，易用性更強(qiáng)。
例如，復(fù)選框?qū)兊煤艽?，易于點選。點擊下拉列表時，將會彈出一組大按鈕列表選項，提供給用戶選擇。
該框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加兩個option選項，創(chuàng)建不錯的”打開/關(guān)閉”開關(guān)，
另外一個不錯的特點是組合單選框和組合復(fù)選框，可以利用fieldset元素添加屬性data-role=”controlgroup”來創(chuàng)建一組單選按鈕或復(fù)選框，jQuery Mobile自動格式化他們的格式。使它們看上去更fashion!
一般來說，開發(fā)者不需要關(guān)心表單的那些高級特性，開發(fā)者僅需要以正常的方式創(chuàng)建你的表單，jQuery Mobile框架會幫你完成剩余的工作。另外有一件事情需要開發(fā)人員來完成，即使用div或fieldset 屬性data-role=”fieldcontain”包裝每一個label/field。這樣jQuery Mobile會在label/field對之間添加一個水平分割條。這樣的對齊方式可以使其更容易查找。
下面是一個jQuery Mobile版的表單元素
<form action="#" method="get"> <div data-role="fieldcontain"> <label for="name">Your Name:</label> <input type="text" name="name" id="name" value="" /> </div> <div data-role="controlgroup"> <legend>Which flavour(s) would you like?</legend> <input type="checkbox" name="vanilla" id="vanilla" class="custom" /> <label for="vanilla">Vanilla</label> <input type="checkbox" name="chocolate" id="chocolate" class="custom" /> <label for="chocolate">Chocolate</label> <input type="checkbox" name="strawberry" id="strawberry" class="custom" /> <label for="strawberry">Strawberry</label> </div> <div data-role="fieldcontain"> <label for="quantity">Number of Cones:</label> <input type="range" name="quantity" id="quantity" value="1" min="1" max="10" /> </div> <div data-role="fieldcontain"> <label for="sprinkles">Sprinkles:</label> <SELECT name="sprinkles" id="sprinkles" data-role="slider"> <option value="off">No</option> <option value="on">Yes</option> </SELECT> </div> <div data-role="fieldcontain"> <label for="store">Collect from Store:</label> <SELECT name="store" id="store"> <option value="mainStreet">Main Street</option> <option value="libertyAvenue">Liberty Avenue</option> <option value="circleSquare">Circle Square</option> <option value="angelRoad">Angel Road</option> </SELECT> </div> <div class="ui-body ui-body-b"> <fieldset class="ui-grid-a"> <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div> <div class="ui-block-b"><button type="submit" data-theme="a">Order Ice Cream</button></div> </fieldset> </div> </form>
主題
jQuery Mobile渲染的灰色、黑色和藍(lán)色及圓形的組件使其看起來很漂亮，但是如果你的整個應(yīng)用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：
◆Font family
◆Drop shadows
◆按鈕和盒狀元素的邊框圓角半徑
◆圖標(biāo)組件
另外，每一個主題包含26種不同顏色的切換(標(biāo)記從a 到z)，可以控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可以使用data-theme屬性。例如
<div data-role="page" id="home"> <div data-role="header"> <h1>Home</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-theme="a">About this app</a> <a href="#" data-role="button" data-theme="b">About this app</a> <a href="#" data-role="button" data-theme="c">About this app</a> <a href="#" data-role="button" data-theme="d">About this app</a> <a href="#" data-role="button" data-theme="e">About this app</a> </div> </div>
事件
框架還提供了簡單的用戶接口，并添加了移動設(shè)備支持的特殊事件。
<script type="text/javascript">
$( function() {
$('body').bind( 'taphold', function( e ) {
alert( 'You tapped and held!' );
e.stopImmediatePropagation();
return false;
} );
$('body').bind( 'swipe', function( e ) {
alert( 'You swiped!' );
e.stopImmediatePropagation();
return false;
} );
} );
</script>
<div data-role="page" id="home">
<div data-role="header">
<h1>jQuery Mobile Events</h1>
</div>
<div data-role="content">
<p>Try:</p>
<ul>
<li>Tapping and holding</li>
<li>Swiping</li>
</ul>
</div>
</div>jQuery Mobile設(shè)計思想
jQuery Mobile設(shè)計思想是本文要介紹的內(nèi)容，主要是來了解jQuery Mobile的使用方法技巧的學(xué)習(xí)，具體內(nèi)容來看本文詳解。
一、選擇網(wǎng)頁元素
jQuery的基本設(shè)計思想和主要用法，就是"選擇某個網(wǎng)頁元素，然后對其進(jìn)行某種操作"。這是它區(qū)別于其他JavaScript庫的根本特點。
使用jQuery的第一步，往往就是將一個選擇表達(dá)式，放進(jìn)構(gòu)造函數(shù)jQuery()（簡寫為$），然后得到被選中的元素。
選擇表達(dá)式可以是CSS選擇器：
$(document) //選擇整個文檔對象 $('#myId') //選擇ID為myId的網(wǎng)頁元素 $('divmyClass') // 選擇class為myClass的div元素 $('input[name=first]') // 選擇name屬性等于first的input元素
也可以是jQuery特有的表達(dá)式：
$('a:first') //選擇網(wǎng)頁中第一個a元素 $('tr:odd') //選擇表格的奇數(shù)行 $('#myForm :input') // 選擇表單中的input元素 $('div:visible') //選擇可見的div元素 $('div:gt(2)') // 選擇所有的div元素，除了前三個 $('div:animated') // 選擇當(dāng)前處于動畫狀態(tài)的div元素
二、改變結(jié)果集
jQuery設(shè)計思想之二，就是提供各種強(qiáng)大的過濾器，對結(jié)果集進(jìn)行篩選，縮小選擇結(jié)果。
$('div')has('p'); // 選擇包含p元素的div元素 $('div')not('myClass'); //選擇class不等于myClass的div元素 $('div')filter('myClass'); //選擇class等于myClass的div元素 $('div')first(); //選擇第1個div元素 $('div')eq(5); //選擇第6個div元素
有時候，我們需要從結(jié)果集出發(fā)，移動到附近的相關(guān)元素，jQuery也提供了在DOM樹上的移動方法：
$('div')next('p'); //選擇div元素后面的第一個p元素 $('div')parent(); //選擇div元素的父元素 $('div')closest('form'); //選擇離div最近的那個form父元素 $('div')children(); //選擇div的所有子元素 $('div')siblings(); //選擇div的同級元素
三、鏈?zhǔn)讲僮?/p>
jQuery設(shè)計思想之三，就是最終選中網(wǎng)頁元素以后，可以對它進(jìn)行一系列操作，并且所有操作可以連接在一起，以鏈條的形式寫出來，比如：
$('div')find('h3')eq(2)html('Hello');
分解開來，就是下面這樣：
$('div') //找到div元素 find('h3') //選擇其中的h3元素 eq(2) //選擇第3個h3元素 html('Hello'); //將它的內(nèi)容改為Hello
這是jQuery最令人稱道、最方便的特點。它的原理在于每一步的jQuery操作，返回的都是一個jQuery對象，所以不同操作可以連在一起。
jQuery還提供了end()方法，使得結(jié)果集可以后退一步：
$('div') find('h3') eq(2) html('Hello') end() //退回到選中所有的h3元素的那一步 eq(0) //選中第一個h3元素 html('World'); //將它的內(nèi)容改為World
四、元素的操作：取值和賦值
操作網(wǎng)頁元素，最常見的需求是取得它們的值，或者對它們進(jìn)行賦值。
jQuery設(shè)計思想之四，就是使用同一個函數(shù)，來完成取值（getter）和賦值（setter），即"取值器"與"賦值器"合一。到底是取值還是賦值，由函數(shù)的參數(shù)決定。
$('h1')html(); //html()沒有參數(shù)，表示取出h1的值 $('h1')html('Hello'); //html()有參數(shù)Hello，表示對h1進(jìn)行賦值
常見的取值和賦值函數(shù)如下：
html() 取出或設(shè)置html內(nèi)容 text() 取出或設(shè)置text內(nèi)容 attr() 取出或設(shè)置某個屬性的值 width() 取出或設(shè)置某個元素的寬度 height() 取出或設(shè)置某個元素的高度 val() 取出某個表單元素的值
需要注意的是，如果結(jié)果集包含多個元素，那么賦值的時候，將對其中所有的元素賦值；取值的時候，則是只取出第一個元素的值（text()例外，它取出所有元素的text內(nèi)容）。
小結(jié)：關(guān)于淺談jQuery Mobile設(shè)計思想的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對你有所幫助！