Please enable JavaScript.
Coggle requires JavaScript to display documents.
jQuery Mobile (WHAT (頁面間跳躍透過超連結 (用anchor, 使用navigation stack),…
jQuery Mobile
WHAT
建立跨mobile網頁app
以Jquery為基礎
以頁面(page)定義內容，也是最小單位
以卡片(card)方式定義頁面結構
html可包含多個頁面
頁面即data-role=page
頁面間跳躍透過超連結
用anchor
使用navigation stack
事件
觸控事件
tap
taphold
swipe
swipeleft
swiperight
方位
orientationchange
event.orientation
portrait
landscape
捲動
scrollstart
scrollstop
頁面
pagecreate
pagebeforecreate
pagebeforeshow
pageshow
pagebeforehide
pagehide
pageinit
mobileinit
jquery mobile載入完畢
Faq
html指定縮放比例
meta, viewport 指定width=device-width,initial-scale=1
data-*屬性可透過Element.dataset屬性取得
連結外部jquery mobile頁面
條件
同網域
只有單一頁面
超連結不可用target屬性
超連結是目錄最後需加上/
grid
ui-grid-a,b,c,d class
ui-block-a,b,c,d
相關檔案
jquery核心js
Jquery mobile js
jquery.mobile.*.min.js
Jquery mobile css
jquery.mobile.*.min.css
Jquery mobile 外部樣式檔(選擇)
工具列定位
同行
固定在最上/下
data-id相同
data-position=fixed
固定在最上/下(點選時會隱藏)
支援平台
iOS
3.2-5.0
Android
2.1-2.3,3.1,4.0
方法
$.mobile
changePage
loadPage
showPageLoadingMsg
hidePageLoadingMsg
jqmData
查詢data-屬性
defaultPageTransition
全域
標記
data-role
定義呈現UI
內建
header
頁面標題列
content
頁面內容
footer
頁面註腳列
page
頁面
dialog
視窗
navbar
導覽列
class=ui-btn-active
預設按鈕
類似Tab panel
data-icon添加圖示
button
按鈕
data-inline
按鈕同行並排
套用<a>
可套標記
data-theme
data-icon
dataicon-pos
data-corners
data-shadow
controlgroup
群組
data-type
=horizontal
=vertical
預設
listview
套用ul, li
data-insert
支援巢狀
data-split-icon
自訂ui