2

HTMLファイルのコンテンツを要素にロードする単純なコンテンツローダーがあります。それはうまくいっています。しかし、コンテンツをロードすると、メイン (index.html) ドキュメント準備機能で定義されているため、コンテンツ内の JS はロードされません。

質問：

ページの更新後にdivに残るコンテンツをロードする方法は?

注: JS ソリューションを優先します。

HTML:

index.html

<ul id="debug_menu">
    <li>content1</li>
    <li>content2</li>
    <li>content3</li>
</ul>

<div id="zone"></div>

JS:

/* Content loader */
jQuery(document).ready(function() {

    jQuery("#debug_menu li").click(function() {

        $content = jQuery(this).text();
        jQuery('#zone').load('content/' + $content + '.html');

    });

});

//Edit:

jQuery(".dial").knob();

content1.html:

<input value="90" class="dial">

注: http://anthonyterrien.com/knob/プラグインを使用

4

4 に答える 4

0

このプラグインを使用します: https://github.com/AlexChittock/JQuery-Session-Plugin

content 変数をsessionに格納します。

/* Content loader */
jQuery(document).ready(function() {

    jQuery("#debug_menu li").click(function() {

        $content = jQuery(this).text();
        jQuery.session.set('content', $content);
        jQuery('#zone').load('content/' + $content + '.html',
                function() {
                    initial_loader();
                }
        );

    });

    $s = jQuery.session.get('content');
    jQuery('#zone').load('content/' + $s + '.html',
            function() {
                initial_loader();
            }
    );

});

function initial_loader() {

    jQuery(".dial").knob();

}
于 2013-11-07T08:39:07.100 に答える
0

コンテンツをロードするときは、再ロードが発生しないように現在のページ URL を操作する必要もあります。これは基本的に、ハッシュ部分 ( #something) を変更することを意味します。ページの読み込み時に、現在のハッシュを確認して適切なコンテンツを読み込むだけです。

同じロジックで履歴 APIを使用することもできます。これにより、リロードせずに URL の任意の部分を操作するためのより多くのオプションが提供されます。ブラウザーのサポートはまだ最適ではありませんが、history.jsをラッパーとして使用できます。

利点: どちらの方法でも、リロードの問題を解決する以外に、コンテンツをリンク可能にし、ブラウザーの履歴を使用できるようにします (戻る、進むボタンが機能します)。

于 2013-11-07T07:40:25.537 に答える