ボタン

前回、リストビューの作成方法をご紹介しましたが、今回は「ボタン」です。
リストビュー同様、メチャクチャ使用頻度が高いと思われる重要なコンポーネントです。
※詳しい説明などは他サイト・書籍を見てください。

 

基本・丸角ボタン


画像1


						<a href="#" class="ui-btn">ボタン1</a>
						<button class="ui-btn">ボタン2</button>

						<a href="#" class="ui-btn ui-corner-all">角丸ボタン1</a>
						<button class="ui-btn ui-corner-all">角丸ボタン2</button>
					

aタグ、buttonタグに「class="ui-btn"」を追加すると、ボタンになります。
さらに、classに「ui-corner-all」を追加すると丸角ボタンになります。




グループボタン


画像2

画像3


						<!--画像2:縦並び-->
						<div data-role="controlgroup">
							<a href="#" class="ui-btn">a ボタン1</a>
							<a href="#" class="ui-btn">a ボタン2</a>
							<a href="#" class="ui-btn">a ボタン3</a>
						</div>

						<div data-role="controlgroup">
							<button class="ui-btn">button ボタン1</button>
							<button class="ui-btn">button ボタン2</button>
							<button class="ui-btn">button ボタン3</button>
						</div>


						<!--画像3:横並び-->
						<div data-role="controlgroup" data-type="horizontal">
							<a href="#" class="ui-btn">a 1</a>
							<a href="#" class="ui-btn">a 2</a>
							<a href="#" class="ui-btn">a 3</a>
						</div>

						<div data-role="controlgroup" data-type="horizontal">
							<button class="ui-btn">button 1</button>
							<button class="ui-btn">button 2</button>
							<button class="ui-btn">button 3</button>
						</div>
					

複数のボタンを「data-role="controlgroup"」属性が追加されたdivタグで囲むと、縦並びでひとまとめにできます。
またさらに、そのdivに「data-type="horizontal"」属性を追加すると横並びになります。
ただし1列に収まらない場合は改行されてしまいます(画像3の下)





折り畳みボタン


画像4

画像4-1

画像4-2


						<div data-role="collapsible">
							<h2>タイトル</h2>
							<p>こんにちは</p> 
						</div>


						<!---画像4-2:最初から開いた状態--->
						<div data-role="collapsible" data-collapsed="false">
							<h2>タイトル</h2>
							<p>最初から開いた状態です。</p> 
						</div>
					

ボタンを押すと折り畳んで隠してあった内容が表示されたり、また折り畳んで隠したりします。
折り畳んでいる時は「+」アイコン、開いている時は「-」アイコンが表示されます。

「data-role="collapsible"」属性が追加されたdivタグで、hタグ、pタグなどの内容を囲みます。
hタグはボタン上のタイトル的な感じで表示され、hタグから下の内容部分は折り畳んで隠されます。
また、このdivタグに、さらに「data-collapsed="false"」を追加すると、最初から全部開いた状態になります。

今回はhタグとpタグだけですが、リストビューとかも入れることができるので試してみてください。




折り畳みボタンアイコン変更


画像4-3

画像4-4


						<div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
							<h2>タイトル</h2>
							<p>こんにちは</p> 
						</div>
					

折り畳みボタンのdivに「data-collapsed-icon="アイコン名"」「 data-expanded-icon="アイコン名"」を追加すると、
折り畳んでいる時、開いている時のアイコンを変更することができます。

その他のアイコンはこちら




折り畳みグループボタン


画像5

画像6

画像6-1


						<div data-role="collapsibleset">
							<div data-role="collapsible">
								<h2>タイトル1</h2>
								<ul data-role="listview">
									<li><a href="#">menu1</a></li>
									<li><a href="#">menu2</a></li>
									<li><a href="#">menu3</a></li>
								</ul>
							</div>
							<div data-role="collapsible">
								<h2>タイトル2</h2>
								<p>こんにちは</p> 
							</div>
							<div data-role="collapsible">
								<h2>タイトル3</h2>
								<p>こんにちは</p> 
							</div>
						</div>


						<!--画像6-1:横幅いっぱい-->
						<div data-role="collapsibleset" data-inset="false">
							<div data-role="collapsible">
								<h2>タイトル1</h2>
								<ul data-role="listview">
									<li><a href="#">menu1</a></li>
									<li><a href="#">menu2</a></li>
									<li><a href="#">menu3</a></li>
								</ul>
							</div>
							<div data-role="collapsible">
								<h2>タイトル2</h2>
								<p>こんにちは</p> 
							</div>
							<div data-role="collapsible">
								<h2>タイトル3</h2>
								<p>こんにちは</p> 
							</div>
						</div>
					

複数の折り畳みボタンを「data-role="collapsibleset"」を追加したdivタグで囲むとグループ化できます。
また「data-role="collapsibleset"」のdivタグに「data-inset="false"」を追加すると、横幅いっぱいに表示されます。





影付きボタン


画像6-2


						<a href="#" class="ui-btn ui-shadow">影付ボタン1</a>
						<button class="ui-btn ui-shadow">影付ボタン2</button>

						<a href="#" class="ui-btn ui-corner-all ui-shadow">角丸影付ボタン1</a>
						<button class="ui-btn ui-corner-all ui-shadow">角丸影付ボタン2</button>
					

classに「ui-shadow」を追加するとボタンに影を付けることができます。




アイコン付きボタン


画像7


						<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">アイコン左</a>
						<button class="ui-btn ui-icon-delete ui-btn-icon-left">アイコン左</button>

						<a href="#" class="ui-btn ui-icon-cloud ui-btn-icon-top">アイコン上</a>
						<a href="#" class="ui-btn ui-icon-camera ui-btn-icon-right">アイコン右</a>
						<a href="#" class="ui-btn ui-icon-star ui-btn-icon-bottom">アイコン下</a>
						<a href="#" class="ui-btn ui-icon-eye ui-btn-icon-notext">アイコンのみ</a>
					

aタグ、buttonタグのclassに「ui-icon-アイコン種類」「ui-btn-icon-位置」を追加すると、
ボタンの左/上/右/下にアイコンを付けることができます。
またボタン位置を「ui-btn-icon-notext」にすると、アイコンのみ表示となります。

その他のアイコンはこちら





インラインボタン


画像8


						<a href="#" class="ui-btn ui-btn-inline">aaa</a>
						<a href="#" class="ui-btn ui-btn-inline">bbbbbbb</a>
						<button class="ui-btn ui-btn-inline">あああ</button>
						<a href="#" class="ui-btn ui-btn-inline">ああああああああ</a>
					

classに「ui-btn-inline」を追加で、テキストの幅だけのボタンを作成できます。
複数のボタンを横に並べる場合は、各ボタンに「ui-btn-inline」を追加します。




ミニボタン


画像9


						<a href="#" class="ui-btn ui-mini">ミニボタン1</a>
						<button class="ui-btn ui-mini">ミニボタン2</button>

						<a href="#" class="ui-btn">ボタン1</a>
						<button class="ui-btn">ボタン2</button>
					

classに「ui-mini」を追加すると、若干ボタンが小さくなります。
画像は上がミニボタン、下が普通のボタンです。




無効ボタン


画像10


						<a href="#" class="ui-btn ui-state-disabled">無効ボタン1</a>
						<button disabled="">無効ボタン2</button>
					

aタグの方はclassに「ui-state-disabled」を追加、buttonタグの方は「disabled=""」のみ追加で、
画像のように無効的な感じで薄く表示され、クリックできない感じになります。




ネイティブボタン


画像11


						<li><a href="#jqm9">ネイティブボタン</a></li>
					

buttonタグに「data-role="none"」で、jQueryMobileのデザインが適用されないボタンになります。
aタグボタンには使えません。


以上でボタンの作成方法は終了です。
次回はダイアログ、ラジオボタンなどその他コンポーネントの作成方法をご紹介します。