最近向母校圖書館借的 "學好跨平台網頁設計第二版 (碁峰, 文淵閣工作室)" 有人預約須還 (這本書編得真好), 我翻閱了一遍大致都是已熟習沒必要再借, 但其中 jQuery Mobile 部分語法表具有快速查閱價值, 故綜合之前筆記中所測試的功能整理如下, 參考 :
1. data-role 屬性值列表 :
jQuery Mobile 利用 HTML5 的 data-* 屬性功能自訂了一組 data-role 自訂屬性, jQuery Mobile 的全部元件與版面配置都是靠 data-role 控制與排版 :
| data-role 屬性值 | 說明 |
| page | 定義一個行動網頁頁面或對話框 (dialog) 頁面 |
| header | 定義行動網頁頁面的頁首 |
| content | 定義行動網頁頁面的內容 |
| footer | 定義行動網頁頁面的頁尾 |
| button | 定義按鈕元件 (用來將 a 元素轉成超連結按鈕) |
| listview | 定義列表清單元件 (用來將 ul 或 ol 元素轉成列表清單) |
| dialog | 定義對話框 |
| popup | 定義彈出式訊息窗 (用來將 div 元素轉成訊息窗) |
| navbar | 定義導覽列 (用在頁首或頁尾內的 div 元素, 按鈕數 <= 5) |
| controlgroup | 定義控制群組 (將 div 區塊內元件視為群組) |
| collapsible | 定義可折疊區塊 |
| collapsible-set | 定義可折疊區塊組合 (製作 accordion 手風琴元件) |
| panel | 定義側邊欄 |
| tabs | 定義頁籤 |
| fieldcontain | 表單欄位之容器 (使每欄以橫線隔開) |
| slider | 表單欄位之滑動開關元件 |
| rangeslider | 表單欄位之雙柄滑桿元件 |
| none | 取消 jQuery Mobile 將此表單欄位初始化 (維持 HTML5) |
- 第一頁除外的頁面, 其 header 可用 data-add-back-btn="true" 屬性添加返回按鈕, 但預設是 "Back", 可用 data-back-btn-text="返回" 修改.
- 設定為 controlgroup 的 div 區塊可以用 data-type="horizontal" 控制容器內元件為水平排列.
- 超連結按鈕可用 data-inline="true" 設定寬度不佔用螢幕寬 (可容納文字/圖示即可), 以利按鈕不分行配置 (但超過 5 個還是會跳行).
- 列表清單元件可用 data-inset="true" 設定清單內縮, 不占用螢幕全寬. 其清單項目 (li 元素) 可添加 data-role="list-divider" 屬性作為分類項目, 添加 data-filter="true" 則可在上面加上一個搜尋框.
2. 按鈕圖示 (data-icon 與 data-iconpost) :
| data-icon 屬性值 | 說明 |
| action | 動作 |
| alert | 注意 |
| arrow-l | 左箭頭 |
| arrow-d | 下箭頭 |
| arrow-d-l | 下左箭頭 |
| arrow-d-r | 下右箭頭 |
| arrow-r | 右箭頭 |
| arrow-u | 上箭頭 |
| arrow-u-l | 上左箭頭 |
| arrow-u-r | 上右箭頭 |
| audio | 音訊 |
| back | 後退 |
| bars | 橫槓 |
| bullets | 子彈 |
| calendar | 日曆 |
| camera | 照相機 |
| carat-d | 向下 |
| carat-l | 向左 |
| carat-r | 向右 |
| carat-u | 向下 |
| check | 選取 |
| clock | 時鐘 |
| cloud | 雲端 |
| comment | 評論 |
| delete | 刪除 |
| edit | 編輯 |
| eye | 眼睛 |
| forbidden | 禁止 |
| forward | 前進 |
| gear | 齒輪 (常用於設定) |
| grid | 網格 |
| heart | 愛心 |
| home | 首頁 |
| info | 訊息 |
| location | 定位 |
| lock | 上鎖 |
| 郵件 | |
| navigation | 導覽 |
| phone | 電話 |
| minus | 減號 |
| plus | 加號 |
| power | 電源 |
| recycle | 回收 |
| refresh | 重新整理 |
| search | 搜尋 |
| shop | 購物 |
| star | 星號 |
| tag | 標籤 |
| user | 使用者 |
| video | 音訊 |
| data-iconpos 屬性值 | 說明 |
| left | 按鈕圖示在左 |
| right | 按鈕圖示在右 |
| top | 按鈕圖示在上 |
| bottom | 按鈕圖示在下 |
| notext | 無文字 (僅顯示按鈕圖示) |
3. 主題佈景 (data-theme 與 data-overlay-theme) :
| data-[overlay-]theme 屬性值 | 說明 |
| a | 預設主題 a |
| b | 備選主題 b |
| c~z | 自訂主題 c~z |
4. 換頁特效 (data-transition) :
| data-transition 屬性值 | 說明 |
| fade | 淡入效果 (預設) |
| flip | 翻轉 |
| flow | 原頁面縮小移出, 新頁面縮小移入後放大 |
| none | 無特效 |
| pop | 新頁面跳出展開 |
| slide | 原頁面由右至左滑出, 新頁面由右至左滑入 |
| slidedown | 原頁面由上至下滑出, 新頁面由上至下滑入 |
| slidefade | 原頁面由右至左淡出, 新頁面由右至左淡入 |
| slideup | 原頁面由下至上滑出, 新頁面由下至上滑入 |
| turn | 以頁面中心為軸轉換 |
5. 超連結按鈕動作屬性 data-rel :
此屬性用在超連結按鈕之動作 :
| data-rel 屬性值 | 說明 |
| popup | 跳出訊息窗 |
| dialog | 開啟對話框 |
| back | 回上一頁 |
| external | 前往外部資源 |
- jQuery Mobile 用超連結按鈕切換頁面時預設都是使用 Ajax, 頁面移出時會被放入暫存區以增進效能, 但對於需動態從資料庫更新者會造成資料不即時問題, 可用 data-ajax="false" 屬性關閉 Ajax.
