动态JQuery手机导航

问题描述：

我遇到了jQuery问题以及如何动态处理网址。我想要做的是如果我有一个页面的链接，每个人都有一个ID来调用一个函数和ID。如何更改特定链接的网址，并将该网址用作书签。下面是我的代码动态JQuery手机导航

<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的参数将返回到服务器，并得到cardetails为ID = 1车。我的问题不是这样，但是当JSON数据已经返回时，我希望URL更改为cardetails＃1或类似的东西。因此，它可以识别用户的位置，浏览器可以将其添加到其历史记录中，并且如果用户将url标记为浏览器将能够找到显示相同数据的确切页面。

如果你仍然有问题，你想完整的URL导航功能，随意试试我的[插件]（https://github.com/CameronAskew/jquery.mobile.paramsHandler），我最近的创建jQM 1.4+ – 2014-04-04 22:03:08

答

本示例使用jQM changePage()通过Ajax页面请求发送数据。它只能在changePage()的'to'参数是一个URL时使用。检查jQM documentation了解更多信息。

说明测试的例子：

创建一个文件夹
创建的文件夹
创建的文件夹中有名称cars.html一个文件中的名称cars.js文件
在文件夹内创建名称为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。此外，该网址包含该ID，因此可以加入书签。在用户通过第一页导航到第二页的情况下，该id通过共享的JS变量传递到第二页。如果用户打开一个书签的页面，则ID从window.location.href提取。

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

说明测试的例子：

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

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

我希望这有助于。

am随时收到一个错误加载页面我点击cars.html中的链接为什么？ – 2013-02-27 13:21:51

好固定它，它工作得很好，现在感谢 – 2013-02-27 13:44:59

@KernElliott不客气 – 2013-02-27 18:43:04

动态JQuery手机导航

相关推荐