动态JQuery移动导航 [英] Dynamic JQuery Mobile Navigation
问题描述
我遇到了jQuery的问题以及如何动态处理网址。如果我有一个带链接的页面，每个人都有一个id来调用一个函数和一个id，我想做的就是这个。如何更改特定链接的URL并将该URL用作书签。以下是我的代码
I am having an issue with jQuery and how to dynamically process urls. What I would like to do is this if I have a page with links and each one has an id to call a function and an id. How can I change the url for the specific link and have that url work as a bookmark. Below is my code
<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添加书签，则浏览器将能够找到具有相同数据的确切页面。
So when you click on a car in the list a function called cardetails with a parameter of 1 will go back to the server and get cardetails for the car with id=1. My issue is not that but when the JSON data has returned I want the url to change to cardetails#1 or something like that. So it can identify where the user is, the browser can add it to its history and if the user bookmarks the url the browser will be able to find that exact page with the same data displayed.
推荐答案
此示例使用jQM changePage（）来发送数据一个Ajax页面请求。仅当 changePage（）的'to'参数是URL时，才能使用它。查看 jQM文档了解更多信息。
This example uses the jQM changePage() to send data with an Ajax page request. It can be used only when the 'to' argument of changePage() is a URL. Check the jQM documentation for more info.
测试示例的说明：
- 创建文件夹
- 创建名为cars.js的文件在文件夹中
- 在文件夹中创建名为cars.html的文件
- 在文件夹中创建名为car-details.html的文件
- 使用您在下面找到的相应代码填写每个文件
- 打开cars.html，这是第一页并导航
- Create a folder
- Create a file with name cars.js inside the folder
- Create a file with name cars.html inside the folder
- Create a file with name car-details.html inside the folder
- Fill each file with the corresponding code that you can find below
- Open the cars.html which is the first page and navigate
在car.js文件中添加以下代码：
Add the following code inside the car.js file:
$(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页面中添加以下代码。
Add the following code inside the cars.html page.
<!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页面中添加以下代码。
Add the following code inside the car-details.html page.
<!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对象的解决方案：
Solution using a shared JS object:
在第二页上，所选ID出现在div上。此外，URL包含id，因此可以为其添加书签。在用户通过第一页导航到第二页的情况下，然后通过共享的JS变量将id传递到第二页。如果用户打开带书签的页面，则从window.location.href中提取id。
On the second page the selected id appears on a div. Moreover the URL contains the id so it can be bookmarked. In the case where the user navigates to the second page through the first page then the id is passed to the second page through a shared JS variable. In case the user opens a bookmarked page then the id is extracted from the window.location.href.
请注意，不是在共享变量中传递href值而是可以传递id或任何其他值，以帮助您识别用户的选择。
Please note that instead of passing the href value in the shared variable you could pass the id or any other value that will help you identify the user's selection.
测试示例的说明：
- 创建文件夹
- 在文件夹中创建名为cars.js的文件
- 创建一个文件在文件夹中命名cars.html
- 在文件夹中创建名为car-details.html的文件
- 使用相应的代码填写每个文件你可以在下面找到
- 打开cars.html这是第一页并导航
- Create a folder
- Create a file with name cars.js inside the folder
- Create a file with name cars.html inside the folder
- Create a file with name car-details.html inside the folder
- Fill each file with the corresponding code that you can find below
- Open the cars.html which is the first page and navigate
在car.js文件中添加以下代码：
Add the following code inside the car.js file:
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页面中添加以下代码：
Add the following code inside the cars.html page:
<!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中添加以下代码：
Add the following code inside the 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
多页示例（地址栏网址未根据汽车选择进行更改）
Multipage Example (The address bar URL is not changed based on the car selection)
<!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>
我希望这有帮助。
这篇关于动态JQuery移动导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
