jQuery Mobile 面板
作者:小月亮
时间:2026-08-11
浏览:1
jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。 通过向指定 id 的 元素添加 data-role="panel" 属性来创建面板。 在 中添加 HTML 标记来显示你的面板内容: 面板标题.. 文本内容.. 注意: panel 标记必须置于头部、内容、底部组成的页面之前或之后。 要
本文目录
jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。

通过向指定 id 的
元素添加 data-role="panel" 属性来创建面板。
在
中添加 HTML 标记来显示你的面板内容:
面板标题..
文本内容..
注意: panel 标记必须置于头部、内容、底部组成的页面之前或之后。
要访问面板,需要创建一个指向面板
id 的链接,点击该链接即可打开面板:
打开面板
简单的面板实例
实例
关闭面板
你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。你可以通过使用 data-* 属性来禁用滑动和点击来关闭面板:
| 属性 | 值 | 描述 | 实例 |
|---|---|---|---|
| data-dismissible | true | false | 指定面板是否可以通过点击面板外部区域来关闭。 | |
| data-swipe-close | true | false | 指定是否可以通过滑动来关闭。 |
如果想用按钮把面板关掉,其实很简单:只需要在面板的
里加上 data-rel="close" 属性就可以了。再补充一点,从性能角度看,关闭链接的 href 属性最好指向当前页面的 ID。
实例
面板展示
你可以通过使用 data-display 属性来控制面板的展示方式:
| 属性值 | 描述 |
|---|---|
| data-display="overlay" | 在内容上显示面板 |
| data-display="push" | 是同时"推动"面板和页面。 |
| data-display="reveal" | 默认值,将页面像幻灯片一样从屏幕划出,将面板显示出来 |
实例
面板定位
默认情况下,面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧,可以指定 data-position="right" 属性。
实例
面板里的内容其实可以按你的需要,选择是否跟着页面滚动。默认状态下,面板会随着页面一起移动,不过其中的内容依然保持在页面顶部的位置。要是希望面板内容固定住,不跟随页面滚动,那么只需要在面板上加上 the data-position-fixed="true" 属性即可:
实例
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
作者最新文章
漫蛙漫画app下载入口
2026-10-13 13:18
漫蛙漫画免费下载最新版本
2026-10-13 13:18
漫蛙网页版快捷入口
2026-10-13 13:16
漫蛙manwa2官方网页链接下载最新版v3.57
2026-10-13 13:16
漫蛙manwa在线浏览入口
2026-10-13 13:15
上一篇:
jQuery Mobile 可折叠块
下一篇:
jQuery Mobile 导航栏
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多










































