リストを使いこなそう (2/5)
作成:2011-06-06 07:37
更新:2011-11-04 17:25
更新:2011-11-04 17:25
■より複雑なリストの表示
<ul><li>によるリストの表示は、使い方によってはかなり高度なことが可能です。まずは「階層リスト」についてです。
リストは、リストの中に更にリストを組み込み、階層化することができます。ごく簡単な例を下のリスト欄にあげておきました。実際にアクセスして表示を確認してみましょう。まず2項目のリストが現れ、選択するとその項目内のサブリストが現れます。
このサンプルでは、ざっと以下のような構造をしていることがわかるでしょう。
下に挙げた例では、まず「英語」「独語」という項目だけが表示され、「英語」をクリックすると、新たに「One」「Two」「Three」という項目のリストが表示される、というわけです。
注目すべきは、リストからサブリストへの表示切替には、<a>タグなどのリンクは一切用意していない、という点でしょう。ただ普通に<ul><li>タグでリストを書くだけで、階層化されていれば自動的に「メインのリストからサブリストへ」という表示切替リンクが生成されるのですね。
(※なお、1.0b2では、ネストされたリストを移動した際、「Back」ボタンは自動表示されなくなったようです)
リストは、リストの中に更にリストを組み込み、階層化することができます。ごく簡単な例を下のリスト欄にあげておきました。実際にアクセスして表示を確認してみましょう。まず2項目のリストが現れ、選択するとその項目内のサブリストが現れます。
このサンプルでは、ざっと以下のような構造をしていることがわかるでしょう。
<ul data-role="listview">項目である<li>タグの中に、更に<ul>タグを使ってリストを作成しているわけですね。このように階層化されたリストを表示させると、ちょっと意外が動作をします。アクセスしたときには、サブリスト(内部にあるリスト)は表示されず、外側のリストの項目名だけが表示されるのです。そしてその項目を選択すると、その項目のサブリストに表示が切り替わります。
<li>項目その1
<ul data-role="listview">
<li>サブ項目その1</li>
……略……
</ul>
</li>
……略……
</ul>
下に挙げた例では、まず「英語」「独語」という項目だけが表示され、「英語」をクリックすると、新たに「One」「Two」「Three」という項目のリストが表示される、というわけです。
注目すべきは、リストからサブリストへの表示切替には、<a>タグなどのリンクは一切用意していない、という点でしょう。ただ普通に<ul><li>タグでリストを書くだけで、階層化されていれば自動的に「メインのリストからサブリストへ」という表示切替リンクが生成されるのですね。
(※なお、1.0b2では、ネストされたリストを移動した際、「Back」ボタンは自動表示されなくなったようです)
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※階層化リスト <!-- home page --> <div id="home" data-role="page"> <div data-role="header"> <h1>Hello</h1> </div> <div data-role="content"> <p>※リスト表示のサンプル。</p> <ul data-role="listview"> <li>英語 <ul data-role="listview"> <li>One</li> <li>Two</li> <li>Three</li> </ul> </li> <li>独語 <ul data-role="listview"> <li>Eine</li> <li>Twei</li> <li>Drai</li> </ul> </li> </ul> </div> </div>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る