在 jQuery Mobile 中,页面切换是通过超链接和特定的属性来实现的。以下是一些基本的页面切换的示例:

基本页面切换
<!-- 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&param2=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&param2=value2),而在第二个页面的脚本中,使用 JavaScript 提取并显示这些参数。

这只是 jQuery Mobile 页面切换的一个简单示例。你可以根据你的应用需求选择适当的页面切换方式和效果。


转载请注明出处:http://www.zyzy.cn/article/detail/9415/jQuery Mobile