从另一个 javascript 动态添加 jquery 选项卡

Question

我正在使用 jQuery 创建选项卡。我将 javascript 代码放在一个单独的文件中。 tabset 变量用于引用选项卡。 Javascript 具有以下内容：

$(document).ready(function() {
//add a tabset
var tabset = $("#tabset").tabs({
    /*add close button*/
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
    /*cache tabs*/
    cache: true,
    /*immediately select a just added tab*/
    add: function(event, ui) {
        //alert(ui.panel.id);
        tabset.tabs('select', '#' + ui.panel.id);
    }
});

我可以使用下面的语句添加另一个选项卡。如果我从此 javascript 调用此语句，效果很好。

tabset.tabs('add', url, nameToCheck);

我想从另一个 javascript 文件向名为 #tabset 的选项卡添加一个新选项卡，在该文件中我无法使用 tabset 变量，因为它超出了范围。

我尝试使用 jquery 选择器查找选项卡集并调用添加函数，但未添加选项卡。请检查下面的声明：

$('#tabset').tabs('add', 'url', 'newTab');

我的问题是：如何从任何 javascript 文件向现有选项卡集添加另一个选项卡？如何选择现有选项卡集并调用添加函数？

此致， 爪哇努斯

Answer 1

尝试这样做：

$(document).ready(function() {
   $("#tabset").tabs({
    tabTemplate: yourtabtemplate,
    cache: true,
    add: function(event, ui) {
        // Change 'tabset' to 'this'
        this.tabs('select', '#' + ui.panel.id);
    }
});

在另一个 JS 文件中：

var tabset = $('#tabset');
tabset.tabs('add', url, nameToCheck);

或者简单地：

$('#tabset').tabs('add', 'url', 'newTab');

编辑：问题是您可能在第二个文件之前添加第一个文件。因此， $('#tabset') 没有 JQueryUI 的选项卡功能，并且 $('#tabset').tabs('add') 不起作用。

像这样切换顺序：

file1.js：

$(document).ready(function() {
   $("#tabset").tabs({
    tabTemplate: yourtabtemplate,
    cache: true,
    add: function(event, ui) {
        // Change 'tabset' to 'this'
        this.tabs('select', '#' + ui.panel.id);
    }
});

file2.js：

$('#tabset').tabs('add', 'url', 'newTab');

您索引视图：

<script src="scripts/file1.js"></script>
<script src="scripts/file2.js"></script>

检查文件顺序。快乐编码！