Wijmo 是一个基于jQuery
UI的UI部件的套件。Wijmo最方便使用的特征之一即是兼容ThemeRoller。ThemeRoller
是一个创立独特的jQuery UI web
部件主题皮肤之web应用程序。凭借那大概的界面和所显现即所得的预览功能,你可据此比用图形编辑器更少的岁月呢您的Wijmo部件以及其它兼容ThemeRoller的部件创建皮肤。

 

拉开帷幕:ThemeRoller 基础

咱俩可以此找到ThemeRoller Web 应用程序
jqueryui.com/themeroller。一旦而打开该应用程序,请观察一下页面左侧,它具备三单标签,
Roll Your Own, Gallery, 以及Help。

jQuery 1

 

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主题,就是当生一样节咱们得改的主题:

jQuery 2

 

步骤 2: 调整ThemeRoller主题

Hot
Sneaks是一个优秀的主题,但是运动之但是点击区域上之粉红色不绝相符专业站点的配色风格。我坚信-让咱们以它替换为厚的黄褐色。

设改成活动之而是点击区域的颜料,我们要开展“Clickable:
active
”状态节点,并以首先个“ Background color and texture
”字段输入“#c2ac24”,然后敲入回车。

jQuery 3

 

除了,我们吧得品味利用颜色拾取器,直到你发现适合的水彩深浅。无论使用哪种方法,它说到底该看起有点像是样子:

jQuery 4

 

扣押起不错,不是吧?但是边界仍旧是粉红色,如果我们换成20世纪70年代粗毛地毯的铁锈色,会更为爱招惹注意。要高达这种作用,我们如果在“Border”字段输入“#
d0590b”并且敲入回车。接下来,既然都交这儿了,我们不妨继续联手更改但点击区域活动状态的文件以及图标。在“Text”字段输入“#f1f23a”在“Icon”字段输入“#b0f22c”。

jQuery 5

 

功用下了,相当优秀:

jQuery 6

 

大多到这边虽水到渠成了吧?

稍等!

咱俩的工作是于商家拥有显要之含义,它是这样的基本点,我们当于书足够的那个,以至于大家都能懂得地觉察及它的显要。要水到渠成即一点,我们进行“Font
Settings
”节点,并在“Size”字段遭遇输入“2.25em”然后敲入回车。

jQuery 7

 

圆满!现在咱们若举行的哪怕是准备生充斥我们的自定义主题。首先,我们亟须哟阿点击橙色的“下载主题”按钮以转账“构建而的下载”页面。然后,我们导航及浅橙色的面板中,选择“主题”和“本子设置”,并单击“下载”以下在一个自定义主题的Zip数据包。

手续3:将主题加上到Wijmo部件

今昔,我们的主题都下载就,我们得管其上加至Wijmo部件上了。我们把它上加至一个wijaccordion上。

先是,我们要开创一个暗含wijaccordion部件的Wijmo工程。弄明白如何形成即或多或少底尽好方式是访问Wijmo
入门主题,这里我们要已经读过该文档。

哼了,现在咱们(丛理论上)拥有了一个包含在wijaccordion控件的Wijmo工程,所有我们用开的尽管是装一个主题。在我们的工文件夹着,我们拿创设一个名为也主题的公文夹,并且解压包含主题文件之zip文件及拖欠文件夹。解压过后拿涵盖如下文件:

jQuery 8

 

而我们打开css文件夹,然后custom-theme文本夹,我们拿见到css文件及images文件夹:

jQuery 9

 

今天我们如果召开的是经抬高底的用表达是将以拖欠工程的HTML文件链接到主题的CSS中:

<link href=”Themes\css\custom-theme\jquery-ui-1.8.13.custom.css”
rel=”stylesheet” type=”text/css” />
当今咱们只有待保留文件,并在是辟她,看看我们的手工。

jQuery 10

 

哼了,我只好承认这主题不是极端精的,但是都达标了收本教程的目的。如果您花费几分钟在这个课程上面,你便足以经过ThemeRoller
Web应用程序创建魔术般的主题效果了。

 

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012
v1正式披露(2012.03.22更新)! 

相关文章

网站地图xml地图