2014/03/27

レスポンシブデザインにも即対応!jQuery Mobileでボタンを作成する方法

【jQuery Mobile】Button要素のデザイン まとめ

jQuery Mobileを利用すると,スマートフォン用デザインや動作が簡単に実装できます.

今回はhttp://demos.jquerymobile.com/1.4.2/から,ボタンのデザインを簡単に変更する方法をまとめました.

目次

jQuery Mobileの使い方

まず,jQuery Mobileを使用するために,以下の3種類のソースコードを読み込みます.

<link rel="stylesheet" href="../css/jquery.mobile-1.4.2.css">
<script src="../js/jquery-1.11.0.js"></script>
<script src="../js/jquery.mobile-1.4.2.js"></script>

そして,文書の表示領域を設定するために,以下の一文をヘッダに追加します.

<meta name="viewport" content="width=device-width,initial-scale=1">

以上で準備は完了です.さっそくボタンを作成してみます.

サンプル

デフォルト

<!-- デフォルト -->
<input type="button" value="デフォルト">

角丸なし

<!-- 角丸なし -->
<input type="button" data-corners="false" value="角丸なし">

丸ボタン

<!-- 丸ボタン -->
<input type="button" data-icon="delete" data-iconpos="notext" value="丸ボタン">

影なし

<!-- 影なし-->
<input type="button" data-shadow="false" value="影なし">

インライン

<!-- インライン -->
<input type="button" data-inline="true" value="インライン">

カラーテーマ変更

<!-- カラーテーマ変更 -->
<input type="button" data-theme="a" value="テーマA">
<input type="button" data-theme="b" value="テーマB">

ミニサイズ

<!-- ミニサイズ -->
<input type="button" data-mini="true" value="ミニ">

アイコン付き

<!-- アイコン付き -->
<input type="button" data-icon="delete" value="アイコン付き">

アイコン位置変更

<!-- アイコン位置変更 -->
<input type="button" data-icon="delete" data-iconpos="right" value="アイコン右位置">

使用不可ボタン

<!-- disable -->
<input type="button" disabled="" value="使用不可ボタン">

jQuery Mobile非適応

<!-- jQuery Mobile非適応 -->
<input type="button" data-role="none" value="jQuery Mobile非適応">

まとめ

ボタンの形を簡単に変更できることがお分かりいただけたかと思います.
さらにレスポンシブ対応なので様々なデバイスにも対応可能です.

ボタン以外の要素についても,次回以降にまとめていきたいと思います.