jQuery UI 如何：单击按钮并将整个可排序列表发送到另一个选项卡

发布于 2024-10-17 16:44:32 字数 277 浏览 3 评论 0原文

我正在使用 jquery 可排序列表，其中显示了选项卡 http://jqueryui.com/demos/sortable/#connect-lists- through-tabs

我需要它做的是按一个按钮，说“将所有内容发送到选项卡 2”，选项卡 1 的所有项目都会发送到选项卡 2。拜托，我真的需要这个。谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七月上 2024-10-24 16:44:32

这个想法是找到选项卡 1 中的所有列表项，并将它们附加到选项卡 2 列表中。

当按下 id 为“send_all”的按钮（考虑将其放置在第一个选项卡）时，将触发以下代码。它查找并将所有 li 项目从“sortable1”移动到“sortable2”，然后切换到第二个选项卡。

$('#send_all').bind({
    'click': function(){ 
        $('#sortable1 li').each(function(){
            $(this).appendTo('#sortable2');
        });
        $tabs.tabs('select', 1 );
    }
});

The idea is to find all list items at tab 1, and append them to tab 2 list.

The following code is triggered when a button with id 'send_all' (consider placing it at the first tab) is pushed. It finds and moves all li items from 'sortable1' to 'sortable2', and then switches to the second tab.

$('#send_all').bind({
    'click': function(){ 
        $('#sortable1 li').each(function(){
            $(this).appendTo('#sortable2');
        });
        $tabs.tabs('select', 1 );
    }
});

回复收藏 0 原文

终遇你 2024-10-24 16:44:32

考虑到该按钮是一个带有类transfer-items的链接，其href指向项目将传输到的选项卡的项目容器（在ui示例中#tabs-1 #tabs-2）：

$('a.transfer-items').click(function() {
  var itemsContainer = $('#tabs .ui-state-selected a').attr('href');
  var newList = $($(this).attr.href() + '.connectedSortable');
  $(itemsContainer + ' .connectedSortable li').each(function(index, element) {
    $(element).appendTo(newList);
  });
});

Considering the button is a link with class transfer-items whose href points to the items container of the tab the items will be transfer to (in the ui example #tabs-1 #tabs-2):

$('a.transfer-items').click(function() {
  var itemsContainer = $('#tabs .ui-state-selected a').attr('href');
  var newList = $($(this).attr.href() + '.connectedSortable');
  $(itemsContainer + ' .connectedSortable li').each(function(index, element) {
    $(element).appendTo(newList);
  });
});

回复收藏 0 原文

~没有更多了~