如何使用$.fn.tabs和underscorejs _.wrap函数重新排序jquery选项卡

Question

我试图在这个普鲁克尔中使用jquery UI $fn.tabs记录jQuery选项卡，我将在这个函数中重新排序这些选项卡，代码片段如下所示，我使用了底盘包函数来实现它。

$.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);

错误：

未知TypeError: Function.prototype.apply:参数列表有误typescript.js:12 extendTabsunderscore.js:697 (匿名函数)(索引)：37(匿名函数)

基本上，选项卡项的选择失败了，如何处理这个问题。谢谢

Answer 1

当我查看plnkr时，我看到了一些问题：

首先，在jquery的1.11.2版本中，初始化所选选项卡的选项略有不同。它应该是：

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

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

其次，我认为包装方法非常聪明，但是在使用包装时，第二个参数(包装函数)不使用与包装函数相同的参数，而是采用一个参数，即是包装函数。把包装换成这个..。

$.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);
});

...as很好地改变了上面提到的初始化行，我能够获得所需的功能。

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

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