0

我正在使用 jquery mobile 构建一个移动网站。它将包含一些用于设置等的静态内部页面，但主要是加载/链接外部页面。

我有两个要求。

  • 我不希望内部页面影响 URL 栏或添加到 urlHistory（作为哈希，即 index.html/#settings）

  • 当用户加载一个新的外部页面时，我确实希望它显示在 URL 栏中并添加到 urlHistory。

这听起来很简单，但我似乎无法让它工作。

我在mobileinit中尝试了以下内容。这只是从不修改内部和外部链接的 URL。

$.mobile.changePage.defaults.changeHash = false;

非常感谢任何建议。

4

2 回答 2

0

好的，在测试了各种东西之后，我遇到了一个不涉及 mobileinit 的可能解决方案。对于我不想在 url 栏中反映的所有链接，我以编程方式设置：

$.mobile.changePage("#home", {changeHash: false, transition:'fade'});

这里的关键是将changeHash设置为false。这将转换到页面“主页”，但不会在 URL 栏中进行任何更改。

我不确定我是否可以在 href 标记中做同样的事情。

于 2013-02-08T18:26:22.057 回答
0

你很接近，mobilinit 是一个棘手的事件，它必须在加载 jQuery Mobile 之前触发，这里有一个例子：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>    
    <script>
        $(document).bind("mobileinit", function(){
            $.mobile.changePage.defaults.changeHash = false;
        });
    </script>       
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
        <script src="operations.js"></script>       
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="http://www.google.com" class="ui-btn-right" rel="external">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a" id="test-listview">
                <li><a href="page2.html?id=1">Link 1</a></li>
                <li><a href="page2.html?id=2">Link 2</a></li>
                <li><a href="page2.html?id=3">Link 3</a></li>
                <li><a href="page2.html?id=4">Link 4</a></li>
                <li><a href="page2.html?id=5">Link 5</a></li>
            </ul>    
        </div>

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

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

测试一下，你会发现它满足你的每一个要求。

于 2013-02-08T08:43:06.600 回答