jQueryMobile學(xué)習(xí)文檔.ppt

1、jQuery Mobile,jQuery Mobile介紹,jQuery Mobile 是jQuery 在手機(jī)上和平板等移動(dòng)設(shè)備上的版本 。 jQuery Mobile 支持全球主流的移動(dòng)平臺(tái) 。 jQuery Mobile 不僅會(huì)給主流移動(dòng)平臺(tái)帶來(lái)jQuery核心庫(kù)，而且會(huì)發(fā)布一個(gè)完整統(tǒng)一的jQuery移動(dòng)UI框架。 jQuery Mobile的使命是向所有主流移動(dòng)瀏覽器提供一種統(tǒng)一體驗(yàn)，使整個(gè) Internet 上的內(nèi)容更加豐富 。 與 jQuery 一樣， jQuery Mobile也是免費(fèi)開(kāi)源的。,主要特性（Features）,基于jQuery構(gòu)建 兼容絕大部分手機(jī)、平板、桌面平臺(tái) 輕

2、量級(jí)的庫(kù) 模塊化結(jié)構(gòu) HTML5標(biāo)記驅(qū)動(dòng)的配置 漸進(jìn)的功能增強(qiáng) 快速設(shè)計(jì) 易用性 點(diǎn)擊和鼠標(biāo)事件支持 統(tǒng)一UI部件 強(qiáng)大的主題化框架,支持的平臺(tái)（Supported Platforms）,jQuery Mobile 廣泛支持幾乎所有的主流桌面瀏覽器，智能機(jī)，平板電腦和電子閱讀平臺(tái)。并且由于逐步增強(qiáng)的目的，概念機(jī)和老瀏覽器也被支持 。 使用三級(jí)評(píng)價(jià)支持系統(tǒng): A (full), B (full minus Ajax), C (basic)。 體驗(yàn)的精確細(xì)度在很大程序上取決于設(shè)備對(duì)css的解析能力，所以不是所有的A級(jí)體驗(yàn)會(huì)精確到像素級(jí)別，但這也是web的本質(zhì)所決定的。,支持的平臺(tái)（Supporte

3、d Platforms）,A-級(jí) 具有基于ajax動(dòng)態(tài)漸變效果的高級(jí)體驗(yàn) Apple iOS 3.2-5.0 -Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0) Android 2.1-2.3 - Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3

4、). Functional on 1.5 margin: 10% auto 15px auto; ,工具欄(Toolbars),在JQM中, 有兩種標(biāo)準(zhǔn)類型的工具欄： Headers 和 Footers Header bar 充當(dāng)頁(yè)面標(biāo)題的作用, 通常是 mobile page中的第一個(gè)元素，一般包含有一個(gè)頁(yè)面標(biāo)題和兩個(gè)按鈕 Footer bar 通常是最后一個(gè)元素，相比于header在內(nèi)容和功能上面更加自由， 一般包含一些文字和按鈕 在header/footer中一個(gè)水平的導(dǎo)航欄或者tab頁(yè)是非常常見(jiàn)的；JQM包含了 導(dǎo)航條部件 ，該部件能將一個(gè)無(wú)序列表（ul）鏈接變成一個(gè)水平分布的按鈕欄。

5、 Header 和 footers 可以用不同方式調(diào)整他們?cè)陧?yè)面中的位置。通過(guò)配置data-position屬性可以實(shí)現(xiàn)不同的顯示，屬性值如下： inline header 和footer 會(huì)位于自然文檔流中（即默認(rèn)的HTML行為），這樣可以確保它們?cè)谒械脑O(shè)備中可見(jiàn) （不管設(shè)備是否支持JavaScript和css） fixed 提供了一個(gè)無(wú)視人為滾動(dòng)頁(yè)面保持固定位置的 toolbar，toolbar會(huì)像inline模式一樣出現(xiàn)在它們?cè)陧?yè)面中原始的位置，但是你滾動(dòng)滾動(dòng)條使toolbar離開(kāi)視線時(shí)， 框架會(huì)通過(guò)動(dòng)態(tài)重新調(diào)整toolbar的位置好讓toolbar以動(dòng)畫(huà)的效果重新出現(xiàn)在當(dāng)前瀏覽器視口

6、的頂部或者底部 fullscreen 開(kāi)始不會(huì)在頂部和底部出現(xiàn)，除非你點(diǎn)擊頁(yè)面。 在創(chuàng)建沉浸式應(yīng)用時(shí)（如照片或視頻瀏覽器）非常有用，你可以全屏瀏覽， 而toolbar會(huì)在你需要時(shí)輕觸屏幕來(lái)被喚出。但是這種模式下toolbar出現(xiàn)時(shí)會(huì)覆蓋頁(yè)面內(nèi)容，因此最好是在特定情況下使用此模式。,導(dǎo)航條(Navbars),在JQM中有一個(gè)非?；镜腘avbar部件非常有用，它提供多達(dá)5個(gè)按鈕和可選的圖標(biāo)，通常位于header/footer里面 navbar通常是一個(gè)包裹在一個(gè)容器里的無(wú)序鏈接列表，容器設(shè)置data-role=“ navbar” 屬性。 要設(shè)置其中一個(gè)鏈接是激活（被選擇）的狀態(tài)，為鏈接添加 cl

7、ass=“ui-btn-active”屬性即可。 One Two 在這種情況下navbar被勻分，每個(gè)按鈕都占 1/2的瀏覽器窗口寬度，最多一行5個(gè)按鈕，每個(gè)占1/5的寬度，如果多于5個(gè)按鈕， navbar會(huì)被折行顯示 navbar也可以通過(guò)data-icon屬性來(lái)添加圖標(biāo)，并通過(guò)data-iconpos屬性來(lái)決定圖標(biāo)所在位置，另外除了JQM自帶的圖標(biāo)外，還可以引入第三方的自定義圖標(biāo) data-icon和data-iconpos的可配值見(jiàn)官方API,內(nèi)容格式(Content formatting),網(wǎng)格布局（Layout grids） 在移動(dòng)設(shè)備上使用多列布局是不推薦的，但是有時(shí)你可能會(huì)需要把

8、一些小的元素比如按鈕導(dǎo)航tab等排成一行，JQM為此提供了一個(gè)簡(jiǎn)單的方法來(lái)構(gòu)建基于CSS的柵格布局（ui-grid）。 有四個(gè)預(yù)設(shè)的配置布局幾乎可滿足在任何情況下使用的要求： 二列 (使用ui-grid-a ) 三列 (使用ui-grid-b ) 四列 (使用ui-grid-c ) 五列 (使用ui-grid-d ) 網(wǎng)格寬度是100%的， 且不可見(jiàn)（沒(méi)有背景或邊框），也沒(méi)有padding和margin，所以不影響它們內(nèi)嵌元素的樣式。在柵格容器里, 子元素以有序的方式被分配 ui-block-a/b/c/d，這使每個(gè)“block”元素并列顯示（組成柵格）。,內(nèi)容格式(Content forma

9、tting),可折疊內(nèi)容（Collapsible content） 創(chuàng)建一個(gè)可折疊的內(nèi)容塊，需要?jiǎng)?chuàng)建一個(gè)容器，并添加 data-role=“collapsible” 屬性，使用data-content-theme屬性允許你為折疊的內(nèi)容設(shè)置一個(gè)主題樣式。 直接在容器里面添加任何標(biāo)題元素（h1-h6)，框架會(huì)把標(biāo)題自動(dòng)轉(zhuǎn)換為一個(gè)可點(diǎn)擊的按鈕并且添加一個(gè)“+”圖標(biāo)用來(lái)指明它是可以展開(kāi)的。 在標(biāo)題后面可以添加任何HTML標(biāo)記，框架會(huì)自動(dòng)把這些標(biāo)記包裹在一個(gè)容器里用以折疊或顯示（當(dāng)點(diǎn)擊標(biāo)題時(shí)）。 默認(rèn)情況下,內(nèi)容被折疊，可通過(guò)data-collapsed 屬性來(lái)配置。 Im a header Im th

10、e collapsible content. By default Im closed, but you can click the header to open me. 可折疊集（Collapsible Set） 通過(guò)在多個(gè)折疊內(nèi)容外添加具有 data-role=“collapsible-set”屬性的容器，該框架會(huì)使它們看起來(lái)像一個(gè)分組部件并且使它交互上像一個(gè)折疊，因此一次只能打開(kāi)一個(gè)部分。 Section 1 Im the collapsible set content for section B. Section 2 Im the collapsible set content for

11、 section B. ,表單元素(Form elements),JQM提供了一套完整的、適合觸摸操作的表單元素，他們都是基于原生的html元素，然后又得到增強(qiáng)，使他們更吸引人并且容易使用，在不支持JQM的瀏覽器下仍然是可用的。 所有的表單都應(yīng)該被包裹在一個(gè)form標(biāo)簽內(nèi)，這個(gè)標(biāo)簽應(yīng)該指定好action和method 屬性用來(lái)控制與服務(wù)器傳送數(shù)據(jù)的方法 默認(rèn)情況下JQM會(huì)自動(dòng)把原生的表單元素增強(qiáng)為適合觸摸操作的組件。這是它通過(guò)標(biāo)簽名尋找表單元素，然后對(duì)他們執(zhí)行JQM插件的方法內(nèi)部實(shí)現(xiàn)的，比如select元素被找到后，JQM通過(guò)用selectmenu插件進(jìn)行初始化，而一個(gè)屬性為type=“che

12、ckbox”的input元素會(huì)被checkboxradio插件來(lái)增強(qiáng)。 如果你需要某表單元素不被JQM處理，只需要給這個(gè)元素增加 data-role=“none” 屬性。 在JQM中所有的表單元素都被設(shè)計(jì)成彈性寬度以適應(yīng)不同移動(dòng)設(shè)備的屏幕寬度，JQM中內(nèi)建的一個(gè)優(yōu)化就是根據(jù)屏幕寬度的不同,label和表單元素的寬度是不同的。如果屏幕寬度相對(duì)窄（小于480px),label元素會(huì)被樣式化為塊級(jí)元素，使他們能夠置于表單元素上方，節(jié)省水平空間；在比較寬的屏幕上，label和表單元素會(huì)被樣式化為兩列的網(wǎng)格布局的一行中，充分利用頁(yè)面的空間。 我們可以把表單內(nèi)的每一個(gè)label/表單元素對(duì)用div或fie

13、ldset容器包裹，然后增加data-role=“fieldcontain”屬性，以改善標(biāo)簽和表單元素在寬屏設(shè)備中的樣式。JQM會(huì)自動(dòng)在容器底部添加一條細(xì)邊框作為分隔線，使得label/表單元素對(duì)在快速掃視時(shí)看起來(lái)對(duì)齊,按鈕（Buttons）,按鈕在用作導(dǎo)航時(shí)應(yīng)該被編碼成a標(biāo)記的鏈接，而提交表單的按鈕則被編碼成 button 元素 它們都會(huì)被JQM框架提供相同的樣式 為鏈接應(yīng)用button樣式 在一個(gè)頁(yè)面的的主要內(nèi)容區(qū)域，你可以把任何a標(biāo)記都轉(zhuǎn)變成button樣式，只需要添加data-role=“button”屬性即可， 即可會(huì)自動(dòng)添加所有必須的樣式class來(lái)把a(bǔ)標(biāo)記都轉(zhuǎn)變成button樣式

14、 Link button 表單按鈕 為了簡(jiǎn)化編寫(xiě)樣式代碼，框架自動(dòng)把任何帶有type=submit/reset/button/image 的 button 元素或者input元素轉(zhuǎn)換為基于連接的button樣式 不需要添加data-role=button 屬性,按鈕（Buttons）,按鈕在用作導(dǎo)航時(shí)應(yīng)該被編碼成a標(biāo)記的鏈接，而提交表單的按鈕則被編碼成 button 元素 它們都會(huì)被JQM框架提供相同的樣式： 為鏈接應(yīng)用button樣式 在一個(gè)頁(yè)面的的主要內(nèi)容區(qū)域，你可以把任何a標(biāo)記都轉(zhuǎn)變成button樣式，只需要添加data-role=“button”屬性即可， 即可會(huì)自動(dòng)添加所有必須的樣式

15、class來(lái)把a(bǔ)標(biāo)記都轉(zhuǎn)變成button樣式 Link button 表單按鈕 為了簡(jiǎn)化編寫(xiě)樣式代碼，框架自動(dòng)把任何帶有type=“submit”/“reset”/“button”/“image” 的 button 元素或者input元素轉(zhuǎn)換為基于連接的button樣式 不需要添加data-role=“button” 屬性。 為了阻止form button被轉(zhuǎn)化成增強(qiáng)的按鈕, 添加data-role=“none” 屬性即可禁止對(duì)此控件的渲染。 button也可以通過(guò)data-icon屬性來(lái)添加圖標(biāo)，并通過(guò)data-iconpos屬性來(lái)決定圖標(biāo)所在位置，還可以使用自定義圖標(biāo) 默認(rèn)情況下的正文內(nèi)容

16、所有按鈕都稱為塊級(jí)元素，所以他們會(huì)充滿整個(gè)屏幕的寬度，如果想要一個(gè)更緊湊的按鈕，讓其只和它包含的文字和圖標(biāo)的寬度相適應(yīng)，添加data-inline=“true” 即可。 某些時(shí)候可能要把某組按鈕設(shè)置在一起，形成一個(gè)單獨(dú)的塊，看起來(lái)像導(dǎo)航組件，要獲得這種效果，把這組按鈕包裹在一個(gè)含有data-role=“controlgroup” 屬性的容器里 框架會(huì)創(chuàng)建一個(gè)垂直排列的按鈕組，并去掉它們之間所有的填白和陰影，并只給第一個(gè)和最后一個(gè)按鈕添加圓角。,文本輸入框（Text input）,文本輸入框是使用標(biāo)準(zhǔn)的html標(biāo)記的，然后JQM會(huì)讓他們變得更吸引人而且易于觸摸使用，默認(rèn)樣式是寬度為父容器的100

17、%，label在另一行 Text Input: 對(duì)于更緊湊的版本，要在一個(gè)狹小的空間內(nèi)顯示，通過(guò)data-mini=“true”屬性可以創(chuàng)建一個(gè)“迷你”版控件（后面所有表單控件都有這個(gè)屬性） Text Input: 可以用div容器包裹它們，并給它設(shè)定data-role=“fieldcontain”屬性，使他們?cè)谝粋€(gè)大的表單里在視覺(jué)上是成組的（后面表單控件都可這樣設(shè)置） Text Input: 在JQM中你可以使用現(xiàn)存的和新的HTML5輸入類型比如 password, email, tel, number和更多的類型。,文本輸入域（Textareas）,對(duì)于多行輸入可以使用textarea元素

18、，JQM框架會(huì)自動(dòng)加大文本域的高度防止出現(xiàn)在移動(dòng)設(shè)備中很難使用的滾動(dòng)條的出現(xiàn) Textarea: Im a basic textarea. If this is pre-populated with content, the height will be automatically adjusted to fit without needing to scroll. That is a pretty handy usability feature. ,搜索輸入框（Search input）,搜索輸入框是一個(gè)新興的html元素，外觀為圓角，當(dāng)你輸入文字后右邊會(huì)出現(xiàn)一個(gè)叉的圖標(biāo)，點(diǎn)擊則會(huì)清除你輸入

19、的內(nèi)容，給input增加type=“search” 屬性來(lái)定義。 Search Input: ,滑動(dòng)條（Slider）,給input的設(shè)置一個(gè)新的HTML5屬性為type=“range”，可以給頁(yè)面添加滑動(dòng)條組件，可以指定它的value值（當(dāng)前值），min和max 屬性的值配置滑動(dòng)條。JQM會(huì)解析這些屬性來(lái)配置滑動(dòng)條。當(dāng)你滑動(dòng)滑動(dòng)條時(shí)，input會(huì)隨之更新數(shù)值，反之亦然，使你能夠很簡(jiǎn)單的在表單里提交數(shù)值。 設(shè)置min和max屬性的值你可以配置滑動(dòng)條上下能取到的值，而value值是用來(lái)指定滑動(dòng)條初始的位置和input框內(nèi)的值滑動(dòng)桿同樣對(duì)鍵盤(pán)有響應(yīng)。右箭頭，上箭頭，Page Up 鍵可以用來(lái)增加當(dāng)

20、前值，左箭頭，下箭頭 ，Page Down鍵則減少當(dāng)前值。Home 鍵和 End 鍵則可以分別調(diào)到滑動(dòng)條的最小值和最大值 Input slider: ,開(kāi)關(guān)（Flip Toggle Switch）,開(kāi)關(guān)在移動(dòng)設(shè)備上是一個(gè)常用的ui元素，用來(lái)二元的切換開(kāi)/關(guān)或者輸入true/false類型的數(shù)據(jù)。你可以像滑動(dòng)框一樣拖動(dòng)開(kāi)關(guān)，或者點(diǎn)擊開(kāi)關(guān)任意一半進(jìn)行操作創(chuàng)建一個(gè)只有2個(gè)option的選擇菜單就可以構(gòu)造一個(gè)開(kāi)關(guān)了。第一個(gè)option會(huì)被樣式化為開(kāi)，第二個(gè)option會(huì)被樣式化為關(guān)，所以請(qǐng)注意代碼書(shū)寫(xiě)順序。 Select slider: Off On ,單選按鈕組（Radio buttons）,傳統(tǒng)的

21、桌面程序的單選按鈕組沒(méi)有對(duì)觸摸輸入的方式進(jìn)行優(yōu)化，所以在JQM中，label也被樣式化為單選按鈕，使按鈕更長(zhǎng)，容易點(diǎn)擊，并添加了自定義的一組圖標(biāo)來(lái)增強(qiáng)視覺(jué)反饋 要?jiǎng)?chuàng)建一組單選框，為input添加 type=“radio”屬性和相應(yīng)的label即可 因?yàn)閱芜x按鈕使用label元素放置radio后，用來(lái)顯示其文本，我們推薦把單選按鈕組用fieldset容器包裹，并給fieldset容器內(nèi)增加一個(gè)legend 元素，用來(lái)表示標(biāo)題，還需將fieldset包裹在有data-role=“controlgroup”屬性的div 里以便于將該組元素和文本框，選擇框等其他表單元素同時(shí)設(shè)置樣式 單選按鈕組也可用作

22、單選的水平按鈕組，只需要為fieldset添加 data-type=horizontal屬性即可 Choose a pet: Cat Dog Hamster Lizard ,復(fù)選按鈕組（Checkboxes）,基本類似單選按鈕組 Agree to the terms: Cheetos Fritos ,選擇菜單（Select Menus）,選擇菜單摒棄了原生的select 元素的樣式，原生的select元素被隱藏，并被一個(gè)由JQM框架自定義樣式的按鈕和菜單替代。當(dāng)被點(diǎn)擊時(shí)，手機(jī)自帶的原生的菜單選擇器會(huì)打開(kāi)。菜單內(nèi)某個(gè)值被選中后，自定義的選擇按鈕的值更新為你選擇的那一個(gè)。 要添加這樣的選擇菜單組件

23、，使用標(biāo)準(zhǔn)的select 元素和位于其內(nèi)的一組option元素?？蚣軙?huì)自動(dòng)找到 所有的select 元素并自動(dòng)把他們?cè)鰪?qiáng)為自定義的選擇菜單。 Shipping method: Standard: 7 day Rush: 3 days Express: next day Overnight ,列表（List View）,列表的代碼為一個(gè)含 data-role=“l(fā)istview” 屬性無(wú)序列表ul。JQM會(huì)把所有必要的樣式(列表項(xiàng)右出現(xiàn)一個(gè)向右箭頭，并使列表與屏幕同寬等)應(yīng)用在列表上，使其成為易于觸摸的控件。 基本的帶鏈接的listviev如下所示，當(dāng)你點(diǎn)擊列表項(xiàng)時(shí)，JQM 會(huì)觸發(fā)該列表項(xiàng)里的第

24、一個(gè)鏈接，通過(guò)ajax請(qǐng)求鏈接的URL地址，在DOM中創(chuàng)建一個(gè)新的頁(yè)面并產(chǎn)生頁(yè)面轉(zhuǎn)場(chǎng)效果。 Acura Audi BMW 其它類型的listview： 嵌套列表（Nested list） 數(shù)字排序列表（Numbered list） 只讀列表（Read-only list） 拆分的按鈕列表 （Split button lists） 列表分割項(xiàng) （List dividers） 搜索過(guò)濾框 （Search filter） 文本格式和計(jì)數(shù)氣泡 （Text formatting & counts） 列表項(xiàng)的縮略圖與圖標(biāo) （Thumbnails & icons） 內(nèi)嵌列表 （Inset lists）,表單提交（Form Submit）,在form元素上正確設(shè)定action 和method屬性后，JQM會(huì)自動(dòng)通過(guò)ajax處理表單的提交，并在表單頁(yè)面和結(jié)果頁(yè)面之間創(chuàng)建一個(gè)平滑的轉(zhuǎn)場(chǎng)效果。如果沒(méi)有指定，提交方法默認(rèn)為get,action默認(rèn)為當(dāng)前頁(yè)的相對(duì)路徑。 表單也可以像鏈接一樣指定轉(zhuǎn)場(chǎng)效果的屬性，比如data-transition=“pop”和data-direction=“reverse”。如果不希望通過(guò)ajax提交表單，可以在全局事件禁用