最近向母校圖書館借的 "學好跨平台網頁設計第二版 (碁峰, 文淵閣工作室)" 有人預約須還 (這本書編得真好), 我翻閱了一遍大致都是已熟習沒必要再借, 但其中 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.
沒有留言 :
張貼留言