サンプルで学ぶjQuery Mobileまとめ（後編） (1/5)
前編、中編に続き、jQuery Mobileの機能について解説します。 グリッドレイアウト スマートフォンはPCに比べて画面幅が狭いので、1ページを複数カラムに分割するレイアウトはスマートフォンサイトに向きません。しかし、タブナビゲーションを実装する場合など、複数カラムに分割したい場合もあります。jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されています。 2カラム 2カラムにしたい場合は、class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付けた要素をそれぞれ配置します。 ■サンプル01[HTML] <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block A</strong></div
jQuery Mobileのアコーディオンでスマホサイトを制作 (1/3)
前回に続き、jQuery Mobileでカタログサイトを制作します。今回はアコーディオンパネルのCSSを作成します。 アコーディオンパネルのCSS アコーディオンパネルのHTMLは次のようなシンプルなものでした（2つ目以降のアコーディオンは省略）。 <div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="true"> <h3>SITE MENU 1</h3> <p>sample text sample text sampletext sample text sample text sample text</p> <p>sample text sample text sampletext sample text sample text sample text</p> </div> (省略)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
