より高度なGUI部品を使おう！ (3/5)

複数のプッシュボタンを一つにまとめたものもスマートフォンではよく用いられます。リストなどのように、ボタンがきれいにまとまったものです。これは、<div>タグを使って<a>タグなどをひとまとめにすることで作成することができます。これが「グループボタン」です。

下のリスト欄に簡単なサンプルを挙げておきます。アクセスすると、縦に３つのボタンがひとまとめになったものと、横につなげられたものが表示されます。このグループボタンは、以下のような形で作成されていることが分かります。

<div data-role="controlgroup">
    ……<a>タグなどのボタンのタグ……
</div>

data-role="controlgroup"という属性を用意した<div>タグでまとめることで、その内部のボタンがひとまとめになって表示されるのです。また、この状態では縦にボタンが並びますが、横に並べたいときは、

<div data-role="controlgroup" data-type="horizontal">

このように、data-type="horizontal"という属性を追加することで水平方向にボタンを並べることができます。ただし、これは一列に収まりきれないと勝手に改行してしまうので、扱いには注意が必要でしょう。




ボタンには、もう１つ「折り畳みボタン」という面白いGUIが用意されています。これは、クリックすると、折りたたんで隠してあったテキストが表示されたり、表示されていたコンテンツを折りたたんで隠したりするものです。

下のリスト欄にサンプルを掲載しておきます。折り畳みボタンは、ボタンの左側に「＋」「－」といったアイコンが表示されるので一目でわかります。このタグは、以下のような形で記述されます。

<div data-role="collapsible">
    <h番号>ボタンのタイトル</h番号>
    ……折り畳む表示内容……
</div>

data-role="collapsible"という属性を用意した<div>タグ内に、<h1>～<h6>のいずれかのタグ（ボタンのタイトル用）と、折りたたみ表示する内容を記述します。<h>タグがボタンとして表示され、それ以降が自動的に折りたたみ表示する内容となります。このままだと、内容は表示された状態になりますが、「最初から隠れた状態にしておきたい」という場合には、<div>タグ内に「data-collapsed="true"」という属性を追加しておきます。これで、最初から折りたたまれコンテンツが見えない状態になります。

この「グループボタン」と「折り畳みボタン」を組み合わせ、「折りたたみボタンのグループ」というものも作ることができます。これは、折り畳みボタンを複数用意し、それ全体を<div>タグで囲み、そこに「data-role="collapsible-set"」という属性を用意してやるだけです。これにより、その中にある折り畳みボタンはグループ化され、常にクリックした１つだけが開かれるようになります。いわゆる「アコーディオン表示」のようなスタイルが作れるわけですね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※グループボタンの例

<div id="home" data-role="page">
	<div data-role="header">
		<h1>Hello</h1>
	</div>
	<div data-role="content">
	<div data-role="controlgroup">
		<a href="#" data-role="button">A</a>
		<a href="#" data-role="button">B</a>
		<a href="#" data-role="button">C</a>
	</div>
	<hr />
	<div data-role="controlgroup" data-type="horizontal">
		<a href="#" data-role="button">A</a>
		<a href="#" data-role="button">B</a>
		<a href="#" data-role="button">C</a>
	</div>

	</div>
</div>


※折り畳みボタンの例

<div id="home" data-role="page">
	<div data-role="header">
		<h1>Hello</h1>
	</div>
	<div data-role="content">
		<p>折り畳みボタン</p>
		<div data-role="collapsible" data-collapsed="true">
			<h2>これは１つ目のタブ</h2>
			<div>これは折りたたまれた内容です。</div>
		</div>
		<div data-role="collapsible">
 					<h2>これは２つ目のタブ</h2>
			<div>これは最初から表示される内容です。</div>
		</div>
	</div>
</div>