jQuery Mobile リファレンス

Tweet

data-priorityはcolumntoggleテーブルに表示する列を指定できる属性です。

data-role=”table”を指定した要素にdata-mode=”columntoggle”をあわせて指定したレスポンシブテーブルの列の重要度を指定します。

columntoggleでは2つのポイントで表示する列を決定します。ひとつはブラウザのウィンドウ幅、もうひとつはユーザーがメニューで表示すると指定した列です。

ブラウザのウィンドウ幅から表示する列が決定される場合には、data-priorityで指定した重要度の低いものから順に非表示になります。

data-priorityには1〜6の数値が指定でき1がもっとも高く6がもっとも低い重要度です。

<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-priority属性はjQuery Mobile 1.3.0で追加された属性です。

参考URL

Table: Column Toggle - jQuery Mobile Demos

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

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

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