こんにちは。All About ホームページ作成ガイドの西村文宏です。
今回は、リスト項目内を検索できるようにする方法や、これまでご紹介してきた作り方を複合させたリストの作り方などをご紹介いたします。
「jQuery Mobile」で作るリスト機能は、ナビゲーション用のメニューとしても便利に活用できます。
ぜひご活用ください。
さて、まずは、下記のサンプルページをスマートフォンのブラウザ等でご覧ください。
以下は、上記のサンプルページのHTMLソースから一部を抜き出したものです。
<ul data-role="listview" data-filter="true">
<li data-role="list-divider">EU加盟国</li>
<li><a href="eu01.html">オーストリア</a></li>
<li><a href="eu02.html">ベルギー</a></li>
<li><a href="eu03.html">ブルガリア</a></li>
： ： ：
<li><a href="eu26.html">スウェーデン</a></li>
<li><a href="eu27.html">イギリス</a></li>
</ul>このサンプルページには、リストの先頭に「Filter items...」と書かれた「検索フィルタ」欄が表示されています。
この「検索フィルタ」欄に文字を入力すると、自動的にその文字を含む項目のみが、リストアップされるようになります。
例えば、全角カタカナ文字で「リア」とだけ入力すると、「オーストリア」・「ブルガリア」・「イタリア」の３項目だけが表示されます。
また、「ランド」と入力すると、「フィンランド」・「アイルランド」・「ポーランド」の３項目だけが表示されます。
入力内容を削除するか、右端の「×」ボタンをタップすると、リストは初期状態の27項目に戻ります。
このように、リスト内に項目がたくさんある場合に、表示項目を絞る目的で便利に活用できます。
スマートフォンは画面が小さいため、読みやすい文字サイズで表示すると、一度に表示できる項目量には限りがあります。
項目数が多いメニューを作る際には、このような検索フィルタを用意しておくと、使いやすくなるでしょう。
この「検索フィルタ」は、リストを作るul要素に、「data-filter」という属性を追加し、以下のように記述するだけで作れます。
<ul data-role="listview" data-filter="true">
たったこれだけの記述で、リストの上部に「検索フィルタ」欄を加えることができます。
必要に応じて、活用してみてください。
続きはアクセストレードに
ログインしてご覧ください。
ログインしてご覧ください。
SHARE
ご注意ください
- 本記事の内容は、2015/04/13更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら