jquery ui的css设计二

上一篇见这里

本篇重点说一下其换肤功能

换肤一般是指改变控件的字体颜色，背景颜色，边框颜色，hover上去的颜色，背景图片，很少再会涉及修改其长宽，字体类型什么的。

以这个版本的CSS为观察对象，可以发现，它从上到下分为

• Layout helpers 以ui-helper-开头,表示某种功能
• Interaction Cues 交互 只有一个.ui-state-disabled
• Icons 装饰用 只有ui-icon, 它与ui-icon-*配合使用
• Misc visuals 具体的每个组件,以ui- uiname开头
• Component containers 每个组件都有的部分 与换肤有关，主要有这三个类名:
  .ui-widget .ui-widget-content .ui-widget-header
• Interaction states各种ui-state-*, 如.ui-state-default, .ui-state-hover, .ui-state-focus, .ui-state-active 与点击,掠过,选中等行为有关
• Interaction Cues 也是各种ui-state-*, 如.ui-state-highlight, .ui-state-error ,.ui-priority-primary, .ui-priority-secondary, .ui-state-disabled 多 表示按钮的状态，如正常，警告，报错， 成功
• Icons 各种图标的具体定义
• Corner radius 圆角
• Overlays 遮罩层 （这个也与皮肤有关）

jquery ui官网有下面这样一个工具,我们可以一下把其中的变量扒出来

http://hi.baidu.com/ivugogo/item/605795f7a5c27a1ea62988e4