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地图