2

外部ページ 1 を ui-tab (これは難しい部分ではありません) にロードしようとしていますが、次に、2 番目のレベルのページをページ 1 の DIV に自動的にロードしたいと考えています。

だから、私は 3 つの html ページを持っています: - index.html - external1.html - external1A.html

index.html jQuery は、external1.html を div 'tabcontent' にロードし、external1A.html を external1.html に定義された div 'content' にロードします (すべての jQuery はメインの index.html で定義する必要があります)。

external1.html で定義されているリンクをクリックすると、別の external1B.html が external1.html で定義されている DIV の「コンテンツ」に読み込まれます。tab-2 を読み込むと、external2.html などを読み込みます...

そこで、index.html を読み込んで最初のタブのコンテンツ (external1.html) を読み込み、次に external1A.html を external1.html で定義された DIV 'content' に読み込みます。

私のページは次のようになります。

index.html

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="js/myscripts.js" type="text/javascript"></script>
</head>
<body>
    <div id="tabs">
        <ul class="ui-tabs-content">
            <li><a href="external1.html" title="tabcontent"><span>external  1</span></a></li>
            <li><a href="external2.html" title="tabcontent"><span>external  2</span></a></li>
        </ul>
    </div>

    <div id="tabcontent"></div>

</div>
</body>
</html>

external1.html

<div class="menu">
    <a href="#" id="external1A">external 1A</a> | 
    <a href="#" id="external1B">external 1B</a> | 
    <a href="#" id="external1C">external 1C</a>
</div>

<div class="content"></div>

external1B.html

<form name="form1">
    <input type="text" value="" name="name="">
    <input type="submit" value="submit" name="Submit">
</form>

最後に、次の画像のように なります。Tab は external1 をロードし、external1A を external1 の DIV にロードします

通常、ページ レベルをフラットに保とうとしますが、この場合はこの方向にロードする必要があります。

jQuery がどのように見えるか分かりますか?

どうもありがとう！

4

1 に答える 1

1

わかりました、さらにドキュメントを読んだ後、それは明確になり、解決策を見つけました：

タブを自動的にロードする場合、タブがロードされた後に実行する必要があるロードに、より多くのイベントを入れることができます...

$('#tabs').tabs({
    load: function(event, ui) {
        $('.content').load('external1A.html');
    }
});

また、external1.html 内のリンクをクリックすると、別の html が external1.html で定義された div 'content' に読み込まれます。

$("#external1A").live('click', function() {
    $('.content').load('external1A.html');
});

それでおしまい。jQuery の初心者でも、これがこんなに簡単だとは思いませんでした。

于 2010-01-29T02:01:10.543 に答える