gpt4 book ai didi

jquery - 将单个页面分成多个文件

转载 作者:行者123 更新时间:2023-12-01 05:01:22 27 4
gpt4 key购买 nike

将页面内容分成多个文件的标准方法是什么,以便所有代码不在一个文件中。下面的代码片段包含在一个文件中,我不应该在单独的文件中引用每个 div id 页面吗?这有标准做法吗?

   <div id="page-1" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 1</h1>
</div>
<div data-role="content">
<p>Page 1 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid" class="ui-btn-active">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
</ul>
</div>
</div>
</div>

<div id="page-2" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 2</h1>
</div>
<div data-role="content">
<p>Page 2 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid" class="ui-btn-active">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li>
</ul>
</div>
</div>
</div>

<div id="page-3" data-role="page">
<div data-role="header">
<a href="#" data-icon="arrow-l" data-iconpos="left" data-rel="back" data-transition="slide" data-direction="reverse">Back</a>
<h1>Page 3</h1>
</div>
<div data-role="content">
<p>Page 3 content</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li>
<li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li>
<li><a href="#page-3" data-role="tab" data-icon="grid" class="ui-btn-active">Page 3</a></li>
</ul>
</div>
</div>
</div>​

最佳答案

获取每个 data-role="pagedata-role="dialog" 元素并将其粘贴到如下文件中:

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>My Page's Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/css/custom.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="/js/custom.js"></script>
</head>
<body>
[Your data-role="page" tag goes here]
</body>

</html>

你可能在想,真的吗?为什么每个文件中都重复这么多?。原因是,无论用户在何处进入您的网站,他们都将拥有加载任何页面所需的所有资源。这也很有帮助,因为 jQuery Mobile 使用 AJAX 将后续页面拉入 DOM,并且如果所有代码始终可用,则加载的每个页面都将正常运行。

请注意,在包含 jQuery Mobile 后,我添加了 /js/custom.js/css/custom.css 文件。这适用于整个网站的所有自定义 JS/CSS。

当您在页面之间链接时,请使用绝对 URL:

<a href="/hotel/room/special.html">My Link</a>

这样,您将始终指向正确的 URL,并且如果页面已加载到 DOM 中,这有助于确保使用 DOM 中已有的版本,而不是拉入另一个版本(这可能会破坏您的网站,如果DOM 中同时存在两个相同的页面)。

关于jquery - 将单个页面分成多个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9693173/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com