动态 JQuery 移动导航答案

【问题标题】：Dynamic JQuery Mobile Navigation动态 JQuery 移动导航
【发布时间】：2013-02-12 06:55:41
【问题描述】：

我遇到了关于 jQuery 以及如何动态处理 url 的问题。如果我有一个带有链接的页面并且每个页面都有一个用于调用函数的 id 和一个 id，那么我想做的是。如何更改特定链接的 url 并将该 url 用作书签。下面是我的代码

<div data-role="page" id="#listview">
<div data-role="header">
    <h1>List</h1>
</div>

<div data-role="content">   
<ul data-role="listview" id="carlist">
  <li><a href="#" onclick="cardetails('1')">Acura</a></li>
  <li><a href="#" onclick="cardetails('2')>Audi</a></li>
  <li><a href="#" onclick="cardetails('3')>BMW</a></li>
</ul>
</div>

<div data-role="footer">
    <h4>Page Footer</h4>
</div>

因此，当您单击列表中的汽车时，一个名为 cardetails 且参数为 1 的函数将返回服务器并获取 id=1 的汽车的 cardetails。我的问题不是那个，而是当 JSON 数据返回时，我希望 url 更改为 cardetails#1 或类似的东西。因此它可以识别用户的位置，浏览器可以将其添加到其历史记录中，如果用户将 url 加入书签，浏览器将能够找到显示相同数据的确切页面。

【问题讨论】：

如果您仍然遇到问题并且想要完整的 URL 导航功能，请随时尝试我最近为 jQM 1.4+ 创建的plug-in

标签： javascript jquery jquery-mobile history bookmarks

【解决方案1】：

此示例使用 jQM changePage() 通过 Ajax 页面请求发送数据。只有当changePage() 的'to' 参数是一个URL 时才可以使用它。查看jQM documentation 了解更多信息。

示例测试说明：

创建文件夹
在文件夹中创建一个名为 cars.js 的文件
在文件夹中创建一个名为 cars.html 的文件
在文件夹中创建一个名为 car-details.html 的文件
用您可以在下面找到的相应代码填写每个文件
打开作为第一页的cars.html并导航

在 car.js 文件中添加以下代码：

$(document).on( "pageinit", "#car-page", function( e ) {
    $('#car-list a').on('click', function(e) {
        e.preventDefault();
        $.mobile.changePage('car-details.html', {
            data: {
                id: this.id
            }
        });
    });
});

$(document).on( "pageinit", "#car-details-page", function( e ) {
    var passedId = (($(this).data("url").indexOf("?") > 0) ? $(this).data("url") : window.location.href ).replace( /.*id=/, "" );
    $("#details").html(["Selected id is: '", passedId, "'"].join(""));
});

在 cars.html 页面中添加以下代码。

<!doctype html>
<html lang="en">
   <head>
        <title>Cars example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car list</a></h1>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="car-list">
                    <li><a href="#" data-transition="flip" id="acura">Acura</a></li>
                    <li><a href="#" data-transition="flip" id="audi">Audi</a></li>
                    <li><a href="#" data-transition="flip" id="bmw">BMW</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

在 car-details.html 页面中添加以下代码。

<!doctype html>
<html lang="en">
   <head>
        <title>Car Example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-details-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car details</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

示例 2

使用共享 JS 对象的解决方案：

在第二页上，选定的 id 出现在 div 上。此外，URL 包含 id，因此可以添加书签。如果用户通过第一页导航到第二页，则 id 通过共享的 JS 变量传递到第二页。如果用户打开书签页面，则从 window.location.href 中提取 id。

请注意，您可以传递 id 或任何其他有助于识别用户选择的值，而不是传递共享变量中的 href 值。

示例测试说明：

创建文件夹
在文件夹中创建一个名为 cars.js 的文件
在文件夹中创建一个名为 cars.html 的文件
在文件夹中创建一个名为 car-details.html 的文件
用您可以在下面找到的相应代码填写每个文件
打开作为第一页的cars.html并导航

在 car.js 文件中添加以下代码：

var passDataObject = { selectedHref: null }

$(document).on( "pageinit", "#car-page", function( e ) {
    $(this).find('a').unbind('click').click(function() {
        passDataObject.selectedHref = this.href;
    });
});

$(document).on( "pageinit", "#car-details-page", function( e ) {
    var passedId = (passDataObject.selectedHref != null ? passDataObject.selectedHref : window.location.href).replace( /.*id=/, "" );
    $("#details").html(["Selected id is: '", passedId, "'"].join(""));
});

在 cars.html 页面中添加以下代码：

<!doctype html>
<html lang="en">
   <head>
        <title>Cars example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car list</a></h1>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="car-list">
                    <li><a href="./car-details.html?id=1" data-transition="flip" id="acura">Acura</a></li>
                    <li><a href="./car-details.html?id=2" data-transition="flip" id="audi">Audi</a></li>
                    <li><a href="./car-details.html?id=3" data-transition="flip" id="bmw">BMW</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

在 car-details.html 中添加以下代码：

<!doctype html>
<html lang="en">
   <head>
        <title>Car Example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script src="./cars.js"></script>
    </head>
    <body>
        <div id="car-details-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car details</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

示例 3

多页示例（地址栏 URL 不会根据汽车选择而改变）

<!doctype html>
<html lang="en">
   <head>
        <title>Cars example</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
        <script>
            var passDataObject = { selectedId: null }

            $(document).on( "pageinit", "#car-page", function( e ) {
                $(this).find('a').unbind('click').click(function(e) {
                    e.preventDefault();
                    passDataObject.selectedId = this.id;
                    $.mobile.changePage('#car-details-page', { transition: 'flip'} );
                });
            });

            $(document).on( "pagebeforeshow", "#car-details-page", function( e ) {
                $("#details").html(["Selected id is: '", passDataObject.selectedId, "'"].join(""));
            });
        </script>
    </head>
    <body>
        <div id="car-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car list</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <ul data-role="listview" id="car-list">
                    <li><a href="#" id="acura">Acura</a></li>
                    <li><a href="#" id="audi">Audi</a></li>
                    <li><a href="#" id="bmw">BMW</a></li>
                </ul>
            </div>
        </div>
        <div id="car-details-page" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">Car details</a></h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div id="details"></div>
            </div>
        </div>
    </body>
</html>

我希望这会有所帮助。

【讨论】：

每当我点击 cars.html 中的链接时都会收到错误加载页面，这是为什么？
哦，我有一个问题，是否可以将所有这些都放在一个文件中？我试过了，但它只适用于一个实例，其余的都保留第一个变量。
我添加了一个多页示例，但地址栏 URL 不包含 id 参数。
是的，链接可以，但是如果我将所有代码放在一个填充中，它只能工作一次，并且始终保持该值，实际上书签甚至都不起作用。我应该将 pageinit 更改为 pageshow 之类的其他内容吗？
在发布的多页示例中（检查我回答中的已编辑部分），选定的汽车 ID 已正确传递到第二页。但是，无法创建书签 URL。