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)事件 - 為縱向和橫向設定不同的樣式

例項解釋