在 jQuery Mobile 中，面板（Panel）是一种用于创建侧边栏导航或额外信息显示的 UI 元素。面板通常可以从页面的左侧或右侧滑出，提供一种在移动设备上展示额外内容的方式。以下是一些创建和使用 jQuery Mobile 面板的基本示例：

左侧面板：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile Panel</title>
    <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-3.6.4.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<!-- Home Page with Left Panel -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home Page</h1>
        <a href="#leftPanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b">Open Panel</a>
    </div>

    <div data-role="content">
        <p>This is the content of the page.</p>
    </div>

    <div data-role="footer">
        <h4>&copy; 2023 My App</h4>
    </div>

    <!-- Left Panel -->
    <div data-role="panel" id="leftPanel" data-position="left" data-display="reveal" data-theme="b">
        <h2>Left Panel</h2>
        <p>This is the content of the left panel.</p>
    </div>
</div>

</body>
</html>

在这个例子中，我们在页面的头部添加了一个按钮，用于打开左侧面板。左侧面板使用了 data-role="panel" 属性，并通过 data-position="left" 指定了在页面左侧。按钮的图标使用了 data-icon="bars"，并通过 data-iconpos="notext" 隐藏了图标的文本。

右侧面板：
<!-- Home Page with Right Panel -->
<div data-role="page" id="home">
    <div data-role="header">
        <h1>Home Page</h1>
        <a href="#rightPanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b">Open Panel</a>
    </div>

    <div data-role="content">
        <p>This is the content of the page.</p>
    </div>

    <div data-role="footer">
        <h4>&copy; 2023 My App</h4>
    </div>

    <!-- Right Panel -->
    <div data-role="panel" id="rightPanel" data-position="right" data-display="reveal" data-theme="b">
        <h2>Right Panel</h2>
        <p>This is the content of the right panel.</p>
    </div>
</div>

右侧面板的配置方式与左侧面板类似，只需将 data-position 设置为 "right" 即可。

这只是 jQuery Mobile 面板的基本用法。你可以根据需要自定义面板的内容和样式，以及使用 JavaScript 或其他库来实现更高级的交互效果。


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