最新的Web开发教程
 

jQuery Mobile CSS类


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-aui-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的网格章