基本页面切换
<!-- Home Page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<p>Welcome to the Home Page!</p>
<a href="#second-page" data-transition="slide">Go to Second Page</a>
</div>
</div>
<!-- Second Page -->
<div data-role="page" id="second-page">
<div data-role="header">
<h1>Second Page</h1>
</div>
<div data-role="content">
<p>This is the Second Page.</p>
<a href="#home" data-transition="slide" data-direction="reverse">Go back to Home Page</a>
</div>
</div>
在这个例子中,<a> 元素的 href 属性使用目标页面的 ID(例如 #second-page)来指定要跳转的页面。data-transition 属性指定页面切换的过渡效果,这里是 "slide",表示使用滑动效果。data-direction 属性用于指定页面切换的方向,可以是 "reverse" 表示反向。
切换页面并传递参数
有时你需要在页面之间传递参数。你可以通过在链接中添加查询参数的方式实现:
<!-- Home Page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<p>Welcome to the Home Page!</p>
<a href="#second-page?param1=value1¶m2=value2" data-transition="slide">Go to Second Page</a>
</div>
</div>
<!-- Second Page -->
<div data-role="page" id="second-page">
<div data-role="header">
<h1>Second Page</h1>
</div>
<div data-role="content">
<p>This is the Second Page.</p>
<p>Received parameters:
<span id="param1"></span>,
<span id="param2"></span>
</p>
<a href="#home" data-transition="slide" data-direction="reverse">Go back to Home Page</a>
</div>
<script>
// Extract parameters from the URL
var params = new URLSearchParams(window.location.search);
// Display parameters in the page
document.getElementById('param1').innerHTML = params.get('param1');
document.getElementById('param2').innerHTML = params.get('param2');
</script>
</div>
在这个例子中,链接包含了查询参数(例如 ?param1=value1¶m2=value2),而在第二个页面的脚本中,使用 JavaScript 提取并显示这些参数。
这只是 jQuery Mobile 页面切换的一个简单示例。你可以根据你的应用需求选择适当的页面切换方式和效果。
转载请注明出处:http://www.zyzy.cn/article/detail/9415/jQuery Mobile