2021年2月25日 星期四

jQuery Mobile 語法小抄

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

沒有留言:

張貼留言