我花了相当长的时间来寻找对我的问题的一个很好的答案,但没有一个很准确...所以就这样吧。我正在使用 jquery、javascript、html 和 jquery-mobile 来制作一本电子书。有一个目录,可以从每个内容页面上的滑动面板访问。目录是一组嵌套的 li 和 ul 元素,包含在每个页面上重复使用的 html。如果您熟悉 jquery mobile,我将在 <div data-role=panel>
中插入此列表层次结构部分,以在滑动面板中创建可折叠列表元素。现在,我这样做的方法是在每一页上放置完全相同的目录代码。显然,这是一种糟糕的方法。我需要找到一种方法将这个目录代码嵌入到需要它的每个页面中,这样我必须只在进行更改时更新一次目录,而不是在每个页面上更新它。现在我正在这样做......
<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>
中.所以,您可能会认为这会起作用……但让滑动面板正常工作的唯一方法是将标题部分复制到目录文件中。很抱歉这么冗长的解释......但这里有一些代码需要澄清。
<!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>
最佳答案
我不是 100% 确定,但我看到两个选项:
1) 您将所有必要的标签从原始文档复制到 TOC.html 文件
2) 尝试将 $.load 包装到 $(document).ready/$(window).load 中,看看会发生什么。我会把它放在常规评论中,但不幸的是我还不能评论(需要 50 个代表)。
关于javascript - 如何在页面加载时将 HTML 插入到 div 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18451825/