动态jQuery Mobile的导航(Dynamic JQuery Mobile Navigatio

我有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>

因此，当您单击列表中的汽车上的叫为1的参数cardetails函数将返回到服务器，并得到cardetails为ID = 1的车。我的问题是不是但当JSON数据返回我想要的网址更改为cardetails＃1或类似的东西。因此，它可以识别用户所在，浏览器可以将其添加到它的历史，当用户用书签的网址，浏览器将能够找到，准确的页面显示相同的数据。

此示例使用JQM changePage()与一个Ajax页面请求发送数据。它可用于仅当“到”的参数changePage()是一个URL。检查JQM文件以获得更多信息。

说明对其进行测试实施例：

创建一个文件夹
创建一个文件夹内的名称cars.js文件
创建一个文件夹内的名称cars.html文件
创建一个文件夹内的名称车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>

添加以下代码汽车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变量传递到所述第二页面导航到第二页面的情况。如果用户打开一个书签的页面，则ID从window.location.href提取。

请注意，而不是传递href值在共享变量的，你可以通过ID或任何其他值，这将帮助您识别用户的选择。

说明对其进行测试实施例：

创建一个文件夹
创建一个文件夹内的名称cars.js文件
创建一个文件夹内的名称cars.html文件
创建一个文件夹内的名称车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>

添加以下代码车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>

我希望这有帮助。