8-2 jQuery Mobile基本コンポーネント
13441 ワード
ページ
ページの使用例
例の説明 data-role="page"はブラウザに表示されるページ である. data-role="header"作成ページ上のツールバー(タイトルと検索ボタンでよく使用) data-role=「content」は、テキスト、画像、フォーム、ボタンなどのページの内容を定義します. data-role="footer"作成ページ下部のツールバー マルチページとページジャンプ
例
例の説明 IDにより異なるページ を区別することができる.リンクで#ページ名を使用すると、異なるページ にジャンプできます.外部ページにジャンプする必要がある場合は、ページアドレス を指定する必要がある.**data-rel="dialog"**パラメータを使用して、新しいページ を弾枠で開くことができます.
ページ遷移効果
ブラウザのサポート Internet Explorer 10は、3 D変換(以前のバージョンではサポートされていない) をサポートしています. Operaは依然として3 D変換 をサポートしていない.
主にdata-transitionプロパティによって実現されます
例
の**data-transition="slide"**ページ り え を し、 から へ のページにスライドします. data-direction=「reverse」は、reverseを することで に り えることができます. ページのデフォルトは、 のページ、すなわちfadeにフェードアウトされます.
data-transitionで できる
トランジション
fade
デフォルト. のページにフェードアウトします.
flip
ろから のページに む.
flow
のページを てて、 のページに みます.
pop
ポップアップウィンドウのように のページに します.
slide
から へスライドして のページへ.
slidefade
から にスライドして のページにフェードします.
slideup
から へスライドして のページへ.
slidedown
から へスライドして のページへ.
turn
のページに かいます.
none
はありません.
ツールバーの
jQuery Mobileのボタンは、 の3つの で できます.
:jQuery Mobileでは、ボタンが にスタイル され、モバイルデバイス でより で が られます.data-role=「button」を つ を してページ をリンクしたり、 を してフォームをコミットしたりすることをお めします.
ナビゲーションボタン
ボタンでページをリンクするには、data-role=「button」の を します.
ボタン
では、ボタンは の を めます.ボタンを に わせる がある 、または2つ のボタンを べて する がある は、data-inline=「true」を します.
コンボボタン
jQuery Mobileはボタンを み わせる な を しています.data-role=「controlgroup」プロパティをdata-type=「horizontal|vertical」とともに して、ボタンを または に み わせてください
るボタン
ボタンを するには、data-rel=「back」プロパティを します(アンカーのhref は されます).
ボタンインスタンス
ボタン用data-*共通プロパティ
|属性|値|説明|:|||||||||||||||data-corners|true OR false|ボタンにフィレットがあるかどうかを規定します.|data-mini|true OR false|小型ボタンであるか否かを規定する.|data-shadow|true OR false|ボタンに影があるかどうかを指定します.|
jQuery Mobile Dataプロパティ
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp
ボタンアイコン
ボタンにアイコンを追加するにはdata-iconプロパティを使用します.
構文
例
**data-icon=「back」**アイコンタイプ を します.**data-iconpos="top"**アイコンが される (top,right,bottom,left) を します.**data-iconpos="notext"**ボタンにアイコンだけを させ、 を させない アイコンリファレンス
http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html
..
ページの使用例
！
例の説明
例
例の説明
ページ遷移効果
ブラウザのサポート
主にdata-transitionプロパティによって実現されます
例
の
data-transitionで できる
トランジション
fade
デフォルト. のページにフェードアウトします.
flip
ろから のページに む.
flow
のページを てて、 のページに みます.
pop
ポップアップウィンドウのように のページに します.
slide
から へスライドして のページへ.
slidefade
から にスライドして のページにフェードします.
slideup
から へスライドして のページへ.
slidedown
から へスライドして のページへ.
turn
のページに かいます.
none
はありません.
ツールバーの
jQuery Mobileのボタンは、 の3つの で できます.
:jQuery Mobileでは、ボタンが にスタイル され、モバイルデバイス でより で が られます.data-role=「button」を つ を してページ をリンクしたり、 を してフォームをコミットしたりすることをお めします.
ナビゲーションボタン
ボタンでページをリンクするには、data-role=「button」の を します.
ボタン
では、ボタンは の を めます.ボタンを に わせる がある 、または2つ のボタンを べて する がある は、data-inline=「true」を します.
コンボボタン
jQuery Mobileはボタンを み わせる な を しています.data-role=「controlgroup」プロパティをdata-type=「horizontal|vertical」とともに して、ボタンを または に み わせてください
1
2
3
るボタン
ボタンを するには、data-rel=「back」プロパティを します(アンカーのhref は されます).
ボタンインスタンス
ボタン用data-*共通プロパティ
|属性|値|説明|:|||||||||||||||data-corners|true OR false|ボタンにフィレットがあるかどうかを規定します.|data-mini|true OR false|小型ボタンであるか否かを規定する.|data-shadow|true OR false|ボタンに影があるかどうかを指定します.|
jQuery Mobile Dataプロパティ
http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp
ボタンアイコン
ボタンにアイコンを追加するにはdata-iconプロパティを使用します.
構文
例
jQuery Mobile ！
http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html
..