2

新しいタブを追加するために、事前に定義された一連のオプションからドラッグしたい JQuery UI タブのセットがあります。

これが私がこれまでに持っているものです: http://jsfiddle.net/MrThursday/z8xZ3/

標準的な方法でタブを初期化していますが、単純なドラッグ アンド ドロップ操作でタブを並べ替え可能なプラグインのように動作させる簡単な方法があるかどうか疑問に思っています。

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

ご覧のとおり、タブ内のコンポーネントのオプションをドラッグできますが、この例のようにモーダルを介して新しいタブを追加せずに新しいタブを追加する方法がよくわかりません。http://jqueryui.com/tabs/#manipulation (これはあまりにも動的です。前に述べたように、ユーザーが所定のセットに対してドラッグ アンド ドロップできるようにしたいのです。)

どんな助けでも大歓迎です。

4

2 に答える 2

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 に答える