03-理解jQuery UI CSS的各个组件

理解jQuery UI CSS的各个组件

当创建jQuery UI CSS时，首要目标是简化设置过程，使开发人员能够快速无缝地部署窗口组件，并且在代码中无须设计复杂的标记或者CSS。

早期，在我们集成第三方JavaScript窗口组件到自有项目的经历中，自定义程序库窗口组件的外观比正确设置和运行脚本难得多。在自定义设计的脚本中，核心和窗口组件插件脚本在后台处理复杂的任务，可配置的选项简化了自定义的工作，与此不同，窗口组件的样式通常由单个类或者标记来完成。我们必须在标记中确定类，并在修改之前分析样式规则的结构，这通常需要花费好几个小时筛查代码和CSS，使用Firebug找出在哪里指定类或者查找内联样式，更新背景图像，然后替换样式规则或者在标记中编辑类，使外观近似于项目的设计（这还只有在代码和CSS都进行了合理的组织并且保持一致时才能做到）。

对于我们来说，这感觉上是个退步；对基本没有设置样式的窗口组件添加自定义的观感应该比从已经设置样式的窗口组件中提取CSS，然后尝试领会哪条规则可以安全地替换要容易得多。我们决定开发更好的方法，一致性地应用样式，使它们能够在一组窗口组件和较大的网站或者应用设计系统中协调地工作。

为了解决jQuery UI中的这个问题，我们将jQuery UI CSS分成几个逻辑组件，类似于脚本的结构，并将窗口组件正常工作必需的核心结构样式（位置、浮动和内边距）从可自定义的主题样式（颜色和背景图片）中独立出来。这样，开发人员可以修改、使窗口组件匹配项目的类现在可以分为两个基本的类别：

• 窗口组件相关类包括格式化特定窗口组件结构和布局所需的所有样式，包括位置、间距和尺寸，以及其他帮助其正常工作的布局相关样式。例如，选项卡所用的窗口组件类包括浮动选项卡，使其在水平的行中显示并选择性地隐藏相关选项卡内容面板的样式。

窗口组件相关类包含在下载一个或者多个jQuery UI窗口组件的同时下载的CSS中（从秘诀15.1中可以学到下载和引用jQuery UI CSS的方法）。类得名于它们所控制的特定窗口组件，类名通常以 ui-[widgetname] 前缀开始，例如， ui-tabs 。

• 框架类为所有窗口组件应用自定义主题观感——包括基本字体、背景颜色和纹理、字体和图表颜色、形状（圆角半径）和交互状态反馈。框架类按照基本用途取名，例如，有些类提供状态反馈（ ui-state-default 、 ui-state-hover ）或者应用圆角（ ui-corner-all 、 ui-corner-top ），它们的设计意图是在整个网站或者应用程序中重用。实际上，它们可以应用到任何窗口组件，包括jQuery UI或者其他JavaScript程序库创建的组件或者自定义窗口组件。

在实践中，指定这些类的组合来设置jQuery UI窗口组件的样式——一个或者多个描述性的窗口组件相关类和一系列通用的框架类，这些类共同创建最后的外观。例如，查看折叠组件标题的标记：

<h3 class="ui-accordion-header ui-state-active ui-corner-top">code</h3>

上述设计中应用了三个类，为组件带来非常特殊的样式：

• ui-accordion-header 是这个组件特有的窗口组件相关类；它设置结构化样式规则（位置、尺寸、内外边距），但是不适用于任何颜色或者图片。
• ui-state-active 是一个框架类，添加主题颜色和背景图片显示组件的活动状态。
• ui-corner-top 也是一个框架类，指定标题的顶部有圆角。

尽管这种方法意味着为一些元素指定多个类，但是这种强有力的系统使得为不限数量的窗口组件（甚至是自定义组件）应用非常轻量级的主题非常容易。谨慎地将结构样式从主题中分离出来还意味着你可以在任何时候投入新的主题，而不用担心破坏现有的窗口组件。

我们还想简化新观感的创建，或者精确地匹配现有设计，而不需要深入学习CSS或者Adobe Photoshop之类照片编辑工具的专业知识。ThemeRoller使开发人员可以编辑由框架类设置的样式规则，而没有必要接触CSS或者进行人工图像制作。

ThemeRoller是一个Web应用程序，为设计和下载jQuery UI自定义主题提供了有趣和直观的界面。ThemeRoller提供了修改如下主题样式的工具：

• 所有窗口组件的基本字体 。基本字体设置用于主题中所有窗口组件的标准字形、大小和粗细（正常或者加粗）。默认情况下，字体的大小以“em”为单位。建议使用ems代替像素，这样在用户操纵浏览器文本大小时，文本将随着窗口组件容器伸缩，但是如果你喜欢，也可以指定像素大小。和标准CSS一样，提供字体范围以防用户计算机上没有安装首选字体，并以通用字体样式如“serif”或者“sans-serif”作为字体样式字符串的结尾，是一种好的习惯。
• 圆角半径 。圆角半径可以一致地应用到主题中的所有窗口组件，使它们有圆角的外观。每个半径值后面必须有单位：固定半径采用像素值，采用em值能够响应文本大小的变化，值为0则采用方形的边角。较小的像素值使窗口组件的边角更接近方形，而较大的值使其更圆。

注意

在本书编写的时候，CSS3中的边角设置和我们在Framework中相同，但还没有得到一些现代浏览器（包括Internet Explorer）的支持。请参见秘诀15.1中的补充材料，学习如何为这些浏览器增加圆角支持。

• 标题、工具栏和内容区域 。这些工具设置带有半透明纹理的背景颜色以及边框、文本和图标的颜色。例如，标题样式可用于对话框或者日期选择器的标题栏，以及滑块或者进度条的选中区域，而内容样式用于选中的折叠控件或者选型卡的内容区域。
• 可单击元素的默认、活动和悬停状态 。用户交互有三种不同的状态： default 是标准的可单击状态， hover 用于光标放在对应项之上时的视觉反馈， active 用在对应项被选中时。每个可单击状态都由带有半透明纹理的背景颜色以及边框、文本和图标的颜色表示。记住，每种状态都应该有足够的差异，才能为用户带来充分的反馈。
• 高亮和错误状态 。这是用于表达系统状态的特殊样式。高亮状态用在吸引用户注意力的信息上，还可以表示日历组件中当天的日期，在Ajax屏幕发生更新时也很有用。错误状态用于表示出现了需要用户注意的问题，例如，显示表单验证问题或者警告用户系统故障。高亮状态和错误状态都由带有半透明纹理的背景颜色以及边框、文本和图标的颜色定义。这些状态应该与主题中标准内容文本和背景颜色产生对比，两者之间也应该有足够的差异，以便清晰地表示吸引注意力和表达警告信息的意图。
• 作为覆盖层的模态屏幕 。模态屏幕是处于模态对话框和下面的页面内容之间的一个层次，通常用于在模态对话框显示的时候暂时禁用其他内容。这一工具设置模态屏幕的背景颜色和不透明度样式。如果你对特定的窗口组件完全不需要模态覆盖，可以通过窗口组件的 modal 选项切换。
• 阴影样式 。和高亮及错误状态一样，阴影样式可以有选择地应用到覆盖层。阴影有背景颜色、纹理和不透明度（和标题及可单击元素一样），还有指定阴影和组件左上角偏移量的阴影厚度，以及圆角半径。为了使阴影均匀地围绕组件，顶部和左侧偏移量应该为负数且等于阴影厚度。和标准圆角半径一样，可以设置以像素或者em值为单位的阴影圆角半径，或者输入0产生方形的边角。

ThemeRoller界面让你直接编辑前面所述的所有框架类样式，预览在jQuery UI窗口组件上的设计变化。一旦创建主题，ThemeRoller自动生成和打包所有必需的CSS和背景图片——你只要下载生成的主题样式表并在项目中引用即可。（在jQuery网站的ThemeRoller部分或者http://themeroller.com可以找到ThemeRoller）

现在我们对jQuery UI CSS和ThemeRoller已经有了了解，下面将有4个使用它们自定义主题的秘诀。首先，我们将从用ThemeRoller创建主题和设置组件样式的简单步骤开始（秘诀15.1）；然后我们将转向更复杂的步骤——覆盖框架类以得到更多自定义的主题（秘诀15.2）；接着会在这个项目中使用框架类（秘诀15.3）；最后研究如何在单个页面上为复杂界面使用多个主题（秘诀15.4）。

注意

有些设计人员和开发人员对为网站或者应用程序中的jQuery UI和ThemeRoller就绪组件编辑和预览主题感兴趣，我们为他们开发了一个可下载的ThemeRoller书签工具。要了解有关这个书签的内容并下载，参见http://ui.jquery.com/themeroller。