Jquery mobile 1.4.2 CategoryCSS Framework

jQuery Mobile offers CSS-based enhancementsfor common user interface elements.       

jQuery mobile提供了一些基于CSS之上的增强元素。（-。。-我是这样理解的，有木有人有更好的翻译）。

 

Classes 类

CSS classes forcommon styles. 一些CSS的基本样式。jQuery mobile运用了以下的css类:

 

1.Style classes 通用类:

ui-corner-all  将标记元素的全部边角都转化为圆角。

ui-shadow  为标记元素的周围添加一种阴影效果

ui-overlay-shadow 为标记元素添加一种覆盖的阴影效果。使用此class的最佳时机是

                               当被此类标记的元素显示时要覆盖在其他元素之上的时候。

ui-mini  减小元素内字体的大小和级别以用来让元素可以很好的适应工具栏和密集的空间内。

以上类可以在框架内的任何组件中使用。

 

2.Widget-specificclasses 为组件提供的定制类:

ui-collapsible-inset 能使collapsible组件拥有一个水平方向的外边距，边线和圆角。

ui-listview-inset 能使listview组件拥有一个水平方向的外边距，边线和圆角。

 

3.Button-specific classes 为按钮提供的定制类:

为了使用按钮提供的定制样式,你必须在a标记或者button元素上添加如下这些类:

Basic options 基本选项:

ui-btn 必须添加的一个class，这是使用这些样式的一个先决条件，有了它才能使用其他定制的按钮类。

ui-btn-inline 使按钮转化为行内样式，避免占用一整行的空间。

ui-shadow-icon 为按钮上的图标添加一种阴影效果。

Icon positioning 图标位置:

ui-btn-icon-top 将图标添加到按钮中的文本之上。

ui-btn-icon-right将图标添加到按钮中的文本右边。

ui-btn-icon-bottom将图标添加到按钮中的文本之下。

ui-btn-icon-left 将图标添加到按钮中的文本左边。

ui-btn-icon-notext将按钮中的文本隐藏，只显示图标。

Theme 主题:

ui-btn-[a-z] 为按钮定义颜色，a到z每一个字母都代表一种样式。

 

3.Icon classes 为图标提供的定制类:

图标被许多组件使用。下面这张表列出了所有图表的类：

ui-icon-alert

一个在三角形中的感叹号

ui-icon-arrow-l

一个向左的箭头 (←).

ui-icon-arrow-r

一个向右的箭头 (→).

ui-icon-arrow-u

一个向上的箭头 (↑).

ui-icon-arrow-d

一个向下的箭头 (↓).

ui-icon-back

一个返回标志.

ui-icon-bars

三条从上到下的水平线.

ui-icon-carat-b

一个形似字母v的图案 (v).

ui-icon-carat-l

指向朝左的zimu(<).

ui-icon-carat-r

A carat pointing right (>).

ui-icon-carat-t

A carat pointing up (^).

ui-icon-check

A checkmark (✓).

ui-icon-delete

A diagonal cross similar to (✕).

ui-icon-edit

A pencil - similar to (✎) but pointing to the lower left.

ui-icon-forward

A curved arrow arcing clockwise upwards.

ui-icon-gear

A gear (⚙).

ui-icon-grid

A 3✕3 grid.

ui-icon-home

A house similar to (⌂).

ui-icon-minus

A "minus" sign (-).

ui-icon-plus

A "plus" sign (+).

ui-icon-refresh

A circular arrow similar to (⟳).

ui-icon-search

A magnifying glass.

ui-icon-star

A star similar to (✭).

4.Theme-related classes与主题相关的类

这些类的前缀都是用一些客户常用接口命名的.实际上的名字应该是后面的字母。

ui-bar-[a-z]

为一个栏目设置一种颜色。这些栏目可以是headers和footers或者其他在这个页面上的工具栏。

ui-body-[a-z]

为内容块设置一种颜色.在1.4.0版本后已经过期,这些内容块可以是listview items, popups, collapsibles, the loader widget, sliders和panels.

ui-btn-[a-z]

为按钮设置一种颜色

ui-group-theme-[a-z]

为controlgroups, listviews和collapsible sets (accordions)设置一种颜色

ui-overlay-[a-z]

为诸如popup widgets和page containers设置一种背景色

ui-page-theme-[a-z]

为页面设置一种颜色

ui-panel-page-container-[a-z]

为出现在页面上的面板设置一个暂时的颜色