jQuery 移动多页内部

Question

我进行了搜索，所有可能对我有帮助的多页引用都已有多年历史，而且是 jqm 的古老版本。

澄清一下：内部页面是托管在单独文件中的页面，但位于同一服务器上，与我的 index.html 位于同一目录中。外部页面将托管在不同 server/domain.

上的单独文件中

我的目标：我有一个应用程序，它作为单个文档多页看起来很胖。它有大约 20 页（带有 div-data-role=page）。我想将这些页面中的大部分放入内部页面（因此将单独的文件托管在与主 index.html 页面相同的位置）。

这篇文章指导我...

http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/

To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this is done automatically by jQuery Mobile.

If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.

所以...也许我误解了 jqm 中的内部页面 - 当我希望通过 ajax 加载我的页面时，我正在刷新页面。

我有两个页面，一个 index.html 页面有一个指向 m1.html 的锚点。我希望当我查看 index.html 并单击 m1.html 时，URL 会神奇地将我的 div-data-role=page 的内容拉入我的index.html DOM 给我一个 URL 类似于 index.html#m1

相反，当我单击 m1 link 时，我正在刷新页面并且 URL 更改为 m1.html

谁能澄清我的（错误）理解？

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width" />

    <link href="/css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/> 
    <link href="/css/jquery.mobile.icons.min.css" rel="stylesheet" type="text/css"/>

    <script src="/jq/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/jq/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>

    <title>My App</title>
</head>
<body>
<form>
    <div data-role="page" id="Menu">
        <div data-role="header" data-position="fixed" class="ui-title center">
            Main PAGE
        </div>
        <div id="MainContent">
            <ul data-role="listview">
                <li><a href="m1.html">m1</a></li>
            </ul>
        </div>
    </div>
</form>
</body>
</html>

m1.html

<div data-role="page" id="m1">
    <div data-role="header" data-position="fixed" class="ui-title center"> ONE
    </div>
    <div id="MainContent">
        <h1>one</h1>
        <ul data-role="listview">
            <li><a href="#Menu">Menu</a></li>
        </ul>
    </div>
</div>

Answer 1

删除 link 上的 rel="external"。这告诉 jQM 在加载页面时不要使用 AJAX。

在此处查看更多信息：http://demos.jquerymobile.com/1.4.5/navigation-linking-pages/

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.

jQuery 移动多页内部

jQuery mobile Multi Page Internal

jquery

jquery-mobile