jQuery Mobile 實(shí)例

jQuery Mobile 頁(yè)面

一個(gè)基本的移動(dòng)網(wǎng)頁(yè)
多個(gè)頁(yè)面
對(duì)話框

實(shí)例解釋

jQuery Mobile 頁(yè)面切換

淡入效果
從后向前翻轉(zhuǎn)效果
流動(dòng)效果
彈出效果
滑動(dòng)效果
從右到左滑動(dòng)并淡入效果
從下到上滑動(dòng)效果
從上到下滑動(dòng)效果
翻頁(yè)效果
沒有切換效果
顛倒效果

實(shí)例解釋

jQuery Mobile 按鈕

創(chuàng)建按鈕
內(nèi)聯(lián)按鈕
組合按鈕
后退按鈕
帶有圓角或不帶有圓角的按鈕
小尺寸或常規(guī)尺寸的按鈕
帶有陰影或不帶有陰影的按鈕

實(shí)例解釋

jQuery Mobile 按鈕圖標(biāo)

添加圖標(biāo)到按鈕
定位圖標(biāo)
只顯示圖標(biāo)

實(shí)例解釋

jQuery Mobile 工具欄

創(chuàng)建頭部欄和尾部欄
在頭部欄添加按鈕
在頭部欄左側(cè)添加按鈕
在頭部欄右側(cè)添加按鈕
帶有按鈕的尾部欄
帶有居中對(duì)齊按鈕的尾部欄
帶有組合按鈕的尾部欄
帶有水平組合按鈕的尾部欄
Inline 定位 - 頭部欄和尾部欄與頁(yè)面內(nèi)容內(nèi)聯(lián)
Fixed 定位 - 頭部欄和尾部欄固定在頁(yè)面的頂部和底部
Fullscreen 定位 - 頭部欄和尾部欄固定在頁(yè)面的頂部和底部，但是會(huì)遮住頁(yè)面內(nèi)容

實(shí)例解釋

jQuery Mobile 導(dǎo)航欄

創(chuàng)建導(dǎo)航欄
內(nèi)容中的導(dǎo)航欄
尾部中的導(dǎo)航欄
在導(dǎo)航欄中為按鈕添加被選中（按下）外觀
持續(xù)添加被選中（按下）外觀
定位導(dǎo)航欄中的圖標(biāo)
導(dǎo)航欄中 10 個(gè)按鈕的演示

實(shí)例解釋

jQuery Mobile 可折疊塊

創(chuàng)建可折疊的內(nèi)容塊
當(dāng)頁(yè)面加載時(shí)展開內(nèi)容
嵌套可折疊塊
可折疊集合
取消可折疊塊上的圓角
讓可折疊塊更小
改變可折疊塊的圖標(biāo)
可折疊列表
可折疊表單

實(shí)例解釋

jQuery Mobile 網(wǎng)格

兩列布局
三列布局
四列布局
五列布局
自定義網(wǎng)格
列內(nèi)的多行

實(shí)例解釋

jQuery Mobile 列表

創(chuàng)建列表視圖
帶圓角的列表視圖
列表分隔
自動(dòng)分隔
創(chuàng)建搜索過濾
改變搜索框內(nèi)的文本
創(chuàng)建只讀列表
為列表項(xiàng)添加縮略圖
添加 HTML 元素，用信息填充列表項(xiàng)
添加圖標(biāo)到列表項(xiàng)
創(chuàng)建帶有分割按鈕的列表
讓列表項(xiàng)更具功能性
創(chuàng)建計(jì)數(shù)氣泡
為列表項(xiàng)創(chuàng)建默認(rèn)鏈接圖標(biāo)
可折疊列表
創(chuàng)建日歷

實(shí)例解釋

jQuery Mobile 表單

文本輸入框
文本輸入域
搜索輸入框
單選按鈕
復(fù)選框
水平組合單選按鈕和復(fù)選框
帶有單選按鈕和復(fù)選框的 Field 容器
預(yù)選中單選按鈕/復(fù)選框
創(chuàng)建選擇菜單
創(chuàng)建帶有分隔（optgroup）的選擇菜單
自定義選擇菜單
在選擇菜單中選擇多個(gè)選項(xiàng)
組合選擇菜單
水平組合選擇菜單
預(yù)選中選項(xiàng)
可折疊表單
創(chuàng)建滑動(dòng)條控件
高亮突出顯示滑動(dòng)條的值
創(chuàng)建撥動(dòng)開關(guān)
預(yù)選中撥動(dòng)開關(guān)

實(shí)例解釋

jQuery Mobile 主題

主題 "a"
主題 "b"
主題 "c"
主題 "d"
主題 "e"
主題頭部、內(nèi)容和尾部
主題對(duì)話框
主題按鈕
主題圖標(biāo)
頭部和尾部的主題按鈕
主題導(dǎo)航欄
主題可折疊按鈕和內(nèi)容
主題列表
主題分割按鈕
主題可折疊列表
主題表單
主題可折疊表單
自定義主題

實(shí)例解釋

jQuery Mobile 觸摸事件

點(diǎn)擊（Tap）事件
點(diǎn)擊不放（Taphold）事件
滑動(dòng)（Swipe）事件
向左滑動(dòng)（Swipeleft）事件
向右滑動(dòng)（Swiperight）事件
滾屏開始（Scrollstart）事件
滾屏結(jié)束（Scrollstop）事件
方向改變（Orientationchange）事件 - 提示方向
方向改變（Orientationchange）事件 - 為縱向和橫向設(shè)置不同的樣式

實(shí)例解釋