Question

我正在尝试使用jQuery UI $ fn.tabs在此plunkr中记录jquery选项卡，我将在此函数中使用标签重新排序，代码片段如下，我使用了{{3功能来做它

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

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

1 个答案: