解 説

mob1
完成例サンプル
リストをうまく利用することで小さなモバイル画面で情報を見やすく整理することができます。

リストビューの作成

リストの作成はul要素にdata-role=”listview”属性を付加します。a要素でリンク設定すると右向きの矢印が表示されます。
また、li要素にdata-role=”list-divider”属性を付加するとそのli要素は見出しになります。
全体を角丸にするにはdata-inset=”true”を付加します。

リストビューの作成
data-role=”listview”

リストビューの例

開閉式コンテンツの作成

もともとjQueryを使用しているので開閉式のコンテンツは簡単です。
div要素にdata-role=”collapsible”属性を付加します。divの中にはh1~h6のどれかを配置してその後にdivやp要素を配置して開閉式のコンテンツを作成します。

開閉式コンテンツの作成方法
div要素にdata-role=”collapsible”を指定
タッチする部分はh1~h6
可動部分はpかdiv

作成例

ポップアップの作成

a要素にdata-rel=”popup”を付加して、指定したリンク先の内容にdata-role=”popup”を指定するとポップアップすることができます。

ポップアップの作成方法
a要素にdata-rel=”popup”を指定
ポップアップ内容にはdata-role=”popup”を指定

アニメーション効果

a要素側にdata-transition=”アニメーション効果”を設定するとPOPアップのアニメーションが設定できます。
アニメーション効果はjQuery Mobile1.4でスマホサイト作成2〜ボタンの作成 の「ページ切り替え効果」を参照してください。

ポップアップのテーマ

ポップアップのテーマはポップアップ自体とオーバーレイ部分と両方に設定できます。
data-theme=”a” ポップアップ自体のテーマ
data-overlay-theme オーバーレイ部分のテーマ

ポップアップの位置

ポップアップはタップした位置を中心に表示されます。
windowの中心に表示する場合はa要素にdata-position-to=”window”を追加します。

閉じるボタン

閉じるボタン「x」はポップアップ自身の方にdata-rel=”back”属性を設定します。
さらにボタンのアイコンを削除するためにdata-icon=”delete”属性とテキストを表示させないdata-iconpos=”notext”属性を追加します。
右にボタンを表示するにはui-btn-right
左にボタンを表示するにはui-btn-leftとします。

作成例

画像のポップアップ

画像もテキストと同様にポップアップすることができます。

画像のポップアップ例

class=”ui-content”は上下左右マージンを取って閉じるボタンは右に表示します。