jqueryui themeroller样式解析一

   jqueryui实现了CSS的风格统一。

   实现原理：各个控件与风格相关的样式统一由jquery.ui.themes.css提供，各个控件对于同样的交互操作采用同样的样式。那jqueryui具体是怎么做的呢，下面为jquery.ui.themes.css的相关说明：

 

Component  containers（组件容器）

---

    .ui-widget 

        主要设置组件容器的font-family（如 Verdana,Arial,sans-serif）(对于一个容器内部所有的显示文本保持同样的样式),font-size（如 1.1em）

        容器可以是表格，也可以是对话框.....

    .ui-widget .ui-widget

        容器嵌套。主要定义属性为font-size（如 1em），默认字体小一号;

    .ui-widget input, .ui-widget select,.ui-widget textarea,.ui-widget button

        主要定义容器内部的可操作Dom对象的基本属性。主要包括font-family(如 Verdana,Arial,sans-serif)，font-size(如 1em;)一般应该比容器字体小一号

    .ui-widget-content

        定义组件容器内容区样式。主要属性包括：border(如 1px solid #aaaaaa)、background（如 #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png)）、color（字体颜色）

    .ui-widget-content a

        容器内容区内部链接样式。主要属性字体颜色color

    .ui-widget-header

        容器标题区域，如对话框标题栏（表格标题行）。主要定义属性border、background、color、font-weight（一般标题都以粗体显示）

    .ui-widget-header a

        容器标题区域链接样式。主要属性字体颜色color

 

 

Interaction states（交互状态）

---

    .ui-state-default, .ui-widget-content .ui-state-default

        默认状态设置。设置对象可以a、button、li等，将一个普通的Dom元素渲染为一个可以点击的交互对象。主要设置属性border、background、font-weight、color

    .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited

        交互对象内部链接样式设置（已访问和未访问样式保持一致）。主要设置属性为color和text-decoration: none（一般情况下，链接是不需要下划线的）; 如<span class='ui-state-default'><a></a></span>

    .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus

        焦点聚焦和鼠标越过交互对象时，应用的样式。主要设置属性为border、background、font-weight、color

    .ui-state-hover a, .ui-state-hover a:hover

        焦点聚焦和鼠标越过交互对象时，内部链接样式应该与父容器样式设置保持一致。主要设置属性为color和text-decoration: none

    .ui-state-active, .ui-widget-content .ui-state-active

        交互对象被激活（点击）时的状态。主要设置属性为border、background、font-weight、color

    .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited

        交互对象被激活（点击）时，内部链接样式应该保持一致。主要设置属性为color和text-decoration: none

 

Interaction Cues（交互Cues-不知咋翻译）

---

    .ui-state-highlight, .ui-widget-content .ui-state-highlight

        交互对象高亮状态。主要设置属性border、background、color

    .ui-state-highlight a, .ui-widget-content .ui-state-highlight a

        交互对象高亮时，内部链接样式应该保持一致。主要设置属性为color

    .ui-state-error, .ui-widget-content .ui-state-error

        交互对象呈现错误状态。主要设置属性border、background、color

    .ui-state-error a, .ui-widget-content .ui-state-error a

        交互对象呈现错误状态时，内部链接需要保持一致。主要设置属性为color

    .ui-state-error-text, .ui-widget-content .ui-state-error-text

        错误文本字体颜色（可以单独使用）。设置属性为color

    .ui-priority-primary, .ui-widget-content .ui-priority-primary

        高优先级，如多个按钮需要突出重点，可以应用该样式。主要设置属性为font-weight

    .ui-priority-secondary, .ui-widget-content .ui-priority-secondary

        次优先级。设置属性为opacity、filter、font-weight

    .ui-state-disabled, .ui-widget-content .ui-state-disabled

        交互对象disabled。主要设置属性为opacity: .35; filter:Alpha(Opacity=35); background-image: none;

 

Corner radius（圆角）

---

 

Overlays（屏蔽层）

---

    .ui-widget-overlay

        屏蔽层大背景设置，主要对背景和透明度设置。主要属性background、filter、opacity

    .ui-widget-shadow

        组件阴影设置。主要设置属性为margin、padding、background、opacity、（-moz-border-radius|-webkit-border-radius|border-radius）。margin、padding主要决定显示坐标。