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

【问题标题】：How to reorder jquery UI tabs using $.fn.tabs and underscorejs _.wrap function如何使用 $.fn.tabs 和 underscorejs _.wrap 函数重新排序 jquery UI 选项卡
【发布时间】：2014-12-05 12:15:00
【问题描述】：

我正在尝试使用 jQuery UI $fn.tabs 在此 plunkr 中记录 jquery 选项卡，我将在此函数中声明要重新排序的选项卡，代码 sn-p 如下，我使用了 underscorejs 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);

错误：

Uncaught TypeError: Function.prototype.apply: Arguments list has wrong typescript.js:12 extendTabsunderscore.js:697 (anonymous function)(index):37 (anonymous function)

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

【问题讨论】：

标签： jquery jquery-ui tabs underscore.js

【解决方案1】：

我在查看 plnkr 时发现了几个问题：

首先，您在 jquery UI 1.11.2 版本中用于初始化选定选项卡的选项略有不同。应该是这样的：

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

如在此处的文档中所示：http://api.jqueryui.com/tabs/#option-active

然后第二个，我觉得wrap的方法很聪明，但是在使用wrap的时候，第二个参数（包装函数）并没有和被包装的函数接受相同的参数，而是接受一个是被包装的函数。通过将换行改为这个...

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

【讨论】：