jQuery UI选项卡示例-打开新选项卡=向每个选项卡添加唯一的脚本

Question

这是jQuery tabs脚本： http : //jqueryui.com/demos/tabs/#manipulation

        var $tabs = $( "#tabs").tabs({
            tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            add: function( event, ui ) {
                var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
                $( ui.panel ).append( "<p>" + tab_content + "</p>" );
            }
        });

// rest of script

所以，我需要什么？ 我需要脚本将在行var tab_content =上设置（以及其他内容）。 通常（在带有静态选项卡的脚本中）我自己的脚本会加载到页面底部（我创建了同一脚本的一些实例，例如（标识为script1和script2的founction（script1），founciton（script2）和2个div），毕竟是HTML代码，但是在这种情况下，我不知道该怎么做，我需要为每个选项卡编写唯一的脚本。

Answer 1

假设基础HTML看起来像这样：

<div id="tabs">
  <ul>
    <li><a name="my_id" href="/watman">Hey</a></li>
    <li><a name="test_it" href="/brown-chicken-brown-cow">Hey2</a></li>
  </ul>
</div>

这就是我在这种情况下使用的。 在全局脚本中，我定义了变量

var _SCRIPT = {};
var _CURRENT_TAB = '#ui-tabs-1';
var _CURRENT_TAB_NAME = 'my_id';

现在，对于每个选项卡，我都在主视图的顶部（在全局脚本之后）加载一个脚本。 我正在加载的脚本如下所示：

_SCRIPT['my_id'] = {
  tab: null,
  init: function() {
    this.tab = _CURRENT_TAB;
    // initialize script
  },
  // some other fields
}

其中my_id是将与我要加载的标签相关联的名称。 接下来，使用主要的JavaScript生成选项卡，如下所示：

$('#tabs').tabs({
  // some other options
  ajaxOptions: {
    cache: false,
    complete: function() {
      _SCRIPT[_CURRENT_TAB_NAME].init();
    },
  },
  select: function(event, ui) {
    _CURRENT_TAB = $(ui.tab).attr('href');
    _CURRENT_TAB_NAME = $(ui.tab).attr('name');
  },
  cache: true,
});

现在，每个位于选项卡内的html都说my_id可以通过jQuery这样访问（来自_SCRIPT['my_id'].init或_SCRIPT['my_id']内部的任何其他函数的_SCRIPT['my_id'] ）：

console.log( $('a', this.tab) );

请注意，这只会返回my_id标签内的元素。

旁注1：我不建议通过ajax插入脚本标签。 难以调试，您可以轻松地松开对“命名空间”的控制。 此外，每当您重新加载选项卡时，您都会遇到问题。

旁注2：注意在标签中的元素上定义id属性。 请记住，它们在整个HTML文档中必须是唯一的。