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 表單 文字輸入方塊 實例解釋 #jQuery Mobile 主題 主題"a" 實例解釋 ##jQuery Mobile 觸控事件 點擊不放(Taphold)事件 實例解釋
文字輸入域
搜尋輸入方塊
單選按鈕
複選框
水平組合單選按鈕和複選框
帶有單選按鈕和複選框的Field 容器
預先選中單選按鈕/複選框
建立選擇選單
建立帶有分隔(optgroup)的選擇選單
自訂選擇選單
在選擇選單中選擇多個選項
組合選擇選單
水平組合選擇選單
預先選取選項
可折疊表單
建立滑動條控制項
高亮突出顯示滑動條的值
建立撥動開關
預先選取撥動開關
主題"b"
主題頭、內容與尾部
主題對話方塊
主題按鈕
主題圖示
頭部和尾部的主題按鈕
主題導覽列
主題可折疊按鈕和內容
主題清單
主題分割按鈕
主題可折疊列表
主題表單
主題可折疊表單
自訂主題
滑動(Swipe)事件
向左滑動(Swipeleft)事件
向右滑動(Swiperight)事件
滾屏開始(Scrollstart)事件
滾輪結束(Scrollstop)事件
方向改變(Orientationchange)事件- 提示方向
方向改變(Orientationchange)事件- 為縱向和橫向設定不同的樣式