グリッドレイアウトの利用
jQueryMobileでは、グリッドレイアウト支援機能がある
グリッドレイアウトは
均等な長さで部品を並べるときに使える
グリッドレイアウトを使うには
class=”ui-grid-a”
というように
カラム数を指定して
並べたい要素へ
class=”ui-block-a”というように指定する
ちなみに、
ui-gridで指定できるのは a~dになる
aが2
dが5
というようにカラム数を指定する
並べたい要素へ指定する
ui-block は、カラム数+1なので
ui-grid-d
なら
使えるui-blockは
ui-block-e
までになる
もし、
グリッドレイアウトで
ボタンを2つ並べたいのなら
<div class="ui-grid-a"> <div class="ui-block-a"> <button>保存</button> </div> <div class="ui-block-b"> <button>キャンセル</button> </div> </div>
となる
もし、ボタンを3つ並べて表示するなら
<div class="ui-grid-b"> <div class="ui-block-a"> <button>ホーム</button> </div> <div class="ui-grid-b"> <button>お気に入り</button> </div> <div class="ui-grid-c"> <button>検索</button> </div> </div>
となる
さらに、複数行にして
テレビのリモコンみたいにするなら
子要素の
class=”ui-block”を繰り返すことで簡単にできる
[/html]
このように、
class=”ui-block-a”
から
class=”ui-block-c”
の繰り返しを3回することで
3×3のマスになるように配置している
ただ、グリッドレイアウトに関しては導入するなら
jQueryMobileよりも
Bootstrapのほうが楽かもしれない