2

I have a set of JQuery UI tabs into which I would like drag from predetermined set of options to add new tabs.

Here is what I have so far: http://jsfiddle.net/MrThursday/z8xZ3/

I initialise the tabs in the standard way and am wondering if there is an easy way to make the tabs behave like the sortable plugin for simple drag and drop operations?

           var tabs = $("#tabs").tabs();
           tabs.find(".ui-tabs-nav").sortable({
              axis: "x",
              stop: function () {
                 tabs.tabs("refresh");
              }
           });

As you can see I am able to drag options for the components in the tabs, but I am not quite sure how to add new tabs without having to add a new tab via a modal as in this example; http://jqueryui.com/tabs/#manipulation (Which is too dynamic. I want the user to simply be able to drag and drop for a predetermined set as said before.)

Any help would be appreciated.

4

2 回答 2

2

Interesting case.

You can set your tabs as droppable to receive the dragged elements; like:

$('#tabs').droppable({
    activeClass: "ui-state-highlight",
    drop: function (event, ui) {
        var num_tabs = $("div#tabs ul li").length + 1;

        $("div#tabs ul").append(
            "<li><a href='#tab" + num_tabs + "'>" + ui.draggable.text() + "</a></li>");
        $("div#tabs").append(
            "<div id='tab" + num_tabs + "'>#" + num_tabs + "</div>");
        $("div#tabs").tabs("refresh");

        $(ui.draggable).remove()
    }
});

and on the drop event add the new tab from the dragged element and remove that element from the list.

Demo: jsFiddle

于 2013-08-12T14:11:37.723 回答
0

在你刚才提到的JQueryUI 文档中，你可以查看源代码。在这里您可以找到用于插入标签的方法。当用户验证模态表单时调用此方法。

// actual addTab function: adds new tab using the input from the form above
function addTab() {
  var label = tabTitle.val() || "Tab " + tabCounter,
    id = "tabs-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
    tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

  tabs.find( ".ui-tabs-nav" ).append( li );
  tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
  tabs.tabs( "refresh" );
  tabCounter++;
}

当然，您可以替换变量 tabContent 和 tabTitle。

于 2013-08-12T13:58:39.317 回答