より高度なGUI部品を使おう! (3/5)
作成:2011-05-30 09:14
更新:2011-05-30 09:14
更新:2011-05-30 09:14
■グループボタンについて
複数のプッシュボタンを一つにまとめたものもスマートフォンではよく用いられます。リストなどのように、ボタンがきれいにまとまったものです。これは、<div>タグを使って<a>タグなどをひとまとめにすることで作成することができます。これが「グループボタン」です。
下のリスト欄に簡単なサンプルを挙げておきます。アクセスすると、縦に3つのボタンがひとまとめになったものと、横につなげられたものが表示されます。このグループボタンは、以下のような形で作成されていることが分かります。
ボタンには、もう1つ「折り畳みボタン」という面白いGUIが用意されています。これは、クリックすると、折りたたんで隠してあったテキストが表示されたり、表示されていたコンテンツを折りたたんで隠したりするものです。
下のリスト欄にサンプルを掲載しておきます。折り畳みボタンは、ボタンの左側に「+」「-」といったアイコンが表示されるので一目でわかります。このタグは、以下のような形で記述されます。
この「グループボタン」と「折り畳みボタン」を組み合わせ、「折りたたみボタンのグループ」というものも作ることができます。これは、折り畳みボタンを複数用意し、それ全体を<div>タグで囲み、そこに「data-role="collapsible-set"」という属性を用意してやるだけです。これにより、その中にある折り畳みボタンはグループ化され、常にクリックした1つだけが開かれるようになります。いわゆる「アコーディオン表示」のようなスタイルが作れるわけですね。
下のリスト欄に簡単なサンプルを挙げておきます。アクセスすると、縦に3つのボタンがひとまとめになったものと、横につなげられたものが表示されます。このグループボタンは、以下のような形で作成されていることが分かります。
<div data-role="controlgroup">data-role="controlgroup"という属性を用意した<div>タグでまとめることで、その内部のボタンがひとまとめになって表示されるのです。また、この状態では縦にボタンが並びますが、横に並べたいときは、
……<a>タグなどのボタンのタグ……
</div>
<div data-role="controlgroup" data-type="horizontal">このように、data-type="horizontal"という属性を追加することで水平方向にボタンを並べることができます。ただし、これは一列に収まりきれないと勝手に改行してしまうので、扱いには注意が必要でしょう。
■折り畳みボタンについて
ボタンには、もう1つ「折り畳みボタン」という面白いGUIが用意されています。これは、クリックすると、折りたたんで隠してあったテキストが表示されたり、表示されていたコンテンツを折りたたんで隠したりするものです。
下のリスト欄にサンプルを掲載しておきます。折り畳みボタンは、ボタンの左側に「+」「-」といったアイコンが表示されるので一目でわかります。このタグは、以下のような形で記述されます。
<div data-role="collapsible">data-role="collapsible"という属性を用意した<div>タグ内に、<h1>~<h6>のいずれかのタグ(ボタンのタイトル用)と、折りたたみ表示する内容を記述します。<h>タグがボタンとして表示され、それ以降が自動的に折りたたみ表示する内容となります。このままだと、内容は表示された状態になりますが、「最初から隠れた状態にしておきたい」という場合には、<div>タグ内に「data-collapsed="true"」という属性を追加しておきます。これで、最初から折りたたまれコンテンツが見えない状態になります。
<h番号>ボタンのタイトル</h番号>
……折り畳む表示内容……
</div>
この「グループボタン」と「折り畳みボタン」を組み合わせ、「折りたたみボタンのグループ」というものも作ることができます。これは、折り畳みボタンを複数用意し、それ全体を<div>タグで囲み、そこに「data-role="collapsible-set"」という属性を用意してやるだけです。これにより、その中にある折り畳みボタンはグループ化され、常にクリックした1つだけが開かれるようになります。いわゆる「アコーディオン表示」のようなスタイルが作れるわけですね。
(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>これは1つ目のタブ</h2> <div>これは折りたたまれた内容です。</div> </div> <div data-role="collapsible"> <h2>これは2つ目のタブ</h2> <div>これは最初から表示される内容です。</div> </div> </div> </div>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る