Wijmo 更优美的jQuery UI部件集：爱上 ThemeRoller

Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo最方便使用的特点之一就是兼容ThemeRoller。ThemeRoller 是一个创建独特的jQuery UI web 部件主题皮肤的web应用程序。凭借其简单的界面和所见即所得的预览功能，你可以用比使用图形编辑器更短的时间为你的Wijmo部件以及其他兼容ThemeRoller的部件创建皮肤。

拉开帷幕：ThemeRoller 基础

我们可以在这里找到ThemeRoller Web 应用程序 jqueryui.com/themeroller。一旦你打开该应用程序，请观察一下页面左侧，它拥有三个标签， Roll Your Own， Gallery，以及Help。

Roll Your Own选项卡

Roll Your Own是一个魔术般的功能，通过该选项卡，我们有完整的权限调整并完美你的主题。要改变一个元素，我们所要做的就是展开一个节点并开始工作。

Gallery选项卡

单击 Gallery 会显示一个包含ThemeRoller的附加主题的具有预览功能的主题列表。通过这里，我们可以通过以下方式预览，下载或者编辑一个现成的主题：

点击主题的片断视图将在Gallery库的右侧加载一个交互式的预览。
点击主题的“下载”按钮会带我们进入构建您的下载页面。如果我们需要下载预制的主题其中的一个用来更换Wijmo部件的皮肤，我们所要做的就是导航到浅橙色的面板，选择“高级主题设置”和“版本”，然后单击“下载”。
单击“ 编辑”将载入选中的主题，并返回到Roll Your Own 标签，在这里我们可以使用ThemeRoller来调整主题。

Help 选项卡

单击“帮助”选项卡，将给与我们有关ThemeRoller的特定信息的快速参考，如插件开发者的信息和浏览器支持说明。

使用ThemeRoller开始工作：一个简短的教程

在这篇文章中，我们将演练开始创建你自己的主题并将其添加到一个Wijmo工程。

步骤1：创建一个新的主题并开始工作

首先，我们需要通过以下连接访问ThemeRoller Web应用程序： jqueryui.com/themeroller。

从这里开始，我们有以下几种选择。我们可以通过通用的灰色默认主题开始一个主题，或者我们可以从“Gallery”选项卡中选择一个主题进行编辑。对于这个快速启动教程，我们准备选择一个主题。因此我们要点击“Gallery”选项卡，单击“编辑”来编辑我们选择的主题。在本教程中，我们要点击“Hot Sneaks”主题下的“编辑”按钮。

ThemeRoller加载这个主题，然后返回“Roll Your Own”选项卡。下图所示的Hot Sneaks主题，就是在下一节我们需要修改的主题：

步骤 2：调整ThemeRoller主题

Hot Sneaks是一个漂亮的主题，但是活动的可点击区域上的粉红色不太适合专业站点的配色风格。我确信-让我们将它替换为浓重的黄褐色。

要改变活动的可点击区域的颜色，我们需要展开“Clickable: active”状态节点，并在第一个“ Background color and texture ”字段输入“#c2ac24”，然后敲入回车。

除此之外，我们也可以尝试使用颜色拾取器，直到你发现合适的颜色深浅。无论采用哪种方式，它最终应当看起来有点像这个样子：

看起来不错，不是吗？但是边界仍旧是粉红色，如果我们换成20世纪70年代粗毛地毯的铁锈色，会更加容易引起注意。要达到这种效果，我们只要在“Border”字段输入“# d0590b”并且敲入回车。接下来，既然已经到这儿了，我们不妨继续一并更改可点击区域活动状态的文本和图标。在“Text”字段输入“#f1f23a”在“Icon”字段输入“#b0f22c”。