jQuery Mobile 使用 URL 和 jquery 注入外部页面

我尝试在我的索引中注入一些其他页面，如"profile.html"或"contact.html"。对于某些页面，我想保留在内存中，用户可以返回，而其他一些页面则不需要。我想在主索引页<\div>中加载此页面。任何人都可以给出一些代码示例吗？类似的东西

你所描述的问题，正是jquery-mobile将"页面"加载到DOM中的默认方式。

让我们构建一个示例：

索引.html

标头包含对jquery，jquery-mobile等的所有引用。
div 与 data-role="page"> #index
具有数据角色"页面"> #page1的div

页2.html

div with data-role="page"> #page2

页3.html

标头包含所有对jQuery，jquery-mobile等的引用。
带有数据角色="页面"的div> #page3

当我从 x 链接到 y 时会发生什么？

打开索引.html
- 显示带有数据角色="页面"的第一个div
- 在这种情况下 #index
- DOM 内部的页面(#index、#page1(
从索引.html(#index(到 #page1 的链接
- 未加载任何内容
- 显示 #page1 页面
- DOM 内部的页面(#index、#page1(
从索引.html链接到第 2 页.html
- 来自 page2.html 中第一个带有 data-role="page" 的div 被加载到 DOM
- DOM 内部的页面(#index、#page1、#page2(
- 如果重新加载页面，您将看到一个未设置样式的 HTML 页面，因为 Page2.html 的头部没有 JS 或 CSS 文件
- 您可以链接到 #index，#page1 和 #page2 因为它们都在DOM内部
链接到 page3.html with data-ajax="false">
- 加载整个页面3.html。
- DOM 内部的页面 (#page3(
- A 仍然可以链接到第 2 页.html
- 您也可以链接到 index.html 的第一页，但不能链接到第二页。

你不能使用 ajax 加载多页.html文件的第一页。要加载多页，您始终必须在没有 ajax 的情况下加载.html文件(data-ajax="false"(

代码索引.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <!-- jQuery Mobile -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
  <!-- Index -->
  <div data-role="page" id="index" data-title="index.html">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>Index.html(#index)</h1>
    </div>
    <!-- /Header -->
    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="#" class="ui-btn ui-state-persist ui-btn-active">Index.html</a>
      <a href="#page1" class="ui-btn">Page 1 (intern)</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file)</a>
      <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->
  </div>
  <!-- /Index -->
  <!-- page1 -->
  <div data-role="page" id="page1" data-title="index.html#page1">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>Index.html#page1</h1>
    </div>
    <!-- /Header -->
    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="#index" class="ui-btn ">Index.html</a>
      <a href="#page1" class="ui-btn ui-state-persist ui-btn-active">Page 1 (intern)</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file)</a>
      <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->
  </div>
  <!-- /page1 -->
</body>
</html>

第 2 页的代码.html

<script>
  alert("hello from Page 2");
</script>

<!-- page2 -->
<div data-role="page" id="page2" data-title="page2.html">
  <!-- Header -->
  <div data-role="header" data-position="fixed">
    <h1>page2.html</h1>
  </div>
  <!-- /Header -->
  <!-- Content -->
  <div role="main" class="ui-content">
    <a href="#index" class="ui-btn ">Index.html</a>
    <a href="#page1" class="ui-btn">Page 1 (inside index.html)</a>
    <a href="page2.html" class="ui-btn ui-state-persist ui-btn-active">Page 2 (seperate .html file - ajax)</a>
    <a href="page3.html" data-ajax="false" class="ui-btn">Page 3 (seperate .html file - no-ajax)</a>
  </div>
  <!-- /Content -->
</div>
<!-- /page2 -->

第3页的代码.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <!-- jQuery Mobile -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
  <script>
    alert("hello from Page 3");
  </script>
</head>
<body>
  <!-- page2 -->
  <div data-role="page" id="page3" data-title="page3.html">
    <!-- Header -->
    <div data-role="header" data-position="fixed">
      <h1>page3.html</h1>
    </div>
    <!-- /Header -->
    <!-- Content -->
    <div role="main" class="ui-content">
      <a href="index.html" class="ui-btn ">Index.html (First page of a Multipage)</a>
      <a href="index.html#page1" class="ui-btn">Page 1 ((Second page of a Multipage))</a>
      <a href="page2.html" class="ui-btn">Page 2 (seperate .html file - ajax)</a>
      <a href="page2.html" data-ajax="false" class="ui-btn ui-state-persist ui-btn-active">Page 3 (seperate .html file - no-ajax)</a>
    </div>
    <!-- /Content -->
  </div>
  <!-- /page2 -->
</body>
</html>

索引.html

页2.html

页3.html

相关内容

最新更新

热门标签：