0

WebアプリケーションでjQueryUIタブを使用しており、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 notdefined」というエラーが発生したため、これは機能しませんでした。関数は次のとおりです。

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 に答える