jQuery Mobile 實例

jQuery Mobile 頁面

一個基本的移動網頁

多個頁面

對話框

實例解釋

jQuery Mobile 頁面切換

淡入效果

從後向前翻轉效果

流動效果

彈出效果

滑動效果

從右到左滑動並淡入效果

從下到上滑動效果

從上到下滑動效果

翻頁效果

沒有切換效果

顛倒效果

實例解釋

jQuery Mobile 按鈕

創建按鈕

內聯按鈕

組合按鈕

後退按鈕

帶有圓角或不帶有圓角的按鈕

小尺寸或常規尺寸的按鈕

帶有陰影或不帶有陰影的按鈕

實例解釋

jQuery Mobile 按鈕圖標

添加圖標到按鈕

定點陣圖標

只顯示圖標

實例解釋

jQuery Mobile 工具欄

創建頭部欄和尾部欄

在頭部欄添加按鈕

在頭部欄左側添加按鈕

在頭部欄右側添加按鈕

帶有按鈕的尾部欄

帶有居中對齊按鈕的尾部欄

帶有組合按鈕的尾部欄

帶有水平組合按鈕的尾部欄

Inline 定位 - 頭部欄和尾部欄與頁面內容內聯

Fixed 定位 - 頭部欄和尾部欄固定在頁面的頂部和底部

Fullscreen 定位 - 頭部欄和尾部欄固定在頁面的頂部和底部，但是會遮住頁面內容

實例解釋

jQuery Mobile 導航欄

創建導航欄

內容中的導航欄

尾部中的導航欄

在導航欄中為按鈕添加被選中（按下）外觀

持續添加被選中（按下）外觀

定位導航欄中的圖標

導航欄中 10 個按鈕的演示

實例解釋

jQuery Mobile 可摺疊塊

創建可摺疊的內容塊

當頁面載入時展開內容

嵌套可摺疊塊

可摺疊集合

取消可摺疊塊上的圓角

讓可摺疊塊更小

改變可摺疊塊的圖標

可摺疊列表

可摺疊表單

實例解釋

jQuery Mobile 網格

兩列布局

三列布局

四列布局

五列布局

自定義網格

列內的多行

實例解釋

jQuery Mobile 列表

創建列表視圖

帶圓角的列表視圖

列表分隔

自動分隔

創建搜索過濾

改變搜索框內的文本

創建只讀列表

為列表項添加縮略圖

添加 HTML 元素，用信息填充列表項

添加圖標到列表項

創建帶有分割按鈕的列表

讓列表項更具功能性

創建計數氣泡

為列表項創建默認鏈接圖標

可摺疊列表

創建日曆

實例解釋

jQuery Mobile 表單

文本輸入框

文本輸入域

搜索輸入框

單選按鈕

複選框

水平組合單選按鈕和複選框

帶有單選按鈕和複選框的 Field 容器

預選中單選按鈕/複選框

創建選擇菜單

創建帶有分隔（optgroup）的選擇菜單

自定義選擇菜單

在選擇菜單中選擇多個選項

組合選擇菜單

水平組合選擇菜單

預選中選項

可摺疊表單

創建滑動條控制項

高亮突出顯示滑動條的值

創建撥動開關

預選中撥動開關

實例解釋

jQuery Mobile 主題

主題 "a"

主題 "b"

主題頭部、內容和尾部

主題對話框

主題按鈕

主題圖標

頭部和尾部的主題按鈕

主題導航欄

主題可摺疊按鈕和內容

主題列表

主題分割按鈕

主題可摺疊列表

主題表單

主題可摺疊表單

自定義主題

實例解釋

jQuery Mobile 觸摸事件

點擊（Tap）事件

點擊不放（Taphold）事件

滑動（Swipe）事件

向左滑動（Swipeleft）事件

向右滑動（Swiperight）事件

滾屏開始（Scrollstart）事件

滾屏結束（Scrollstop）事件

方向改變（Orientationchange）事件 - 提示方向

方向改變（Orientationchange）事件 - 為縱向和橫向設置不同的樣式

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！