960グリッドシステムをjQuery-Mobileと併用する為のスタイルシート・jquery-mobile-960

どこかで使うかもしれないと思って
メモがてらシェア。スマートフォンに
サクッと対応させるjQueryプラグイン
のjquery-mobileに960グリッドシス
テムを取り入れることが出来るcss、
jquery-mobile-960です。

なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。

jquery-mobile-960

jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。

少し大きいですけど全画面キャプチャ↓

実際にiPhoneで確認

縦の場合。

横の場合。

使い方

<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
    <link href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-960.min.css" />
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

普通にjquery-mobile-960のcssを加えます。マークアップは以下のような感じ。

<fieldset class="container_12">
	<div class="grid_2"><button type="submit">Button 1</button></div>
	<div class="grid_8"><button type="submit">Button 2</button></div>	   
	<div class="grid_2"><button type="submit">Button 3</button></div>	   
    </fieldset>

上記の場合、3カラム構成で2-8-2の割合で幅を取ったボタンを配置します。

実装例が以下。