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

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

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

3、d Platforms）,A-級 具有基于ajax動態(tài)漸變效果的高級體驗(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)頁面標(biāo)題的作用, 通常是 mobile page中的第一個元素，一般包含有一個頁面標(biāo)題和兩個按鈕 Footer bar 通常是最后一個元素，相比于header在內(nèi)容和功能上面更加自由， 一般包含一些文字和按鈕 在header/footer中一個水平的導(dǎo)航欄或者tab頁是非常常見的；JQM包含了 導(dǎo)航條部件 ，該部件能將一個無序列表（ul）鏈接變成一個水平分布的按鈕欄。

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

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

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

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

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

10、e collapsible content. By default Im closed, but you can click the header to open me. 可折疊集（Collapsible Set） 通過在多個折疊內(nèi)容外添加具有 data-role=“collapsible-set”屬性的容器，該框架會使它們看起來像一個分組部件并且使它交互上像一個折疊，因此一次只能打開一個部分。 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)該被包裹在一個form標(biāo)簽內(nèi)，這個標(biāo)簽應(yīng)該指定好action和method 屬性用來控制與服務(wù)器傳送數(shù)據(jù)的方法 默認(rèn)情況下JQM會自動把原生的表單元素增強(qiáng)為適合觸摸操作的組件。這是它通過標(biāo)簽名尋找表單元素，然后對他們執(zhí)行JQM插件的方法內(nèi)部實(shí)現(xiàn)的，比如select元素被找到后，JQM通過用selectmenu插件進(jìn)行初始化，而一個屬性為type=“che

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

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

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

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

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

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

18、，JQM框架會自動加大文本域的高度防止出現(xiàn)在移動設(shè)備中很難使用的滾動條的出現(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）,搜索輸入框是一個新興的html元素，外觀為圓角，當(dāng)你輸入文字后右邊會出現(xiàn)一個叉的圖標(biāo)，點(diǎn)擊則會清除你輸入

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

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

21、桌面程序的單選按鈕組沒有對觸摸輸入的方式進(jìn)行優(yōu)化，所以在JQM中，label也被樣式化為單選按鈕，使按鈕更長，容易點(diǎn)擊，并添加了自定義的一組圖標(biāo)來增強(qiáng)視覺反饋 要創(chuàng)建一組單選框，為input添加 type=“radio”屬性和相應(yīng)的label即可 因?yàn)閱芜x按鈕使用label元素放置radio后，用來顯示其文本，我們推薦把單選按鈕組用fieldset容器包裹，并給fieldset容器內(nèi)增加一個legend 元素，用來表示標(biāo)題，還需將fieldset包裹在有data-role=“controlgroup”屬性的div 里以便于將該組元素和文本框，選擇框等其他表單元素同時設(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元素被隱藏，并被一個由JQM框架自定義樣式的按鈕和菜單替代。當(dāng)被點(diǎn)擊時，手機(jī)自帶的原生的菜單選擇器會打開。菜單內(nèi)某個值被選中后，自定義的選擇按鈕的值更新為你選擇的那一個。 要添加這樣的選擇菜單組件

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

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