jQuery Mobile是創(chuàng)建移動(dòng)web應(yīng)用程序觸控優(yōu)化的框架,適用于流行智能手機(jī)和平板電腦,構(gòu)建于jQuery之上.
它會(huì)自動(dòng)為網(wǎng)頁(yè)設(shè)計(jì)交互的易用外觀,并在所有移動(dòng)設(shè)計(jì)上保持一致.
頁(yè)面添加
1.從CDN引用jQuery Mobile
2.從 jQuerymobile.com下載jQuery Mobile庫(kù)
jQuery Mobile頁(yè)面
用于通過(guò)jQuery Mobile為移動(dòng)設(shè)備創(chuàng)建友好的交互外觀
- data-role='page':瀏覽器中顯示的頁(yè)面
- data-role='header':在頁(yè)面頂層創(chuàng)建工具條(通常用于標(biāo)題,搜索按鈕)
- data-role='main':定義頁(yè)面的內(nèi)容,例如文本,按鈕等
- data-role='footer':用于創(chuàng)建頁(yè)面底部工具條
對(duì)話框
顯示信息或請(qǐng)求輸入的視窗類型
- data-rel='dialog':用戶點(diǎn)擊(輕觸)時(shí)創(chuàng)建一個(gè)對(duì)話框
過(guò)渡
實(shí)現(xiàn)從一頁(yè)過(guò)渡到另一頁(yè)面的css效果
- data-transition:過(guò)渡效果可應(yīng)用于任意鏈接或通過(guò)使用 data-transition 屬性進(jìn)行的表單提交
實(shí)例
<div data-role='page' id="page1">
<div data-role = 'header'>
<a href="###" data-role='button' class="ui-btn-left">首頁(yè)</a>
<h1>標(biāo)題</h1>
</div>
<div data-role = 'content'>
<p>內(nèi)容</p>
<a href="#page2" data-rel='dialog'>跳轉(zhuǎn)第二頁(yè)</a>
<!-- data-inline='true'設(shè)置內(nèi)容撐開寬高-->
<button data-inline='true'>按鈕1</button>
<input type="button" value="按鈕2" data-inline='true'/>
<a href="###" data-role="button" data-inline='true'>按鈕3</a>
</div>
<div data-role ='footer'>
<h1>頁(yè)腳</h1>
</div>
</div>
<div id="page2" data-role = 'page'>
<a href="#page1">回到第一頁(yè)</a>
</div>
按鈕
Mobile 應(yīng)用程序是建立在您想要顯示的簡(jiǎn)單的點(diǎn)擊事物上爸吮。
創(chuàng)建的三種方式
- 使用 <button> 元素,用于表單提交
- 使用 <input> 元素,用于表單提交
- 使用 data-role="button" 的a元素,創(chuàng)建頁(yè)面之間的鏈接
主題
jQuery Mobile 提供了五種不同的樣式主題损同，從 "a" 到 "e" - 每種主題帶有不同顏色的按鈕盒音、欄未斑、內(nèi)容塊
- <div data-role="page" data-theme="a|b|c|d|e">
導(dǎo)航
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成跛璧，通常位于頁(yè)眉或頁(yè)腳內(nèi)部
- data-role="navbar" 屬性來(lái)定義導(dǎo)航欄
圖標(biāo)
按鈕添加圖標(biāo)
表單
jQuery Mobile 會(huì)自動(dòng)為 HTML 表單自動(dòng)添加樣式，讓它們看起來(lái)更具吸引力荞驴，觸摸起來(lái)更具友好性
類型
- 文本輸入框
- 搜索輸入框
- 單選按鈕
- 復(fù)選框
- 選擇菜單
- 滑動(dòng)控件
- 切換開關(guān)
jQuery Mobile事件
在 jQuery Mobile 中使用任何標(biāo)準(zhǔn)的 jQuery 事件
- 觸摸事件:當(dāng)用戶觸摸屏幕時(shí)觸發(fā)(敲擊和滑動(dòng))
- 滾動(dòng)事件:當(dāng)頁(yè)面上下滾動(dòng)
scrollstart 事件在用戶開始滾動(dòng)頁(yè)面時(shí)被觸發(fā)
- 頁(yè)面事件:當(dāng)頁(yè)面被顯示,隱藏,創(chuàng)建,加載以及卸載是觸發(fā)
- 方向事件:當(dāng)設(shè)備垂直或水平旋轉(zhuǎn)時(shí)觸發(fā)
事件在用戶垂直或水平旋轉(zhuǎn)移動(dòng)設(shè)備時(shí)被觸發(fā)
