Question

这是jQuery标签脚本：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 =。通常（在带有静态选项卡的脚本中）我自己的脚本正在页面底部加载（我创建了一些相同脚本的实例，如（founction（script1），founciton（script2）和2个带有id script1和script2的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']内的任何其他函数）：

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

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

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

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

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

1 个答案: