динамически добавить вкладку jquery из другого javascript

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);

Я хотел бы добавить новую вкладку в набор вкладок с именем #tabset из другого файла javascript, где я не мог использовать переменную tabset, поскольку она выходит за рамки.

Я пытаюсь использовать селектор jquery, чтобы найти tabset и вызвать функцию add, но вкладка не добавлена. Пожалуйста, проверьте заявление ниже:

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

Мой вопрос: как добавить еще одну вкладку в существующий набор из любого файла JavaScript? Как выбрать существующий набор вкладок и вызвать функцию добавления?

С наилучшими пожеланиями, Javanus

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>

Проверьте порядок файлов.Удачной кодировки!