リストを使いこなそう (3/5)
作成:2011-06-06 07:38
更新:2011-06-06 07:38
更新:2011-06-06 07:38
■仕切り線によるリストの項目分け
階層リストは、便利ではありますが、いちいち表示が切り替わるのがややうるさい感じはします。それほど項目が多くないのであれば、サブリストを作るのでなく、「リストをいくつかに分けて整理する」という方法もあります。
下のリスト欄に、その例をあげてあります。この例では、1つのリスト内に「英語」「独語」というタイトルが表示され、その下にそれぞれの項目が表示されています。この「英語」「独語」は、「仕切り線」となる項目です。リストを見ると、
ここではリンクなどは用意していませんが、この仕切り線となる項目にも<a>タグのリンクを用意することはできます。ただし、そうすると表示は他の項目とあまり大きな違いはなくなってしまいます。
data-role="list-divider"は、あくまで項目を分類するための仕切りですから、「<a>タグのリンクなどを中に用意しないのが基本」と考えたほうが良いでしょう。
下のリスト欄に、その例をあげてあります。この例では、1つのリスト内に「英語」「独語」というタイトルが表示され、その下にそれぞれの項目が表示されています。この「英語」「独語」は、「仕切り線」となる項目です。リストを見ると、
<li data-role="list-divider">英語</li>このように記述されていることがわかるでしょう。data-role="list-divider"という属性を追加すると、その項目はリストを切り分けるための項目として扱われるようになります。これを利用して、関連する項目ごとに切り分けて表示すれば、いくつかのリストを1つにまとめることもできます。
ここではリンクなどは用意していませんが、この仕切り線となる項目にも<a>タグのリンクを用意することはできます。ただし、そうすると表示は他の項目とあまり大きな違いはなくなってしまいます。
data-role="list-divider"は、あくまで項目を分類するための仕切りですから、「<a>タグのリンクなどを中に用意しないのが基本」と考えたほうが良いでしょう。
(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 data-role="list-divider">英語</li> <li>One</li> <li>Two</li> <li>Three</li> <li data-role="list-divider">独語</li> <li>Eine</li> <li>Twei</li> <li>Drai</li> </ul> </div> </div>
※関連コンテンツ
「jQuery Mobileによるスマートフォン用Webサイト作成入門」に戻る