jQuery Mobile

jQuery Mobileのまとめ資料

最近ようやくjQuery Mobileを触りました。
色々ネットで検索しましたがプロパティやイベントの一覧(チートシート的なもの)が意外とないので、自分のメモ用で作成しました。
抜けや間違いがあるかと思いますので間違いがあったら指摘して頂けると助かります。




テーマ一覧

プロパティ 使用例 イメージ
a data-theme=”a” thema_a
b data-theme=”b” thema_b
c data-theme=”c” thema_c
d data-theme=”d” thema_d
e data-theme=”e” thema_e

イベント一覧

プロパティ 使用例 イベント
tap $(‘div’).tap(); タップ(クリック)
taphold $(‘div’).taphold(); タップ(クリック)したまま約1秒
swipe $(‘div’).swipe(); スライド
swipeleft $(‘div’).swipeleft(); 左にスライド
swiperight $(‘div’).swiperight(); 右にスライド
orientationchange $(‘div’).orientationchange(); 画面の向き(縦、横)
scrollstart $(‘div’).crollstart(); スクロールスタート
scrollstop $(‘div’).scrollstop(); スクロールストップ
pagebeforeshow $(‘div’).pagebeforeshow(); ページ表示前
pagebeforehide $(‘div’).pagebeforehide(); ページ切り替わり時
pageshow $(‘div’).pageshow(); ページ表示後
pagehide $(‘div’).pagehide(); ページ切り替わり後
pagebeforecreate $(‘div’).pagebeforecreate(); ページ初期化前
pagecreate $(‘div’).pagecreate(); ページ初期化後
animationComplete $(‘div’).animationComplete(); CSS追加・削除

アイコン一覧

プロパティ 使用例 イメージ
arrow-l data-icon=”arrow-l” arrow-l
arrow-r data-icon=”arrow-r” arrow-l
arrow-u data-icon=”arrow-u” 上矢印
arrow-d data-icon=”arrow-d” 下矢印
delete data-icon=”delete” ×印
plus data-icon=”plus” +印
minus data-icon=”minus” -印
check data-icon=”check” レ点
gear data-icon=”gear” ギア
refresh data-icon=”refresh” 再読込
forward data-icon=”forward” 前進
back data-icon=”back” 後退
grid data-icon=”grid” グリッド
star data-icon=”star” 星
alert data-icon=”alert” アラート
info data-icon=”info” びっくりマーク
home data-icon=”home” 家
search data-icon=”search” 虫眼鏡

アイコンのポジション

プロパティ 使用例 位置 イメージ
指定無し デフォルト
right data-iconpos=”right” right
top data-iconpos=”top” top
bottom data-iconpos=”bottom” bottom

ページ遷移時のエフェクト

プロパティ 使用例 エフェクト
slide data-transition=”slide” 左から右へスライド
slideup data-transition=”slideup” 下から上へのスライド
slidedown data-transition=”slidedown” 上から下へのスライド
pop data-transition=”pop” 中央から広がる
fade data-transition=”fade” フェードイン、フェードアウト
flip data-transition=”flip” 回転



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です