jQuery Mobile Column-Toggle Table columnBtnTheme 选项介绍

jQuery Mobile Column-Toggle Table是一个基于jQuery Mobile的插件，可以在移动设备上构建多列表格，并通过切换列来适应不同的屏幕大小。columnBtnTheme选项可以设置列切换按钮的主题。

语法

$(selector).table("option", "columnBtnTheme", value);

参数说明：

• selector：选择器，表示需要设置columnBtnTheme选项的表格。
• value：字符串，表示需要设置的主题名称。

示例

<!-- HTML代码 -->
<div data-role="page">
  <div data-role="content">
    <table data-role="table" data-mode="columntoggle" class="ui-responsive">
      <thead>
        <tr>
          <th data-priority="1">姓名</th>
          <th data-priority="2">年龄</th>
          <th data-priority="3">性别</th>
          <th data-priority="4">地址</th>
          <th data-priority="4">邮箱</th>
          <th data-priority="4">电话</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>20</td>
          <td>男</td>
          <td>北京市朝阳区</td>
          <td>zhangsan@qq.com</td>
          <td>13812345678</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>25</td>
          <td>女</td>
          <td>上海市浦东新区</td>
          <td>lisi@qq.com</td>
          <td>13987654321</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>30</td>
          <td>男</td>
          <td>广州市天河区</td>
          <td>wangwu@qq.com</td>
          <td>13645671234</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

// JS代码
$(document).on("pagecreate", function() {
  $("table").table("option", "columnBtnTheme", "b");
});

在上述示例中，选项columnBtnTheme被设置为"b"，表示列切换按钮的主题为jQuery Mobile中提供的"b"主题。可以通过修改value的值来改变按钮的主题。

参考链接

• jQuery Mobile官方文档