34、jQuery UI 主题应用与多主题管理

jQuery UI 主题应用与多主题管理

1. 主题覆盖规则的考虑

在项目中，需要考虑是对所有小部件应用覆盖规则，还是仅对部分小部件覆盖主题样式。若有可能以不同方式展示小部件，可将覆盖样式作用于容器元素的类或 ID，避免改变小部件的默认格式。

以下是一些编辑提示：
- 若要移除小部件标题的底部边框，使用 border-bottom-width: 0; 而非 border-bottom:0; ，前者可保留边框样式和颜色，方便后续恢复。
- 对于具有相同类的堆叠元素，可仅禁用其中一个的背景图像，凸显背景颜色差异。
- 若需更改小部件特定部分的颜色，应设计主题以适应此更改，而非在样式表中硬编码颜色。
- 若需移除边框但保留其布局结构，可将边框设置为透明。为兼容 IE，将边框样式设置为虚线。
- 对于结构尺寸（如内边距、外边距），尤其是字体大小，尽可能使用 em 单位。假设 1em 为标准小部件大小，尽量不低于 0.8em 以保证文本可读性。

2. 对非 jQuery UI 组件应用主题

在页面中，其他组件（如内容框、按钮和工具栏）与 jQuery UI 小部件相邻，交互行为相似，但设计不匹配。可通过为非 jQuery UI 元素分配框架类，使其应用与 ThemeRoller 样式元素相同的主题，且在更新 ThemeRoller 主题时，这些元素会自动更新样式。

操作步骤如下：
1. 回顾可用的框架类 ：框架类是在 ThemeRoller 中创建主题时下载的 jQuery UI 主题样式表