ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpos属性の２つを設定します。アイコンのみのボタンもこれにより設定します。

アイコンと文字列を同じボタンに表示するとき、アイコンが左右にある時は、アイコンが文字列と同じ行に表示されるため、ボタンの高さは１行分ですが、アイコンを上下どちらかに表示させるときは、ボタンの高さが２行分です。

ちなみに、ボタンにアイコンのみを表示したいときは、「data-iconpos="notext"」と設定します。このときaタグから閉じタグの文字列はツールチップ(title属性)に設定されています。

って読んだ本にはそう書いてあるのですが、私の環境だと表示されません。なぜ・・・・

アイコンのみのボタンは形状は丸形です。その直径は、文字列を表示する時のボタンの高さの半分程度になるので、文字列を表示する場合よりも形状が小さいです。ボタンを小さくすると指での操作がしづらいので、スマホで実際にテストしたほうがいいです。

デザインをカスタマイズしてみる

ボタンは、属性の追加によりデザインを変更できます。なのですが、範囲は以下だけです。
・角を丸くする
・テーマを変更する
・影をつける

３つです。

角を丸く

単独のボタンは、デフォルトでは四隅の角が丸いデザインですが、data-corner属性の値がデフォルトではtrueが設定されているからです。この値をfalseにすると、ボタンは四角形になります。

影をつける

デフォルトではボタンの周囲には影が付けられています。影をなくすには「data-shadow="false"」と設定します。

テーマを変える

ボタンを色付けするときに便利なのがテーマの設定です。ボタンのdata-theme属性を設定すると、ページのテーマに関係なく、ボタンだけのテーマを設定でき、ボタンに表示されるアイコンもテーマに沿ったデザインが設定できます。

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

<!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">
		<article data-role="content">

		<!-- data-icon,data-iconposの使用例 -->
		<div>
			<a href="#left"  data-role="button" data-inline="true" 
			data-icon="arrow-l">左</a>
			<a href="#right" data-role="button" data-inline="true" 
			data-icon="arrow-r" data-iconpos="right">右</a>
			<a href="#up"    data-role="button" data-inline="true" 
			data-icon="arrow-u" data-iconpos="top">上</a>
			<a href="#down"  data-role="button" data-inline="true" 
			data-icon="arrow-d" data-iconpos="bottom">下</a>
		</div>

		<!-- data-iconpos="notext"を使用例-->
		<div>
			<a href="#prev" data-role="button" data-inline="true" 
				data-icon="arrow-l" data-iconpos="notext">前へ</a>
			<a href="#next" data-role="button" data-inline="true" 
				data-icon="arrow-r" data-iconpos="notext">次へ</a>
		</div>

		<!-- data-corner="false"  -->
			<a href="#register" data-role="button" data-corners="false">登録</a>

		<!-- data-shadow="false"  -->
			<a href="#register" data-role="button" data-shadow="false">登録</a>

		<!-- data-theme="*"  -->
			<a href="#register" data-role="button" data-theme="a">a</a>
			<a href="#register" data-role="button" data-theme="b">b</a>
		</article>
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

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

</head>

<body>

<div>

<a href="#left" data-role="button" data-inline="true"

data-icon="arrow-l">左</a>

<a href="#right" data-role="button" data-inline="true"

data-icon="arrow-r" data-iconpos="right">右</a>

<a href="#up" data-role="button" data-inline="true"

data-icon="arrow-u" data-iconpos="top">上</a>

<a href="#down" data-role="button" data-inline="true"

data-icon="arrow-d" data-iconpos="bottom">下</a>

</div>

<div>

<a href="#prev" data-role="button" data-inline="true"

data-icon="arrow-l" data-iconpos="notext">前へ</a>

<a href="#next" data-role="button" data-inline="true"

data-icon="arrow-r" data-iconpos="notext">次へ</a>

</div>

</article>

</section>

</body>

</html>