菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

jQuery Mobile 面板

likuolei

jQuery Mobile 面板（Panel）详解

面板（Panel） 是 jQuery Mobile 的 侧边滑动菜单，类似 抽屉式导航（Drawer），支持 左/右面板、固定定位、叠加/推开模式，完美用于移动端主导航。

常用于 左侧主菜单，可包含 列表、按钮、搜索框 等。

1. 基本结构

<div data-role="page">

  <!-- 触发按钮（在 header 中） -->
  <div data-role="header">
    <a href="#myPanel" class="ui-btn ui-btn-left ui-icon-bars ui-btn-icon-left ui-corner-all">
      菜单
    </a>
    <h1>首页</h1>
  </div>

  <!-- 内容区 -->
  <div data-role="main" class="ui-content">
    <p>点击左上角打开面板</p>
  </div>

  <!-- 左侧面板 -->
  <div data-role="panel" id="myPanel" data-position="left" data-display="overlay">
    <h3>主菜单</h3>
    <ul data-role="listview">
      <li><a href="#home" class="ui-btn ui-icon-home ui-btn-icon-right">首页</a></li>
      <li><a href="#news" class="ui-btn ui-icon-comment ui-btn-icon-right">消息</a></li>
      <li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-right">购物车</a></li>
      <li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-right">我的</a></li>
      <li><a href="#" data-rel="close" class="ui-btn ui-icon-delete ui-btn-icon-right">关闭</a></li>
    </ul>
  </div>

</div>

关键属性：

  • data-role="panel"
  • id → 触发时用 href="#id"
  • data-position="left" / right"
  • data-display="overlay" / push" / reveal"

2. 面板显示模式（data-display）

模式值效果
叠加（推荐）overlay面板覆盖内容
推开push面板推开内容
揭示reveal内容向右滑动，露出面板
<div data-role="panel" data-display="overlay"> <!-- 推荐 -->

3. 完整示例（可直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQM 面板示例</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-1.11.1.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="home">

  <!-- 头部 + 触发按钮 -->
  <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <a href="#leftPanel" class="ui-btn ui-icon-bars ui-btn-icon-left ui-corner-all">菜单</a>
    <h1>我的应用</h1>
    <a href="#rightPanel" class="ui-btn ui-icon-gear ui-btn-icon-right ui-corner-all">设置</a>
  </div>

  <!-- 内容区 -->
  <div data-role="main" class="ui-content">
    <h2>欢迎使用面板导航</h2>
    <p>当前时间：2025年11月17日 03:00（CET）</p>
    <p>国家：比利时 (BE)</p>
    <div style="height:800px;"></div>
  </div>

  <!-- 左侧面板（主菜单） -->
  <div data-role="panel" id="leftPanel" data-position="left" data-display="overlay" data-theme="a">
    <div style="padding:20px;">
      <h3>主导航</h3>
      <ul data-role="listview" data-inset="true">
        <li><a href="#home" data-rel="close" class="ui-btn ui-icon-home ui-btn-icon-right">首页</a></li>
        <li><a href="#news" data-rel="close" class="ui-btn ui-icon-comment ui-btn-icon-right">消息 <span class="ui-li-count">3</span></a></li>
        <li><a href="#cart" data-rel="close" class="ui-btn ui-icon-shop ui-btn-icon-right">购物车</a></li>
        <li><a href="#user" data-rel="close" class="ui-btn ui-icon-user ui-btn-icon-right">个人中心</a></li>
        <li data-role="list-divider">更多</li>
        <li><a href="#settings" data-rel="close" class="ui-btn ui-icon-gear ui-btn-icon-right">设置</a></li>
        <li><a href="#" data-rel="close" class="ui-btn ui-icon-delete ui-btn-icon-right">关闭面板</a></li>
      </ul>
    </div>
  </div>

  <!-- 右侧面板（设置） -->
  <div data-role="panel" id="rightPanel" data-position="right" data-display="push" data-theme="b">
    <div style="padding:20px;">
      <h3>设置</h3>
      <form>
        <label>
          <input type="checkbox" data-role="flipswitch"> 夜间模式
        </label>
        <label>
          <input type="checkbox" data-role="flipswitch" checked> 消息提醒
        </label>
        <button type="button" data-rel="close" class="ui-btn ui-btn-b">保存</button>
      </form>
    </div>
  </div>

</div>

<!-- 其他页面略 -->
<div data-role="page" id="news">
  <div data-role="header" data-position="fixed">
    <a href="#leftPanel" class="ui-btn ui-icon-bars ui-btn-icon-left">菜单</a>
    <h1>消息</h1>
  </div>
  <div data-role="main" class="ui-content"><p>消息内容</p></div>
</div>

</body>
</html>

4. 面板属性汇总

属性值说明
data-role="panel"—必须
data-position="left"left / right面板方向
data-display="overlay"overlay / push / reveal显示模式
data-theme="a"a / b主题
data-dismissible="false"true/false点击外部不关闭
data-swipe-close="false"true/false禁止滑动关闭
<div data-role="panel" data-dismissible="false" data-swipe-close="false">

5. 触发方式

方式代码
按钮触发<a href="#myPanel">打开</a>
JS 触发$("#myPanel").panel("open");
自动触发data-rel="panel" + href
<script>
$(document).on("pagecreate", function() {
  $("#openBtn").on("tap", function() {
    $("#leftPanel").panel("open");
  });
});
</script>

6. 最佳实践

建议说明
左侧放主菜单，右侧放设置符合用户习惯
使用 overlay 模式性能更好
面板宽度固定style="width:260px;"
内容加 padding避免被固定头部遮挡
用 data-rel="close" 关闭跳转后自动关闭
<div data-role="main" class="ui-content" style="padding-top:50px;">

7. 常见问题

问题解决方案
面板不出现检查 href="#正确ID"
内容被推开后错位改用 overlay
滑动不灵敏确保无 data-swipe-close="false"
多页面面板不共享每个页面独立定义

8. 推荐面板布局

<!-- 左侧主菜单 -->
<div data-role="panel" id="navPanel" data-position="left" data-display="overlay" style="width:260px;">
  <div style="padding:15px;">
    <h3 style="margin:0 0 15px;">菜单</h3>
    <ul data-role="listview">
      <li data-role="list-divider">导航</li>
      <li><a href="#home" data-rel="close">首页</a></li>
      <li><a href="#profile" data-rel="close">我的</a></li>
    </ul>
  </div>
</div>

总结：标准面板模板

<!-- 触发按钮 -->
<a href="#myPanel" class="ui-btn ui-icon-bars ui-btn-icon-left">菜单</a>

<!-- 面板 -->
<div data-role="panel" id="myPanel" data-position="left" data-display="overlay">
  <ul data-role="listview">
    <li><a href="#home" data-rel="close">首页</a></li>
    <li><a href="#" data-rel="close">关闭</a></li>
  </ul>
</div>

需要我为你生成：

  • 企业后台完整模板（左侧面板 + 顶部工具栏）？
  • 双面板 + 暗黑模式切换？
  • 面板内嵌搜索 + 动态菜单？

随时告诉我！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部