jQuery Mobile Column-Toggle Table columnBtnTheme选项

jQuery Mobile提供了一个实用的列切换（Column-Toggle）功能，允许用户在小屏幕设备上仅显示他们想查看的数据列。 columnBtnTheme选项是这个功能的一部分，允许用户设置列切换按钮的主题。

该功能通常用于响应式设计，以使表格适用于不同的屏幕宽度。下面是如何在jQuery Mobile中使用列切换表格并设置columnBtnTheme选项的详细说明：

第一步：设置HTML

创建包含表格的HTML页面。确保表格设置了data-role="table"，data-mode="columntoggle"。例如：

<div data-role="page">
  <div data-role="main" class="ui-content">
    <table data-role="table" data-mode="columntoggle" class="ui-responsive">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>地址</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>小明</td>
          <td>男</td>
          <td>20</td>
          <td>北京市</td>
        </tr>
        <tr>
          <td>小美</td>
          <td>女</td>
          <td>25</td>
          <td>上海市</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

第二步：设置Javascript

要设置 columnBtnTheme 选项，您需要在Javascript文件中添加如下代码：

$(document).on("mobileinit", function(){
  $.mobile.table.prototype.options.columnBtnTheme = "a";
});

上面的代码将所有表格的 column button 主题设置为 "a"。

示例说明

下面是两个示例，说明如何使用 columnBtnTheme 来改变列切换按钮的颜色。

示例一

在上面的Javascript代码中，将 'a' 改为 'b' 或 'c'，颜色会根据不同的主题而改变，如下：

$(document).on("mobileinit", function(){
  $.mobile.table.prototype.options.columnBtnTheme = "b";  // 设置column button主题为 b
});

$(document).on("mobileinit", function(){
  $.mobile.table.prototype.options.columnBtnTheme = "c";  // 设置column button主题为 c
});

示例二

您还可以使用CSS自定义样式，将您自己的列切换按钮主题应用于表格。HTML和Javascript代码与第一个示例相同，只需将以下CSS代码添加到页面中：

.ui-table-columntoggle-btn.ui-btn,
.ui-table-columntoggle-btn.ui-btn:hover {
  border-color: #9C27B0;
  color: #9C27B0;
  background-color: #ffffff;
}
.ui-table-columntoggle-btn.ui-btn-active {
  color: #ffffff;
  background-color: #9C27B0;
}

上面的代码中，border-color、color 和 background-color 属性分别设置了按钮的边框颜色、文本颜色和背景颜色。最后一个类是应用于当前激活按钮的。

使用这些CSS，您可以自定义列切换按钮的外观。