jQuery Mobile 基础教程jQuery Mobile 安装jQuery Mobile 页面jQuery Mobile 页面切换jQuery Mobile 按钮jQuery Mobile 按钮图标jQuery Mobile 工具栏jQuery Mobile 可折叠块jQuery Mobile 网格jQuery Mobile 表单jQuery Mobile 表单jQuery Mobile 表单输入元素jQuery Mobile 表单选择菜单jQuery Mobile 表单滑动条jQuery Mobile 列表jQuery Mobile 列表视图jQuery Mobile 列表内容jQuery Mobile 事件jQuery Mobile 事件jQuery Mobile 触摸事件jQuery Mobile 滚屏事件jQuery Mobile 方向改变事件jQuery Mobile 实例jQuery Mobile Data 属性jQuery Mobile 图标jQuery Mobile 事件jQuery Mobile orientationchange 事件jQuery Mobile pagebeforecreate 事件jQuery 事件 方法jQuery bind() 方法jQuery blur() 方法jQuery change() 方法jQuery click() 方法jQuery dblclick() 事件jQuery delegate() 方法jQuery die() 方法jQuery error() 方法jQuery event.currentTarget 属性jQuery event.data 属性jQuery event.delegateTarget 属性jQuery event.isDefaultPrevented() 方法jQuery event.isImmediatePropagationStopped() 方法jQuery event.isPropagationStopped() 方法jQuery event.namespace 属性jQuery event.pageX 属性jQuery event.pageY 属性jQuery event.preventDefault() 方法jQuery event.relatedTarget 属性jQuery event.result 属性jQuery event.stopImmediatePropagation() 方法jQuery event.stopPropagation() 方法jQuery event.target 属性jQuery event.timeStamp 属性jQuery event.type 属性jQuery event.which 属性jQuery focus() 方法jQuery focusin() 方法jQuery focusout() 方法jQuery hover() 方法jQuery keydown() 方法jQuery keypress() 方法jQuery keyup() 方法jQuery live() 方法jQuery load() 方法jQuery mousedown() 方法jQuery mouseenter() 方法jQuery mouseleave() 方法jQuery mousemove() 方法jQuery mouseout() 方法jQuery mouseover() 方法jQuery mouseup() 方法jQuery off() 方法jQuery on() 方法jQuery one() 方法jQuery $.proxy() 方法jQuery ready() 方法jQuery resize() 方法jQuery scroll() 方法jQuery select() 方法jQuery submit() 方法jQuery toggle() 方法jQuery trigger() 方法jQuery triggerHandler() 方法jQuery unbind() 方法jQuery undelegate() 方法jQuery unload() 方法jQuery Mobile pagebeforehide 事件jQuery Mobile pagebeforeload 事件jQuery Mobile pagebeforeshow 事件jQuery Mobile pagecreate 事件jQuery Mobile pagehide 事件jQuery Mobile pageinit 事件jQuery Mobile pageload 事件jQuery Mobile pageloadfailed 事件jQuery Mobile pageshow 事件jQuery Mobile scrollstart 事件jQuery Mobile scrollstop 事件jQuery Mobile swipe 事件jQuery Mobile swipeleft 事件jQuery Mobile swiperight 事件jQuery Mobile tap 事件jQuery Mobile taphold 事件jQuery Mobile 页面事件jQuery Mobile CSS 类jQuery Mobile 主题jQuery Mobile 主题jQuery Mobile 图标
©
本文档使用
php.cn手册 发布
文字
jQuery Mobile CSS 类
jQuery CSS 类
jQuery Mobile CSS 类来设置不同元素的样式。
以下列表包含了通用的 CSS 样式：
全局类
以下类可以在 jQuery Mobile 小工具中使用 (按钮，工具条，面板，表格，列表等。):
| Class | 描述 |
|---|---|
| ui-corner-all | 为元素添加圆角 |
| ui-shadow | 为元素添加阴影 |
| ui-overlay-shadow | 为元素添加多层阴影 |
| ui-mini | 让元素变小 |
按钮类
除了全局类外，你可以向 <a> 或 <button> 元素添加以下类 (不是 <input> 按钮):
| Class | 描述 |
|---|---|
| ui-btn | 添加在 <a> 元素上并以按钮形式展示 |
| ui-btn-inline | 在同一行上显示按钮 |
| ui-btn-icon-top | 定位图标在按钮文本之上 |
| ui-btn-icon-right | 定位图标在按钮文本的右边 |
| ui-btn-icon-bottom | 定位图标在按钮文本之下 |
| ui-btn-icon-left | 定位图标在按钮文本的左边 |
| ui-btn-icon-notext | 只显示图标 |
| ui-btn-a|b | 指定按钮演示。"a" 是默认的 (灰色背景黑色文本样式), "b" 修改颜色为黑色背景白色文本 |
图标类
所有可用图片的类用在 <a> 和 <button> 元素上 (查看 jQuery Mobile 图标参考手册 了解如何在其他元素上使用):
| Class | 图标描述 | 图标 |
|---|---|---|
| ui-icon-action | 动作 (一般用于页面跳转切换) |  |
| ui-icon-alert | 三角形内的感叹号 |  |
| ui-icon-audio | 音响/音箱 |  |
| ui-icon-arrow-d-l | 左下角箭头 |  |
| ui-icon-arrow-d-r | 右下角箭头 |  |
| ui-icon-arrow-u-l | 左上角箭头 |  |
| ui-icon-arrow-u-r | 右上角箭头 |  |
| ui-icon-arrow-l | 左角箭头 |  |
| ui-icon-arrow-r | 右角箭头 |  |
| ui-icon-arrow-u | 向上箭头 |  |
| ui-icon-arrow-d | 向下箭头 |  |
| ui-icon-back | 返回 |  |
| ui-icon-bars | 三条水平线，一般用于展示列表按钮图标 |  |
| ui-icon-bullets | 用于展示列表按钮图标 |  |
| ui-icon-calendar | 日历 |  |
| ui-icon-camera | 相机 |  |
| ui-icon-carat-d | 向下滑动图标 |  |
| ui-icon-carat-l | 向左滑动图标 |  |
| ui-icon-carat-r | 向右滑动图标 |  |
| ui-icon-carat-u | 向上滑动图标 |  |
| ui-icon-check | 勾选 |  |
| ui-icon-clock | 闹钟 |  |
| ui-icon-cloud | 云 |  |
| ui-icon-comment | 评论 / 消息 |  |
| ui-icon-delete | 删除 |  |
| ui-icon-edit | 编辑 / 铅笔 |  |
| ui-icon-eye | 眼睛 |  |
| ui-icon-forbidden | 禁用标识 sign |  |
| ui-icon-forward | 撤销 - (返回上一步) |  |
| ui-icon-gear | 齿轮，一般用于设置按钮图标 |  |
| ui-icon-grid | 网格 |  |
| ui-icon-heart | 心型，可用于文章收藏 |  |
| ui-icon-home | 主页 |  |
| ui-icon-info | 信息 |  |
| ui-icon-location | 定位 |  |
| ui-icon-lock | 锁 |  |
| ui-icon-mail | 邮件 / 信封 |  |
| ui-icon-minus | 减号 |  |
| ui-icon-navigation | 导航 |  |
| ui-icon-phone | 电话 |  |
| ui-icon-power | 开关 (On/off) |  |
| ui-icon-plus | 加号 |  |
| ui-icon-recycle | 循环 标识 |  |
| ui-icon-refresh | 刷新 |  |
| ui-icon-search | 搜索 / 放大镜 |  |
| ui-icon-shop | 商店/购物袋 |  |
| ui-icon-star | 星号 |  |
| ui-icon-tag | 标签 |  |
| ui-icon-user | 用户 / 人物 |  |
| ui-icon-video | 视频 / 相机 |  |
主题类 Classes
jQuery Mobile 提供了两个主题类: a (灰) 和 b (黑)。 但是，你可以创建你自己的自定义类 - 可定义到字母 "z" （查看 jQuery Mobile 主题 ）。 下表列出了可用的主题类。 字母 (a-z) 意为样式可以指定 a 到 z。例如 ui-bar-a 或 ui-bar-b等。
| Class | 描述 |
|---|---|
| ui-bar-(a-z) | 指定栏目演示 - 头部，底部及其他栏目 |
| ui-body-(a-z) | 指定内容块的颜色 - 页面内容部分 ( 1.4.0 版本已废弃), 列表视图， 弹窗, 侧栏，面板，加载，折叠。 |
| ui-btn-(a-z) | 指定按钮颜色 |
| ui-group-theme-(a-z) | 定义了控制组的演示 listviews 和 collapsible 集合。 |
| ui-overlay-(a-z) | 定义了页面背景颜色，包括对话框，弹窗和其他出现在最顶层的页面容器 |
| ui-page-theme-(a-z) | 定义了页面演示 |
网格类
网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。 这里有四种布局网格可供使用：
| 网格类 | 列 | 列宽 | 对应 | 实例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | 实例» |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | 实例» |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | 实例» |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | 实例» |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | 实例» |
更多信息可以查看 jQuery Mobile 网格 章节。