0

我在我的 Web 应用程序中使用 jQuery UI 选项卡，并且我正在通过 Ajax 动态加载每个选项卡的内容。这样，我可以将每个选项卡的内容保存在单独的 HTML 页面中：

<div id="tabs">
  <ul>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3.html">Tab 3</a></li>
    <li><a href="ajax/content4.html">Tab 4</a></li>
  </ul>
</div>

用于实例化选项卡的 JavaScript 在我的 index.js 中，而 HTML 在 index.html 中。

现在，我想在 index.js 中创建一个 addTabs() 函数，可以从任何选项卡内容页面（content1.html、content2.html 等）调用该函数。

我怎样才能做到这一点？我尝试在 index.js 中创建函数并简单地使用var id = addTab();. 但是，这不起作用，因为我收到一个错误：“ Uncaught ReferenceError: addTab is not defined ”。这是功能：

function addTab(tabTitle) {
   // Add tab code          
   return id;
}

我也尝试使用$.getScript()which 将调用该函数，但我无法访问函数var id外部返回的内容$.getScript()（我只能在函数内访问它）。

对于此事，我将不胜感激。

这是 index.js 文件：

$(document).ready(

function () {

    var tabs = $("#tabs").tabs();

    tabs.tabs('option', 'selected', 2);

    var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>";
    var tabCounter = 4;

    function addTab(tabTitle) {

        var label = tabTitle;
        var id = "tabs-" + tabCounter;
        var li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label));

        // 3 fixed tabs + 5 dynamic tabs
        if (tabCounter > 8) {
            $("#dialog").html(
                    'You have reached the maximum number of tabs allowed.').dialog(
                    "open");
            return -1;
        }

        $("#tabId").replaceWith(
                '<input type="hidden" name="tabId" id="tabId" value="' + id
                        + '" />');

        tabs.find(".ui-tabs-nav").append(li);
        tabs.append("<div id='" + id + "'></div>");

        tabs.tabs("refresh");
        tabCounter++;

        return id;
    }

});
4

1 回答 1

3

addTab 函数应该在 document.ready 之外，以便其他文件可以访问它

于 2013-01-16T17:43:47.900 回答