jQuery Mobile リファレンス

Tweet

data-mode=”columntoggle”はレスポンシブテーブルの設定を行う属性です。

data-role=”table”を指定した要素にdata-mode=”columntoggle”をあわせて指定することでテーブルをレスポンシブにすることができます。

data-mode=”columntoggle”では、data-priorityにより重要度の低い列が設定でき、重要度の低い列がデフォルでは非表示になります。非表示の列は右上に配置されるボタンにより表示が可能です。

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
  <thead>
    <tr>
      <th data-priority="2">Rank</th>
      <th>Movie Title</th>
      <th data-priority="3">Year</th>
      <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th data-priority="5">Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    (中略)
    <tr>
      <th>10</th>
      <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
      <td>2010</td>
      <td>84%</td>
      <td>78</td>
    </tr>
  </tbody>
</table>

sample

切り替えボタンのテーマはdata-column-btn-theme属性で、文言はdata-column-btn-text属性で変更できます。また、ポップアップボタンのテーマはdata-column-popup-theme属性で変更できます。

レスポンシブテーブルにはdata-mode=”columntoggle”以外にdata-mode=”reflow”も存在します。

data-mode="columntoggle"はjQuery Mobile 1.3.0で追加された属性です。

参考URL

jQuery Mobile Docs - Responsive Table

登録日 : 2013年02月18日 最終更新日 : 2016年12月19日

同じカテゴリー(レスポンブテーブル)のエントリー

• data-column-btn-text
• data-priority
• data-mode=”columntoggle”
• data-mode=”reflow”