jQueryMobileのリストにリンクを貼る
jQuery Mobileを使用してリストをスマホ向けに表示するにはul要素にdata-role="listview"属性を追加します。
またそのリストにリンクを貼りたい場合はli要素内にaタグを入れ子にして実装します。

<div class="content" data-role="content">
  <ul data-role="listview">
    <li><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト1</a></li>
    <li><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト2</a></li>
    <li><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト3</a></li>
  </ul>
</div>


リストのDEMOです。

リンクを貼った時のアイコンを消す
リストの右側にアイコンが表示されますが、補足を表示することができます。
<p class="ui-li-aside">タグで囲んだ文字列が右上に補足として表示されます。

<div class="content" data-role="content">
  <ul data-role="listview">
    <li data-icon="false"><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト1</a></li>
    <li data-icon="false"><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト2</a></li>
    <li data-icon="false"><a href="http://www.confrage.com/" rel="external" target="_blank">サンプルリスト3</a></li>
  </ul>
</div>


リンクのアイコンを消した場合のDEMOです。

Back to top

Information