jQuery Mobileではdata-role=”listview”で指定することによりリスト表示ができる。
また、そのリストの折りたたみもdata-role=”collapsible”を指定するだけで簡単に折り畳みメニューになる。
そのまま使えるサンプルコードは以下。
<div data-role="collapsible"> <h6>都道府県から選択</h6> <ul data-role="listview" data-inset="true"> <li><a href="#">北海道</a></li> <li><a href="#">青森県</a></li> <li><a href="#">岩手県</a></li> <li><a href="#">宮城県</a></li> <li><a href="#">秋田県</a></li> <li><a href="#">山形県</a></li> <li><a href="#">福島県</a></li> <li><a href="#">茨城県</a></li> <li><a href="#">栃木県</a></li> <li><a href="#">群馬県</a></li> <li><a href="#">埼玉県</a></li> <li><a href="#">千葉県</a></li> <li><a href="#">東京都</a></li> <li><a href="#">神奈川県</a></li> <li><a href="#">新潟県</a></li> <li><a href="#">富山県</a></li> <li><a href="#">石川県</a></li> <li><a href="#">福井県</a></li> <li><a href="#">山梨県</a></li> <li><a href="#">長野県</a></li> <li><a href="#">岐阜県</a></li> <li><a href="#">静岡県</a></li> <li><a href="#">愛知県</a></li> <li><a href="#">三重県</a></li> <li><a href="#">滋賀県</a></li> <li><a href="#">京都府</a></li> <li><a href="#">大阪府</a></li> <li><a href="#">兵庫県</a></li> <li><a href="#">奈良県</a></li> <li><a href="#">和歌山県</a></li> <li><a href="#">鳥取県</a></li> <li><a href="#">島根県</a></li> <li><a href="#">岡山県</a></li> <li><a href="#">広島県</a></li> <li><a href="#">山口県</a></li> <li><a href="#">徳島県</a></li> <li><a href="#">香川県</a></li> <li><a href="#">愛媛県</a></li> <li><a href="#">高知県</a></li> <li><a href="#">福岡県</a></li> <li><a href="#">佐賀県</a></li> <li><a href="#">長崎県</a></li> <li><a href="#">熊本県</a></li> <li><a href="#">大分県</a></li> <li><a href="#">宮崎県</a></li> <li><a href="#">鹿児島県</a></li> <li><a href="#">沖縄県</a></li> </ul> </div>
さらに、都道府県名のようにリストの選択肢が多くなるものは階層化したリストにすることも可能。
jQuery Mobile により階層毎のリストビューが自動的に作成される。
都道府県を地方別に折り畳んだメニューは以下のそのまま使えるサンプルコード。
<ul data-role="listview" data-inset="true"> <li data-role="list-divider">都道府県から選択</li> <li><a href="#">北海道</a></li> <li>東北地方 <ul data-inset="true"> <li><a href="#">青森県</a></li> <li><a href="#">岩手県</a></li> <li><a href="#">宮城県</a></li> <li><a href="#">秋田県</a></li> <li><a href="#">山形県</a></li> <li><a href="#">福島県</a></li> </ul> <li>関東地方 <ul data-inset="true"> <li><a href="#">茨城県</a></li> <li><a href="#">栃木県</a></li> <li><a href="#">群馬県</a></li> <li><a href="#">埼玉県</a></li> <li><a href="#">千葉県</a></li> <li><a href="#">東京都</a></li> <li><a href="#">神奈川県</a></li> </ul> <li>北陸地方 <ul data-inset="true"> <li><a href="#">新潟県</a></li> <li><a href="#">富山県</a></li> <li><a href="#">石川県</a></li> <li><a href="#">福井県</a></li> </ul> <li>中部地方 <ul data-inset="true"> <li><a href="#">山梨県</a></li> <li><a href="#">長野県</a></li> <li><a href="#">岐阜県</a></li> <li><a href="#">静岡県</a></li> <li><a href="#">愛知県</a></li> </ul> <li>近畿地方 <ul data-inset="true"> <li><a href="#">三重県</a></li> <li><a href="#">滋賀県</a></li> <li><a href="#">京都府</a></li> <li><a href="#">大阪府</a></li> <li><a href="#">兵庫県</a></li> <li><a href="#">奈良県</a></li> <li><a href="#">和歌山県</a></li> </ul> <li>中国・四国地方 <ul data-inset="true"> <li><a href="#">鳥取県</a></li> <li><a href="#">島根県</a></li> <li><a href="#">岡山県</a></li> <li><a href="#">広島県</a></li> <li><a href="#">山口県</a></li> <li><a href="#">徳島県</a></li> <li><a href="#">香川県</a></li> <li><a href="#">愛媛県</a></li> <li><a href="#">高知県</a></li> </ul> <li>九州地方 <ul data-inset="true"> <li><a href="#">福岡県</a></li> <li><a href="#">佐賀県</a></li> <li><a href="#">長崎県</a></li> <li><a href="#">熊本県</a></li> <li><a href="#">大分県</a></li> <li><a href="#">宮崎県</a></li> <li><a href="#">鹿児島県</a></li> </ul> <li><a href="#">沖縄県</a></li> </ul>
ただし、jQuery Mobileのデフォルトでは階層構造にしたリストにサブ項目が表示された時、Backボタン（戻るボタン）は表示されない。
そのままリストを辿るユーザーには問題無いが、前ページに戻りたいユーザーにはこのままでは不便。
そこでmobileinitで以下の設定をする。
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
場所はヘッダ内、jquery.mobileを読み込む前に入れることが必要。
これでBackボタン（戻るボタン）が自動的に付与される。