jQuery Mobile CSS class
jQuery CSS class
jQuery Mobile CSS class to style different elements.
The following list contains the general CSS styles:
Global Class
The following classes can use (buttons, toolbars, panels, tables, lists, etc.) in jQuery Mobile gadget:
| Class | description |
|---|---|
| ui-corner-all | Adding an element fillet |
| ui-shadow | To add a shadow element |
| ui-overlay-shadow | Adding an element multi-layer shadow |
| ui-mini | Let smaller elements |
Button class
In addition to the global class, you can add the following class (not the <input> button) to <a> or <button> element:
| Class | description |
|---|---|
| ui-btn | Add the <a> elements as buttons and display |
| ui-btn-inline | Display button on the same line |
| ui-btn-icon-top | Target icon over the button text |
| ui-btn-icon-right | Target icon to the right of the button text |
| ui-btn-icon-bottom | Target icon below the button text |
| ui-btn-icon-left | Target icon to the left of the button text |
| ui-btn-icon-notext | Show only icon |
| ui-btn-a | b | Designation button demo. "A" is the default (black text on a gray background style), "b" to change the color of a black background with white text |
Icon class
Class of all available images used in <a> and <button> element (See jQuery Mobile icon reference manual to learn how to use on other elements):
| 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 | 视频 / 相机 |  |
Topic category Classes
jQuery Mobile theme provides two classes: a (gray) and b (black). However, you can create your own custom classes - to define the letter "z" (See jQuery Mobile themes ). The following table lists the available themes class. Letters (az) means you can specify a style to z. For example ui-bar-a or ui-bar-b and the like.
| Class | description |
|---|---|
| ui-bar- (az) | Specify the column Demo - header, footer and other sections |
| ui-body- (az) | Specifies the color of pieces of content - content section page (version 1.4.0 obsolete), list view, pop, sidebar, panel, load, collapsed. |
| ui-btn- (az) | Specify a button color |
| ui-group-theme- (az) | It defines a control group presentation listviews and collapsible collection. |
| ui-overlay- (az) | Defines the page background colors, including dialog boxes, pop-ups and other top-level pages appear in the container |
| ui-page-theme- (az) | Define page Demo |
Grid class
Grid columns are of equal width (total 100%), no border, background, margin or padding. There are four layout grid are available:
| Grid class | Row | Column Width | correspond | Examples |
|---|---|---|---|---|
| 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 |
Further information is available jQuery Mobile Grid section.