abstrak：jQuery Mobile使用基本頁(yè)面<!DOCTYPE html> <html> <head> <title>Page Title</title> &n
jQuery Mobile使用
基本頁(yè)面
<!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> <!-- 我們可以看到頁(yè)面中的內(nèi)容都是包裝在div標(biāo)簽中并在標(biāo)簽中 加入data-role=”page”屬性。 這樣jQuery Mobile就會(huì)知道 哪些內(nèi)容需要處理 . 說(shuō)明：data-屬性是HTML5新推出的很有趣的一個(gè)特性， 它可以讓開(kāi)發(fā)人員添加任意屬性到html標(biāo)簽中,只要添加 的屬性名有“data-”前綴 在”page”div中，還可以包含”header”， ”content”， ”footer”的div元素,這些元素都是可選的， 但至少要包含一個(gè) “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>
頁(yè)面超鏈接跳轉(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> <!-- 在一個(gè)頁(yè)面中添加多個(gè)data-role=”page”。 這意味著瀏覽器僅僅得到一個(gè)頁(yè)面，就可以 實(shí)現(xiàn)頁(yè)面平滑切換的客戶(hù)體驗(yàn) 上面的代碼中包含了兩個(gè)”page”: 主頁(yè)(id為home)和”about”(id為about)。 從Home鏈接到About頁(yè)面采用的是連接地址為#about， about頁(yè)面返回到首頁(yè)的鏈接地址為#home。jQuery Mobile 會(huì)自動(dòng)切換鏈接的目的div顯示到移動(dòng)瀏覽器中。該框架會(huì)隱藏 除第一個(gè)包含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)航
為了實(shí)現(xiàn)在移動(dòng)設(shè)備上的無(wú)縫客戶(hù)體驗(yàn)，jQuery Mobile默認(rèn)采用AJAX的方式載入一個(gè)目的鏈接頁(yè)面。因此，當(dāng)在瀏覽器中點(diǎn)擊一個(gè)鏈接打一個(gè)新的頁(yè)面時(shí)，jQuery Mobile接收這個(gè)鏈接，通過(guò)AJAX的方式請(qǐng)求鏈接頁(yè)面，并把請(qǐng)求得到的內(nèi)容注入到當(dāng)前頁(yè)面的DOM里。另外還需要確保請(qǐng)求的頁(yè)面url唯一標(biāo)識(shí)的。
這樣的結(jié)果就是用戶(hù)交互始終保存在同一個(gè)頁(yè)面中。新頁(yè)面中的內(nèi)容也會(huì)輕松的顯示到這個(gè)頁(yè)面里。這種平滑的客戶(hù)體驗(yàn)相比于傳統(tǒng)打開(kāi)一個(gè)新的頁(yè)面并等待數(shù)秒的方式要好很多。當(dāng)一個(gè)新的頁(yè)面做為新的data-role=”page” div插入到主頁(yè)面時(shí)，主頁(yè)面會(huì)有效的緩存取到的內(nèi)容。使得當(dāng)要訪問(wèn)一個(gè)頁(yè)面時(shí)能夠盡快的顯示出來(lái)。這個(gè)工作過(guò)程聽(tīng)起來(lái)難以置信的復(fù)雜，但是做為開(kāi)發(fā)人員的我們大部份不需要了解其中工作的具體細(xì)節(jié)。只要能看到效果就OK。
注意:如果你不想采用AJAX的方式加載頁(yè)面，而想以原生的頁(yè)面加載方式打開(kāi)一個(gè)鏈接頁(yè)面，只需要在打開(kāi)的鏈接上添加屬性 rel=”external”屬性
切換效果（顯示新頁(yè)面內(nèi)容）
你可以使用多種不同的切換效果來(lái)顯示新頁(yè)面內(nèi)容，只需要在鏈接里添加data-transition屬性即可?？赡艿闹等缦?/p>
例如
<p><a href=”#about” data-transition=”flip”>關(guān)于頁(yè)面</a></p>
在瀏覽器中查看效果
注意：查看以上的效果需要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。
對(duì)話(huà)框
通過(guò)在鏈接中添加data-rel=”dialog”的屬性，可以使鏈接頁(yè)面的顯示方式變?yōu)閷?duì)話(huà)框。給顯示的對(duì)話(huà)框加入切換的效果也是一個(gè)不錯(cuò)的選擇
例如我們將about的鏈接變成一個(gè)對(duì)話(huà)框并加入相應(yīng)的切換效果。代碼如下
[html] view plain copy
<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>
按鈕
按鈕是觸摸式應(yīng)用程序的一部分，它們扮演鏈接的功能，因?yàn)樗鼈兲峁┝烁蟮哪繕?biāo)，當(dāng)你點(diǎn)擊鏈接的時(shí)候(比較適合，手指比較胖的人群)
在jQuery Mobile中把一個(gè)鏈接變成button的效果，只需要在標(biāo)簽中添加data-role=”button屬性即可”。例如：
[html] view plain copy
<p><a href="#about" data-role="button">About this app</a></p>
另外jQuery Mobile也會(huì)自動(dòng)的轉(zhuǎn)換像表單元素中的submit，reset，button，或image為按鈕樣式。
還可以利用data-icon屬性建立各式各樣的按鈕，建立行內(nèi)按鈕和按鈕組(水平或垂直的)
格式化文本
為了使其盡可能的靈活，jQuery Mobile使更多的普通HTML內(nèi)容更加獨(dú)立。加入適當(dāng)?shù)目s進(jìn)使內(nèi)容的可讀性更強(qiáng)。
有兩種布局方法使其格式化變得更簡(jiǎn)單：布局表格和可折疊的內(nèi)容塊
◆布局表格：組織內(nèi)容以列的形式顯示，有兩列表格，和三列表格
◆可折疊的內(nèi)容：當(dāng)點(diǎn)擊內(nèi)容塊的標(biāo)題，則會(huì)將其隱藏的詳細(xì)內(nèi)容展現(xiàn)出來(lái)
下面是一個(gè)可折疊內(nèi)容的實(shí)例，單擊標(biāo)題將看到具體的內(nèi)容，再點(diǎn)擊標(biāo)題則會(huì)將展現(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會(huì)自動(dòng)替換標(biāo)準(zhǔn)的HTML表單元素，例如文本框，復(fù)選框，列表框。以這種自定義的樣式工作在觸摸設(shè)備上的表單元素，易用性更強(qiáng)。
例如，復(fù)選框?qū)?huì)變得很大，易于點(diǎn)選。點(diǎn)擊下拉列表時(shí)，將會(huì)彈出一組大按鈕列表選項(xiàng)，提供給用戶(hù)選擇。
該框架支持新的HTML5元素，例如search和range。另外你可以利用列表框并添加data-role=”slider”并添加兩個(gè)option選項(xiàng)，創(chuàng)建不錯(cuò)的”打開(kāi)/關(guān)閉”開(kāi)關(guān)，
另外一個(gè)不錯(cuò)的特點(diǎn)是組合單選框和組合復(fù)選框，可以利用fieldset元素添加屬性data-role=”controlgroup”來(lái)創(chuàng)建一組單選按鈕或復(fù)選框，jQuery Mobile自動(dòng)格式化他們的格式。使它們看上去更fashion!
一般來(lái)說(shuō)，開(kāi)發(fā)者不需要關(guān)心表單的那些高級(jí)特性，開(kāi)發(fā)者僅需要以正常的方式創(chuàng)建你的表單，jQuery Mobile框架會(huì)幫你完成剩余的工作。另外有一件事情需要開(kāi)發(fā)人員來(lái)完成，即使用div或fieldset 屬性data-role=”fieldcontain”包裝每一個(gè)label/field。這樣jQuery Mobile會(huì)在label/field對(duì)之間添加一個(gè)水平分割條。這樣的對(duì)齊方式可以使其更容易查找。
下面是一個(gè)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)色及圓形的組件使其看起來(lái)很漂亮，但是如果你的整個(gè)應(yīng)用都使用這樣的樣式，將會(huì)使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：
◆Font family
◆Drop shadows
◆按鈕和盒狀元素的邊框圓角半徑
◆圖標(biāo)組件
另外，每一個(gè)主題包含26種不同顏色的切換(標(biāo)記從a 到z)，可以控制前景顏色，背景色和漸變色，典型用法是使頁(yè)面元素部分替換，你可以使用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>
事件
框架還提供了簡(jiǎn)單的用戶(hù)接口，并添加了移動(dòng)設(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è)計(jì)思想
jQuery Mobile設(shè)計(jì)思想是本文要介紹的內(nèi)容，主要是來(lái)了解jQuery Mobile的使用方法技巧的學(xué)習(xí)，具體內(nèi)容來(lái)看本文詳解。
一、選擇網(wǎng)頁(yè)元素
jQuery的基本設(shè)計(jì)思想和主要用法，就是"選擇某個(gè)網(wǎng)頁(yè)元素，然后對(duì)其進(jìn)行某種操作"。這是它區(qū)別于其他JavaScript庫(kù)的根本特點(diǎn)。
使用jQuery的第一步，往往就是將一個(gè)選擇表達(dá)式，放進(jìn)構(gòu)造函數(shù)jQuery()（簡(jiǎn)寫(xiě)為$），然后得到被選中的元素。
選擇表達(dá)式可以是CSS選擇器：
$(document) //選擇整個(gè)文檔對(duì)象 $('#myId') //選擇ID為myId的網(wǎng)頁(yè)元素 $('divmyClass') // 選擇class為myClass的div元素 $('input[name=first]') // 選擇name屬性等于first的input元素
也可以是jQuery特有的表達(dá)式：
$('a:first') //選擇網(wǎng)頁(yè)中第一個(gè)a元素 $('tr:odd') //選擇表格的奇數(shù)行 $('#myForm :input') // 選擇表單中的input元素 $('div:visible') //選擇可見(jiàn)的div元素 $('div:gt(2)') // 選擇所有的div元素，除了前三個(gè) $('div:animated') // 選擇當(dāng)前處于動(dòng)畫(huà)狀態(tài)的div元素
二、改變結(jié)果集
jQuery設(shè)計(jì)思想之二，就是提供各種強(qiáng)大的過(guò)濾器，對(duì)結(jié)果集進(jìn)行篩選，縮小選擇結(jié)果。
$('div')has('p'); // 選擇包含p元素的div元素 $('div')not('myClass'); //選擇class不等于myClass的div元素 $('div')filter('myClass'); //選擇class等于myClass的div元素 $('div')first(); //選擇第1個(gè)div元素 $('div')eq(5); //選擇第6個(gè)div元素
有時(shí)候，我們需要從結(jié)果集出發(fā)，移動(dòng)到附近的相關(guān)元素，jQuery也提供了在DOM樹(shù)上的移動(dòng)方法：
$('div')next('p'); //選擇div元素后面的第一個(gè)p元素 $('div')parent(); //選擇div元素的父元素 $('div')closest('form'); //選擇離div最近的那個(gè)form父元素 $('div')children(); //選擇div的所有子元素 $('div')siblings(); //選擇div的同級(jí)元素
三、鏈?zhǔn)讲僮?/p>
jQuery設(shè)計(jì)思想之三，就是最終選中網(wǎng)頁(yè)元素以后，可以對(duì)它進(jìn)行一系列操作，并且所有操作可以連接在一起，以鏈條的形式寫(xiě)出來(lái)，比如：
$('div')find('h3')eq(2)html('Hello');
分解開(kāi)來(lái)，就是下面這樣：
$('div') //找到div元素 find('h3') //選擇其中的h3元素 eq(2) //選擇第3個(gè)h3元素 html('Hello'); //將它的內(nèi)容改為Hello
這是jQuery最令人稱(chēng)道、最方便的特點(diǎn)。它的原理在于每一步的jQuery操作，返回的都是一個(gè)jQuery對(duì)象，所以不同操作可以連在一起。
jQuery還提供了end()方法，使得結(jié)果集可以后退一步：
$('div') find('h3') eq(2) html('Hello') end() //退回到選中所有的h3元素的那一步 eq(0) //選中第一個(gè)h3元素 html('World'); //將它的內(nèi)容改為World
四、元素的操作：取值和賦值
操作網(wǎng)頁(yè)元素，最常見(jiàn)的需求是取得它們的值，或者對(duì)它們進(jìn)行賦值。
jQuery設(shè)計(jì)思想之四，就是使用同一個(gè)函數(shù)，來(lái)完成取值（getter）和賦值（setter），即"取值器"與"賦值器"合一。到底是取值還是賦值，由函數(shù)的參數(shù)決定。
$('h1')html(); //html()沒(méi)有參數(shù)，表示取出h1的值 $('h1')html('Hello'); //html()有參數(shù)Hello，表示對(duì)h1進(jìn)行賦值
常見(jiàn)的取值和賦值函數(shù)如下：
html() 取出或設(shè)置html內(nèi)容 text() 取出或設(shè)置text內(nèi)容 attr() 取出或設(shè)置某個(gè)屬性的值 width() 取出或設(shè)置某個(gè)元素的寬度 height() 取出或設(shè)置某個(gè)元素的高度 val() 取出某個(gè)表單元素的值
需要注意的是，如果結(jié)果集包含多個(gè)元素，那么賦值的時(shí)候，將對(duì)其中所有的元素賦值；取值的時(shí)候，則是只取出第一個(gè)元素的值（text()例外，它取出所有元素的text內(nèi)容）。
小結(jié)：關(guān)于淺談jQuery Mobile設(shè)計(jì)思想的內(nèi)容介紹完了，希望通過(guò)本文的學(xué)習(xí)能對(duì)你有所幫助！