ボタンを設定する

2015年12月7日

前回の記事では<a data-role="button">によるボタンを取り上げましたが、ここでは以外の<input>、<button>のボタンについて記事を書いていきます。ボタンには、「クリックかタップのみのボタン」と「値を選択するボタン」があります。

これらを単独かグループ化してくっつけて表示できます。また空間次第では複数のボタンを横一列に並べて表示することができます。

ボタンに関連する属性一覧
要素	属性名と属性値	設定	補足
ボタン	data-theme="a～b"	テーマ	デフォルトでは"a"～"b"まで設定済み
ボタン	data-inline="true"	ボタンをインラインで表示	ボタンの幅は表示するボタンに依存
<fieldset> <div>とか	data-role="controlgroup"	グループ化	四隅が丸くなり、ボタン同士がくっついて表示
	data-role="fieldcontain"	ウィジェットの配置	ウィジェットを水平に並べて配置
	data-type="horizontal"	ボタンの配置	グループ化されたボタンを水平に並べて配置

タップ・クリックのみのボタン

タップ・クリックのみのボタンは、その形状がリンクによるものと同じですが、リンクによるボタンと違う点はdata-属性を追加しなくてもウィジェットとして画面に表示される点です。ボタンのラベルのラベルとして表示されるのは、HTMLと同様、value属性値や<button>～</button>間に書いた文字列です。ウィジェットとして表示されるボタンは以下の物があります。

・フォームの送信ボタン　<input type="submit">
・フォームのリセットボタン　<input type="reset">
・送信されないボタン　<input type="button">
・<button>によるボタン

このボタンを作成すると、デフォルトではフォームの横幅いっぱいに表示されるので、複数ボタンを並べて作成すると、縦に並んで表示されてしまいます。ボタンを横に並べたいときは、それぞれにdata-inline="true"を追加します。こうすることでボタンをインラインで表示できます。

空間の各ブロックにボタンを配置する方法でも、複数のボタンを横一列に並べて表示できます。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQueryMobile ボタンを表示する</title>
	<link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css">
	<script src="../js/jquery-1.11.3.js"></script>
	<script src="../js/jquery.mobile-1.4.5.js"></script>
</head>
<body>
	<section id="page" data-role="page">
		<header data-role="header">
			<h1>ヘッダ</h1>
		</header>
		<article data-role="content">
		<fieldset>
			<div class="ui-block-a">
				<input type="submit" value="送信" data-theme="b">
			</div>
			<div class="ui-block-b">
				<input type="submit" value="取消" data-theme="a">
			</div>
		</fieldset>
		</article>
		<footer data-role="footer">
			<h1>フッタ</h1>
		</footer>
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQueryMobile ボタンを表示する</title>

</head>

<body>

</header>

</div>

</div>

</fieldset>

</article>

</footer>

</section>

</body>

</html>