jQuery的CSS类
jQuery Mobile的使用CSS类风格迥异的元素。
对于下面的参考名单,我们已经包括了常见的样式的CSS类。
全局类
这些类可以在任何的jQuery移动小窗口(被添加buttons, toolbars, panels, tables, lists ,等等。):
类 | 描述 |
---|---|
ui-corner-all | 添加圆角元素 |
ui-shadow | 添加阴影元素 |
ui-overlay-shadow | 将叠加层阴影的元素 |
ui-mini | 使元素小 |
按钮类
除了全局类,你可以添加以下类<a>或<button>元素(而不是<input>键):
类 | 描述 |
---|---|
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>元素(参见图标参考有关如何使用上的其他元素的图标):
类 | 图标说明 | 图标 |
---|---|---|
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 | 禁止符号 | |
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 | 功率(开/关) | |
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 | 录影机 |
主题类
jQuery的移动提供了两个主题类:一(灰色)和b(黑色)。 达信一路-然而,你也可以创建自己的自定义类值"z"见主题章节)。 下表列出了可用的主题类。 字母(az)意味着你可以指定从A到Z的信。 例如: ui-bar-a或ui-bar-b等。
类 | 描述 |
---|---|
ui-bar-(a-z) | 指定一个栏的颜色 - 页眉,页脚和其他的酒吧 |
ui-body-(a-z) | 指定内容块的颜色 - 网页内容窗格(在1.4.0版本不建议使用),列表视图项,弹出窗口,collapsibles,装载机,滑块和面板 |
ui-btn-(a-z) | 指定的按钮(和图标)的颜色 |
ui-group-theme-(a-z) | 指定controlgroups,列表视图和可折叠套的颜色 |
ui-overlay-(a-z) | 指定对话框,弹出和其他页面的容器出现在顶部的页面背景颜色 |
ui-page-theme-(a-z) | 指定页面的颜色 |
网格类
在网格中列的宽度相等(在总数的100%宽)的,没有边框,背景,保证金或填充。 存在可以使用的五种布局格:
电网类 | 列 | 列宽 | 对应于 | 例 |
---|---|---|---|---|
ui-grid-solo | 1 | 100% | ui-block-a | Try it |
ui-grid-a | 2 | 50% / 50% | ui-block-a|b | Try it |
ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | Try it |
ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | Try it |
ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e | Try it |
有关网格的更多信息,请阅读我们的jQuery Mobile的网格章 。