jQuery Mobile 面板
作者:小月亮
时间:2026-08-11
浏览:0
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" 属性即可:
实例
本文内容来源于互联网,如有侵权请联系删除。
作者最新文章
纯纯写作
2026-09-16 17:42
JMeter入门:创建HTTP请求并验证响应结果
2026-09-02 10:20
文件表格制作教程:选择Word或Excel的判断方法
2026-09-02 09:45
多个PPT怎么一次性转PDF?PPT批量转换工具有哪些?
2026-09-02 06:00
PDF图纸转CAD的3种方法及比例校准指南
2026-09-01 18:36
热门文章
更多
精品专题
更多
Mac软件
更多
WINDOWS
更多

































