32、使用 ThemeRoller 定制 jQuery UI 小部件样式

使用 ThemeRoller 定制 jQuery UI 小部件样式

1. 引言

在网页或应用程序中使用 jQuery UI 小部件时，常常需要让它们与既定设计相匹配。这时，可以使用 ThemeRoller 这个简单的 Web 应用程序来编辑 jQuery UI CSS 框架类，从而定制 jQuery UI 小部件的外观和感觉。

2. 相关样式设置

2.1 模态覆盖层

对于特定小部件，如果不想使用模态覆盖层，可以通过小部件的模态选项进行切换。

2.2 投影样式

投影样式可选择性地应用于覆盖层。投影具有背景颜色、纹理和不透明度（与标题和可点击元素类似），还有阴影厚度（指定阴影应从其组件左上角偏移的距离）和圆角半径。为使阴影均匀地出现在组件周围，顶部和左侧的偏移值应为负值，且等于阴影厚度。可以用像素或 em 为单位设置投影的圆角半径，若设为零则使角为方形。

3. ThemeRoller 简介

ThemeRoller 界面可直接编辑之前提到的框架类样式，并在运行的 jQuery UI 小部件中预览设计更改。创建主题后，ThemeRoller 会自动生成并打包所有必需的 CSS 和背景图像，只需下载生成的主题样式表并在项目中引用即可。可以在 jQuery UI 网站的主题部分或 http://themeroller.com 找到 ThemeRoller。

4. 使用 ThemeRoller 定制主题示例

4.1 问题描述

假设有一个用于预订旅行的新网站，正在构建预订航班的界面部分。设计包含一组用于选择预订类型