Question

我遇到了jquery mobile 1.4.2 webapp的问题。我有一个包含2个表的页面，它们都使用列切换按钮。我想将每个按钮移动到它们自己的占位符以允许水平滚动。

当有一个表时，我有这个工作，但我无法弄清楚如何为列切换按钮指定表ID，以移动正确表的按钮。

<div id="colUnit"></div>

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

有没有办法在jquery中指定表id，以便将正确的按钮移动到<div id="colUnit"></div>

它目前将两个按钮（每个表中的一个）放入<div id="colUnit"></div>

Answer 1

column-toggle 按钮是表的兄弟，并放在它们之前。使用.prev()移至其他位置。

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .appendTo("#colUnit");

更新

您还可以将它们附加到控制组并更改其文本。

<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>

将按钮移至 controlgroup 。

$("#mytable1, #mytable2")
    .prev(".ui-table-columntoggle-btn")
    .each(function () {
    var text = $.mobile.path.parseUrl($(this)
        .prop("href"))
        .hash.substring(1);
    $(this)
        .text(text.split("-")[0])
        .appendTo($("#colUnit")
        .controlgroup("container"));
});

$("#colUnit").controlgroup("refresh");

<强> Demo

Jquery Mobile Column在一个页面上有多个表时切换追加按钮

1 个答案:

更新