Question

我在jquery mobile中使用列切换按钮显示响应式设计中的数据表。但是，我还添加了<div style="overflow:auto">，以便用户能够水平滚动，如果他们选择能够为屏幕查看太多项目（有些人可能会认为这会破坏目的，但这是显示报告，以便用户可能需要此功能）。

无论如何，我的问题是，当用户沿着表格水平滚动时，data-column-btn会随着表格的其余部分一起移动。有没有办法，我可以＆＃34;坚持＆＃34;右上角的按钮，即使表格的其余部分滚动，按钮仍保持在同一位置？

JS小提琴：http://jsfiddle.net/LuA8m/

谢谢大家：）

Answer 1

您可以使用JavaScript将按钮移动到另一个DIV中。首先在表包装器上方创建一个空占位符DIV，并为表包装器DIV提供100％的宽度：

<div id="colTogglePlaceholder"></div>
<div style="overflow:auto; width: 100%; ">  
    <table  data-role='table' data-theme='a' id='customerListTable' data-mode='columntoggle' class="ui-body-b ui-shadow table-stripe ui-responsive" data-column-btn-mini="true" data-column-btn-text="Columns to Display" data-column-btn-corners="false" data-column-btn-theme="c" data-column-popup-theme="a" >
        <thead>
            <tr>
               etc.

然后使用jQuery appendTo（）方法将按钮移动到占位符DIV中：

$(document).on("pageinit", "#customerList", function () {
    $(".ui-table-columntoggle-btn").appendTo("#colTogglePlaceholder");
});

以下是您更新的 FIDDLE

注意：这也适用于jQM 1.4

允许水平滚动时，jquery移动问题与data-column-btn定位

1 个答案: