javascript - ページの読み込み時に HTML を div に挿入する方法は?

Question

私は私の質問に対する良い答えを求めてSOを検索するのにかなりの時間を費やしましたが、まったく的を射たものはありません...だからここに行きます. 私は、jquery、javascript、html、および jquery-mobile を使用して、ある種の電子書籍を作成しています。各コンテンツページのスライドパネルからアクセスできる目次があります。入れ子になった li 要素と ul 要素のセットである目次には、すべてのページで繰り返し使用される html が含まれています。jquery モバイルに精通している場合は、このリスト階層を<div data-role=panel>セクションで、スライドパネル内に折りたたみ可能なリスト要素を作成します。現在、私がこれを行っている方法は、まったく同じ目次コードをすべてのページに配置することです。明らかに、これはこれを行うためのひどい方法です。この目次コードを必要とするすべてのページに埋め込む方法を見つける必要があります。これにより、すべてのページで目次を更新するのではなく、変更が加えられたときに 1 回だけ目次を更新するだけで済みます。今はこんな感じでやってます…

<div data-role="panel" id="TOC" data-icon="grid" data-display="overlay">
                <script>
                    $('#TOC').load('example.TOC.html')
                </script> 

            </div> <!--This is the end of the slide panel section-->

HTML はロードされていますが、jquery mobile、jquery、または作成した外部 JavaScript ファイルのいずれにもアクセスできません。その理由を理解しようとしています。のすべてのリソースをロードして<head>おり、目次はにロードされてい<body>ます。これでうまくいくと思われるかもしれませんが、スライドパネルを適切に動作させる唯一の方法は、head セクションを目次ファイルにコピーすることです。その長い説明で申し訳ありません...しかし、明確にするためのコードがいくつかあります。

<!doctype html> <html>
<head>
    <title class="link-1-1-1-2" <!--id="link-1-1-1-2"--> >Part 2</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"></link>

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script src="../Support/js/jStorage.js"></script>
        <script src="../Support/js/bookmark2.js"></script>
        <script src="../Support/js/linknavigation.js"></script>


</head>
<body>
    <div data-role="page">



        <!--begin header-->
        <div data-role="header" data-position="fixed">
            <a data-icon="grid" href="#TOC">Table of Contents</a>
            <h1>Part 2</h1>
            <button data-icon="check" id="bookmarkPage"> Bookmark </button>
        </div><!-- /header -->

        <!--begin content-->
        <div data-role="content">
            <p> The content of the page would go here </p>
        </div><!-- /content -->


        <!--begin footer-->
        <div data-role="footer" data-id="navigation-bottom" data-position="fixed" class="ui-bar">
            <div data-role="controlgroup" data-type="horizontal">               
                <button data-icon="back" data-theme="a" id="previous"> Previous</button>    
                <button data-icon="forward" data-theme="a" id="next"> Next</button>
            </div>
        </div><!--footer-->


        <!--Create a slide panel with the table of contents-->
        <div data-role="panel" id="TOC" data-icon="grid" data-display="overlay">
            <script>
                $('#TOC').load('example.TOC.html')
            </script> 

        </div> <!--This is the end of the slide panel section-->

    </div><!-- /page -->

</body>
 </html>

更新: example.toc.html のコードを追加して、進行中のすべてを確認できるようにします。

 <!--These first lines are required to get the table of contents working, but cause other 
issues-->  
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <script src="../Support/js/jStorage.js"></script>
    <script src="../Support/js/bookmark2.js"></script>
    <script src="../Support/js/linknavigation.js"></script>-->


    <!--create a navbar for the top-->
    <div data-role="controlgroup" data-type="horizontal" data-mini="true"> 
        <button data-icon="plus" data-theme="a" id="openAll">Expand All</button>
        <button data-icon="minus" data-theme="a"id="closeAll">Collapse All</button>
    </div><!-- /navbar -->



    <!--Give the panel some control buttons from out linknavigation.js file-->
    <!--Give the panel some control buttons from out linknavigation.js file-->
    <div data-role="controlgroup" >
        <button data-icon="plus"    data-mini="true"  data-theme="a" id="openSome"> Expand Some</button>    
        <button data-icon="minus"   data-mini="true"  data-theme="a" id="closeSome"> Collapse Some</button>
        <button data-icon="arrow-d" data-mini="true"  data-theme="a" id="expandBookmarks">View Bookmarks</button>
        <button data-icon="delete"  data-mini="true"  data-theme="a" id="clearBookmarks"> Clear Bookmarks </button>
    </div>


<!--Create list structure....this is not an ideal solution...need a way to reference this structure externally-->
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 1</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <!--<li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>-->
            <a data-role="button" data-theme="e" data-mini="true" id="link-1-1-1-1" rel="external" href='example.chapter1-unit1-section1-part1.html'>Part 1</a>
            <a data-role="button" data-theme="e" data-mini="true" id="link-1-1-1-2" rel="external" href='example.chapter1-unit1-section1-part2.html'>Part 2</a>
            <li data-role="collapsible" data-theme="e" data-mini="false" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="false" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>
</div>

<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 2</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>
</div> 
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 3</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>
</div> 
<div data-role="collapsible" data-theme="b" class="expandable depth-1">
    <h3>Chapter 4</h3>
    <ul data-role="collapsible" data-mini="true" class="expandable depth-2">
        <h3> Unit 1 </h3>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 1</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
        <ul data-role="collapsible" data-mini="true" class="expandable depth-3">
            <h3>Section 2</h3>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 1</h3>I'm Part 1</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 2</h3>I'm Part 2</li>
            <li data-role="collapsible" data-theme="e" data-mini="true" class="expandable depth-4"><h3>Part 3</h3>I'm Part 3</li>
        </ul>
    </ul>

score 0 · Accepted Answer

これをすべてサーバー側で行うことに本当に設定されている場合は、ロードコードを $(function(){ ...code here... }); でラップできますか? ?

それとロードの完全なコールバック関数を組み合わせて使用できるようです。フローは次のようになります。

.ready() を使用してページがロードされるのを待ちます
ファイアオフロード（）
complete() コールバックで、データをページに追加し、必要な jquery モバイルデータ属性をページに適用します。

このための plunkr を作成すると、実用的な例を作成できます。

javascript - ページの読み込み時に HTML を div に挿入する方法は?

2 に答える 2

Related

Reference