Question

我有一个搜索，所有可能接近帮助我的多页面的引用都是岁月和古老版本的jqm。

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

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

这篇文章指导我......

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

要启用动画页面过渡，所有指向外部页面的链接（例如products.html）都将通过Ajax加载。为了不引人注意地执行此操作，框架解析链接的href以形成Ajax请求（Hijax）并显示加载微调器。所有这些都是由jQuery Mobile自动完成的。

如果Ajax请求成功，则会添加新的页面内容   DOM，所有移动小部件都自动初始化，然后是新页面   通过页面转换动画到视图中。

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

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

相反，当我点击m1链接时，我正在刷新页面并且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

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

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

指向其他域或具有rel =“external”，data-ajax =“false”或目标属性的链接将不会加载Ajax。相反，这些链接将导致整页刷新而没有动画过渡。两个属性（rel =“external”和data-ajax =“false”）具有相同的效果，但是在链接到另一个站点或域时应使用不同的语义：rel =“external”，而data-ajax =“ false“对于简单地选择域中的页面通过Ajax加载非常有用。由于安全性限制，框架始终选择从Ajax行为中链接到外部域。

jQuery移动多页内部

1 个答案: