如何使用$对jquery UI选项卡重新排序。fn。制表符和下划线。包裹函数

Question

我试图使用jqueryui$fn在这个plunkr中记录jquery选项卡。制表符，我将在这个函数中声明要重新排序的制表符，下面是代码片段，我使用了下划线JS wrap函数来完成它

$.fn.tabs = _.wrap( $.fn.tabs, function extendTabs( org, arguments ) {

        var movObject =  {"name": "fragment-3", "nextSibling": "fragment-2"}; 
        console.log( "calling tabs", this, arguments );
        // perform reordering here if needed

        var listItemTobeMoved = $("li[xe-for-section="+movObject.nextSibling+"]");
        var listItemTo = $("li[xe-for-section="+movObject.name+"]");

        listItemTo.insertBefore(listItemTobeMoved);

        org.apply( this, arguments );
    });


<div id="tabs">
  <ul>
    <li xe-for-section="fragment-1"><a href="#fragment-1"><span>One</span></a></li>
    <li xe-for-section="fragment-2"><a href="#fragment-2"><span>Two</span></a></li>
    <li xe-for-section="fragment-3"><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1" xe-section ="fragment-1">
    Tab 1
  </div> 
  <div id="fragment-2" xe-section="fragment-2">
    Tab 2
  </div>
  <div id="fragment-3" xe-section="fragment-3">
    Tab 3
  </div>
</div>

选项卡的初始化可以很好地使用以下代码

$( "#tabs" ).tabs();

但当我传递额外的参数时，初始化失败并抛出如下错误：

$( "#tabs" ).tabs("select", 3);

错误：

未捕获类型错误：函数。原型应用：参数列表的typescript错误。js:12扩展为下划线。js:697（匿名函数）（索引）：37（匿名函数）

选项卡项的选择基本上失败，如何处理。非常感谢。

Answer 1

我看到了几个问题时，看看plnkr：

首先，在jQuery UI的1.11.2版本中，您传递的初始化所选选项卡的选项略有不同。它应该像：

$("#tabs").tabs({active: 2});

如这里的文档所示：http://api.jqueryui.com/tabs/#option-活跃的

第二，我认为wrap方法非常聪明，但是当使用wrap时，第二个参数（wrapper函数）不采用wrapped函数采用的参数，而是采用一个参数，即wrapped函数。通过将换行符更改为此。。。

$.fn.tabs = _.wrap($.fn.tabs, function expandTabs(func) {
    //console.log( "calling tabs", this, arguments );
    // perform reordering here if needed
    var movObject = { "name": "fragment-3", "nextSibling": "fragment-2" };
    console.log("calling tabs", this, arguments);
    // perform reordering here if needed

    var listItemTobeMoved = $("li[xe-for-section=" + movObject.nextSibling + "]");
    var listItemTo = $("li[xe-for-section=" + movObject.name + "]");

    listItemTo.insertBefore(listItemTobeMoved);
    console.log(arguments);
    func.apply(this, arguments);
});

...除了更改上面提到的初始化行之外，我还能够获得所需的功能。

此外，我还需要在索引文件的plnkr中添加对下划线的引用：

<script src="http://underscorejs.org/underscore-min.js"></script>