jQuery Mobile 导航栏类选项(1)

📌 相关文章

📜 jQuery Mobile 导航栏类选项(1)

📅 最后修改于: 2023-12-03 15:32:09.152000 🧑 作者: Mango

jQuery Mobile 导航栏类选项

jQuery Mobile提供了多种导航栏类选项来帮助开发者构建高效、易用的移动应用程序。以下是常用的jQuery Mobile导航栏类选项：

页面导航

data-role="page"：用于定义一个页面
data-role="header"：用于定义页面顶部的导航栏
data-role="footer"：用于定义页面底部的导航栏
data-role="content"：用于定义页面的主要内容

可以将一个或多个页面放在一个HTML文件中，通过链接将它们连接起来。例如：

<!DOCTYPE html>

<html>

<head>
    <title>Page 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>

    <div data-role="content">
        <p>Hello World!</p>
        <a href="#page2">Go to Page 2</a>
    </div>

    <div data-role="footer">
        <h4>Footer Text</h4>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Page 2</h1>
    </div>

    <div data-role="content">
        <p>Welcome to Page 2!</p>
        <a href="#page1">Go to Page 1</a>
    </div>

    <div data-role="footer">
        <h4>Footer Text</h4>
    </div>
</div>

</body>

</html>

工具栏

data-role="navbar"：用于定义导航栏
data-icon="xxx"：定义图标，其中xxx代表图标名称。jQuery Mobile提供了多种图标，可以在官方文档中查阅。

工具栏可以在一个页面的顶部或底部，或者在每个页面的底部，常用于显示页面的相关操作或快速导航。例如：

<!DOCTYPE html>

<html>

<head>
    <title>Toolbar Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<div data-role="page">

    <div data-role="header">
        <h1>Toolbar Example</h1>
    </div>

    <div data-role="content">
        <p>Hello World!</p>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="home">Home</a></li>
                <li><a href="#" data-icon="grid">Apps</a></li>
                <li><a href="#" data-icon="star">Favorites</a></li>
                <li><a href="#" data-icon="gear">Settings</a></li>
            </ul>
        </div>
    </div>

</div>

</body>

</html>

分栏

data-role="panel"：用于定义一个分栏
data-display="push"：定义分栏显示方式，其中"push"表示将页面推出去，"reveal"表示分栏覆盖页面显示。

分栏可以用于显示菜单、选项等。例如：

<!DOCTYPE html>

<html>

<head>
    <title>Panel Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<div data-role="page">

    <div data-role="header">
        <h1>Panel Example</h1>
        <a href="#mypanel" data-icon="bars" data-iconpos="notext">Menu</a>
    </div>

    <div data-role="panel" id="mypanel" data-display="push">
        <ul data-role="listview" data-inset="true">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <div data-role="content">
        <p>Hello World!</p>
    </div>

</div>

</body>

</html>

以上就是jQuery Mobile导航栏类选项的基本介绍。在开发移动应用程序时，可以根据实际需求使用这些选项来创建高效、易用的用户界面。