Question

对于那些知道如何在其核心运行jQuery mobile的人来说，我有一个可能没有问题的问题：）

我在某些网站上看到类似ajax的导航，但加载后网址完全改变了（我的意思是，最后没有哈希）。

例如：http://m.wengo.fr/accueil

=＆GT;点击任何链接，你会看到一个加载器，并在一个小动画后加载新页面;但URL没有哈希值，这是一个真正的新URL。

在第一次ajax-load后面页面是否真的完全重新加载？

我看不出这种魔法是如何在他们的框架上做的......

谢谢;）

- 达明

Answer 1

这是一个相当容易的实现。

页面更改应使用changePage函数（jQuery Mobile 1.4及更低版本）或pageContainer更改（jQuery Mobile 1.4及更高版本）以编程方式处理。

解决方案：

$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });

您需要 changeHash 设置为 false 。

实施例

<强>的index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
        <script>
        $(document).on('pagebeforeshow', '#index', function(){ 
            $(document).on('click', '#open-page', function(){ 
                alert('sdfsd');
                $.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
            });
        });
        </script>
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a class="ui-btn-right" id="open-page">Next</a>
            </div>

            <div data-role="content">

            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div>  
    </body>
</html>

<强> second.html

<div data-role="page" id="second" data-theme="a" >
    <div data-role="header">
        <h3>
            Second Page
        </h3>
        <a href="#index" class="ui-btn-left">Back</a>
    </div>

    <div data-role="content">

    </div>

    <div data-role="footer" data-position="fixed">

    </div>
</div>

更新

您需要的信息与jQuery Mobile无关。

我向您展示了jQuery Mobile实际可以做的一个解决方案。但是此解决方案将永久显示原始HTML文件名。这是因为初始HTML页面被加载到DOM中，并且每个其他页面都被加载到其中。因此，jQuery Mobile可以完全控制链接名称。

但这不是页面提到的内容。它正在使用某种重写引擎。默认情况下，重写引擎将URL映射到文件系统路径。但是，它也可以用于将一个URL重定向到另一个URL（在此处完成），或者用于调用内部代理提取。他们可能正在使用启用了mod_rewrite模块的Apache Web服务器。

如何在jQuery mobile上运行ajax导航

1 个答案:

解决方案：

实施例

更新