使用 jQuery UI 主题（3）创建独一无二的主题

look_w

创建独一无二的主题使用 ThemeRoller 网站（在大多数流行的浏览器中均可与运行；在  中可以找到相关链接）可以对现有的 jQuery 主题（作为起点）进行修改，从而创建一个独一无二的主题。这样就不必从头开始创建主题。这还意味着不需要很精通 CSS，该工具允许您动态查看对现有主题和小部件所做的修改。图 4 显示了 ThemeRoller 网站（不要将它与 Firefox 中运行的 ThemeRoller 书签混淆）。
图 4. ThemeRoller 网站单击 Gallery 可以选择任意一个现有主题。这样做可以切换样例小部件用于反映修改的 CSS 样式和图片。单击与主题有关的 Edit 按钮，此时将会显示 "Roll Your Own" 选项卡，您可以在上面修改与主题相关的 CSS 样式。如果没有选择主题进行编辑，而且在没有选择主题的情况下开始使用 "Roll Your Own" 选项卡，那么您将从头开始构造一个主题。
最后，单击 Download theme 下载所选择的主题，自定义主题中包含所有的主题修改。请注意，jQuery UI 及其主题支持众多 CSS3 特性，这意味着支持所有主要的浏览器（Windows Internet Explorer 的早期版本除外）。
ThemeRoller 的 "Roll Your Own" 选项卡的布局很合理，因此您可以快速定位并修改要查找的内容。该选项卡包含以下重要的区域：

• Font Settings：支持对主题中使用的字体进行一般修改。
• Corner Radius：控制各种小部件边角的圆整性。
• Header/Toolbar：为各种小部件中使用的标头提供外观。
• Content：提供设置来控制小部件的主体。
• Clickable：控制小部件使用的各种状态。

单击选项时，您会注意到一些与这些主题的构造有关的有趣现象。例如，jQuery UI 主题使用了纹理。要使用这些内容，请单击 ThemeRoller 中的 Header/Toolbar 区域，然后单击中间的 colored 按钮。此时将会显示一个下拉列表，其中包含可以选择的图案。所选纹理将与您选择的背景颜色融合在一起，生成标题和工具栏使用的图案。这只是纹理的一种用法。jQuery UI 主题中到处都使用了纹理。例如，如果修改 "Clickable: default state" 中的纹理，就会看到这些修改对所选主题中按钮产生的影响。
jQuery UI 主题的一个有趣特性是利用了突出显示和色差（也称为视觉线索）。ThemeRoller 可以完全控制这些视觉线索呈现在用户面前的效果。纹理、背景颜色、提纲边角、文本颜色，甚至包括图标颜色（如果线索中显示图标）都可以修改。这些样式的名称均显示在 ThemeRoller 中，因此只要在自己的网站中使用这些名称，便可根据需要将这些样式应用于显示给用户看的文本。
修改各种设置均会改变浏览器中的 URL。清单 6 提供了一个 URL 作为示例。
清单 6. ThemeRoller URL 样例

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

http://jqueryui.com/themeroller/#ffDefault=Segoe+UI%2C+Arial%2C+sans-serif&    fwDefault=bold&fsDefault=1.1em&cornerRadius=8px&    bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png&    bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff&    iconColorHeader=fadc7a&bgColorContent=feeebd&    bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&    borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405&    bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png&    bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000&    iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_wave.png    &bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00&    iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft.png&    bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7&    iconColorActive=eb990f&bgColorHighlight=f5d361&    bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100&    borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26&    bgColorError=d34d17&bgTextureError=07_diagonals_medium.png&    bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff&    iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&    bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&    bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&    thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&    cornerRadiusShadow=8px

保存并稍后恢复这个 URL，以便回过头来进一步修改设置。例如，完成修改后复制 URL，并将其粘贴到某个地方安全保存。现在，关闭浏览器（或包含 ThemeRoller 网站的浏览器选项卡），并使用复制的 URL 重新打开它。您可以看到，所有的修改都将恢复，为进一步修改做好准备。