jQuery Mobile 重排表 classes.cellLabels 选项

在jQuery Mobile中，可以使用classes.cellLabels选项来控制表格中单元格的标签样式。具体来说，它允许你将单元格标签与单元格内容分开，并为它们分别应用样式。

用法

要使用classes.cellLabels选项，您需要在表格中添加data-role =“ table”属性，并使用data-enhanced =“ true”属性（这是默认值）。 然后，将以下代码段添加到您的HTML文件中：

<style>
    .ui-table-cell-label {
        /* Your label styles here */
    }
    .ui-table-cell-label-top {
        /* Your top label styles here */
    }
</style>

然后，将classes.cellLabels选项设置为true，如下所示：

<table data-role="table" data-enhanced="true" class="ui-responsive" data-mode="reflow" data-column-btn-theme="b" data-class="ui-table-cell-label">
    <thead>
        <tr class="ui-bar-b">
            <th data-priority="1">Rank</th>
            <th data-priority="persist">Movie Title</th>
            <th data-priority="2"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
            <th data-priority="3">Reviews</th>
            <th data-priority="4">Release Date</th>
            <th data-priority="5">Genre</th>
            <th data-priority="6">Director</th>
            <th data-priority="7">Actors</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td><a href="www.imdb.com/title/tt0050083/">12 Angry Men (1957)</a></td>
            <td>97%</td>
            <td>307</td>
            <td>April 1, 1957</td>
            <td>Drama</td>
            <td>Sidney Lumet</td>
            <td>Henry Fonda, Lee J. Cobb, Martin Balsam</td>
        </tr>
        <!-- more rows -->
    </tbody>
</table>

结论

classes.cellLabels选项允许您更好地控制表格中单元格标签的样式。这对于更好地可视化表格数据，特别是在移动设备上使用时非常有用。