Javascript 动态JQuery移动导航
我对jQuery以及如何动态处理URL有疑问。我想做的是,如果我有一个带有链接的页面,每个页面都有一个id来调用一个函数和一个id。我如何更改特定链接的url,并将该url用作书签。下面是我的代码Javascript 动态JQuery移动导航,javascript,jquery,jquery-mobile,history,bookmarks,Javascript,Jquery,Jquery Mobile,History,Bookmarks,我对jQuery以及如何动态处理URL有疑问。我想做的是,如果我有一个带有链接的页面,每个页面都有一个id来调用一个函数和一个id。我如何更改特定链接的url,并将该url用作书签。下面是我的代码 <div data-role="page" id="#listview"> <div data-role="header"> <h1>List</h1> </div> <div data-role="content">
<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>
列表
页脚
因此,当您单击列表中的一辆汽车时,一个名为CardDetails的函数(参数为1)将返回到服务器并获取id为1的汽车的CardDetails。我的问题不是这个,而是当JSON数据返回时,我希望url更改为cardetails#1或类似的内容。因此,它可以识别用户所在的位置,浏览器可以将其添加到历史记录中,如果用户将url添加到书签中,浏览器将能够找到显示相同数据的确切页面 本例使用jQM
changePage()
通过Ajax页面请求发送数据。只有当changePage()
的'to'参数是URL时,才能使用该参数。有关更多信息,请查看
测试示例的说明:
- 创建文件夹
- 在文件夹中创建一个名为cars.js的文件
- 在文件夹中创建一个名为cars.html的文件
- 在文件夹中创建一个名为car-details.html的文件
- 用您可以在下面找到的相应代码填充每个文件
- 打开cars.html(第一页)并导航
$(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(""));
});
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="#" 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>
<!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>
在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>
汽车示例
返回
我希望这能有所帮助。每当我点击cars.html中的链接时,我都会收到一个错误加载页面。为什么?哦,我有一个问题,是否可以将所有这些内容放在一个文件中?我试过了,但它只在一个实例中起作用,其余的都保留第一个变量。我添加了一个多页示例,但地址栏URL不包含id参数。是的,链接包含id参数,但如果我将所有代码放在一个填充中,它只起作用一次,并始终保留该值。事实上,书签甚至不起作用。我是否应该将pageinit更改为pageshow之类的其他内容?在发布的多页示例中(检查我答案中编辑的部分),所选的汽车id将正确传递到第二页。但是,无法创建带书签的URL。如果您仍然存在问题,并且想要完整的URL导航功能,请随时尝试我最近为jQM 1.4创建的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>