HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
jQuery Mobile CSS class to style different elements.
The following list contains the general CSS styles:
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 |
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 |
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 | 视频 / 相机 |
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 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.