完成例サンプル
リストをうまく利用することで小さなモバイル画面で情報を見やすく整理することができます。
リストビューの作成
リストの作成はul要素にdata-role=”listview”属性を付加します。a要素でリンク設定すると右向きの矢印が表示されます。
また、li要素にdata-role=”list-divider”属性を付加するとそのli要素は見出しになります。
全体を角丸にするにはdata-inset=”true”を付加します。
リストビューの作成
data-role=”listview”
リストビューの例
<ol data-role="listview" data-inset="true">
<li data-role="list-divider">食いしん坊大将</li>
<li><a href="#">ひらめと野良菜のとんちんかん</a></li>
<li><a href="#">瓦風鬼焼きせんべい</a></li>
<li data-role="list-divider">残念で賞</li>
<li><a href="#">かばちんき</a></li>
<li><a href="#">申しわけないでそうろう</a></li>
</ol>
開閉式コンテンツの作成
もともとjQueryを使用しているので開閉式のコンテンツは簡単です。
div要素にdata-role=”collapsible”属性を付加します。divの中にはh1~h6のどれかを配置してその後にdivやp要素を配置して開閉式のコンテンツを作成します。
開閉式コンテンツの作成方法
div要素にdata-role=”collapsible”を指定
タッチする部分はh1~h6
可動部分はpかdiv
作成例
<div data-role="collapsible"> <h2>ぼんじゅーるの桑焼き</h2> <p>ぼんじゅーるを桑の葉２枚で丁寧に包み、えい、やあと叫んで叩き、その後焼く。</p> </div>
ポップアップの作成
a要素にdata-rel=”popup”を付加して、指定したリンク先の内容にdata-role=”popup”を指定するとポップアップすることができます。
ポップアップの作成方法
a要素にdata-rel=”popup”を指定
ポップアップ内容にはdata-role=”popup”を指定
アニメーション効果
a要素側にdata-transition=”アニメーション効果”を設定するとPOPアップのアニメーションが設定できます。
アニメーション効果はjQuery Mobile1.4でスマホサイト作成２〜ボタンの作成 の「ページ切り替え効果」を参照してください。
ポップアップのテーマ
ポップアップのテーマはポップアップ自体とオーバーレイ部分と両方に設定できます。
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とします。
作成例
<p>食いしん坊だけが知っている<a href="#popup1" data-rel="popup" data-transition="slide">こだわりの情報</a>。あなたも今日から食いしん坊の仲間入りをするに違いありません。</p> <div data-role="popup" id="popup1" style="max-width:250px;" class="ui-content" data-theme="a" data-overlay-theme="b"><a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">閉じる</a> すべてが取れたての生の情報です。 </div>
画像のポップアップ
画像もテキストと同様にポップアップすることができます。
画像のポップアップ例
<p><a href="#popupImg" data-rel="popup" data-transition="slidedown"> <img src="images/logo1.png" width="290" height="141" alt="CafeGiulietta"> </a></p> <div data-role="popup" id="popupImg" data-overlay-theme="b" data-theme="a" class="ui-content"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">閉じる</a> <img src="images/logo1.png" width="290" height="141" alt="CafeGiulietta"> </div>
class=”ui-content”は上下左右マージンを取って閉じるボタンは右に表示します。
コメントを投稿するにはログインしてください。