ボタンを設定する

公開日： 2016/05/10 : 最終更新日：2016/05/10 jQueryMobile data-inline="true", ボタン, 横に並べる

前回の記事では<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>

スポンサードリンク

Message コメントをキャンセル

PREV: jQueryMobileとフォームを組み合わせてみる
NEXT: 値を選択するボタンを表示する

ボタンを設定する

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

関連記事

ボタンを配置する

ページ遷移時にアニメーションを付けてたり、Ajaxによるアクセスを禁止する

移動しないヘッダ、フッタにIDを設定する

class属性によりレイアウトとテーマを設定する

data-属性によるウィジェットの設定

ポップアップを表示する

<select>により項目選択

項目選択の複数ウィジェットをグループ化する

同じHTML文書に複数ページを作成してみる

コンテンツを表示する

Message コメントをキャンセル

NEW ENTRY

参加中のランキング

最近の投稿

最近のコメント

アーカイブ

カテゴリー

タグ

ボタンを設定する

コーディング関連の情報をお届けします。