jQuery Mobile經典...login
jQuery Mobile經典教程
作者:php.cn  更新時間:2022-04-11 13:58:34

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

實例解釋


#