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”。

效果出来了,相当漂亮:

差不多到这里就完成了吧?

稍等!

我们的工作是对于公司有着重要的意义,它是如此的重要,我们应该让字体足够的大,以至于大家都能清楚地意识到它的重要性。要做到这一点,我们展开“Font Settings”节点,并在“Size”字段中输入“2.25em”然后敲入回车。

完美!现在我们要做的就是准备下载我们的自定义主题。首先,我们须哟阿点击橙色的“下载主题”按钮以转向“构建您的下载”页面。然后,我们导航到浅橙色的面板中,选择“主题”和“版本设置”,并单击“下载”以下在一个自定义主题的Zip数据包。

步骤3:将主题添加到Wijmo部件

现在,我们的主题已经下载完成,我们可以把它添加到Wijmo部件上了。我们把它添加到一个wijaccordion上。

首先,我们要创建一个包含wijaccordion部件的Wijmo工程。弄清楚如何做到这一点的最好办法是访问Wijmo 入门主题,这里我们假定已经阅读过该文档。

好了,现在我们(丛理论上)拥有了一个包含着wijaccordion控件的Wijmo工程,所有我们需要做的就是设置一个主题。在我们的工程文件夹中,我们将创建一个名为主题的文件夹,并且解压包含主题文件的zip文件到该文件夹。解压过后将包含如下文件:

如果我们打开css文件夹,然后custom-theme文件夹,我们将看到css文件和images文件夹:

现在我们要做的是通过添加下面的应用表达是将在该工程的HTML文件链接到主题的CSS中:

<link href="Themes\css\custom-theme\jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /> 现在我们只需要保存文件,并在此打开它,看看我们的手工。

好了,我不得不承认这个主题不是最漂亮的,但是已经达到了完成本教程的目的。如果你花费几分钟在这个教程上面,你就可以通过ThemeRoller Web应用程序创建魔术般的主题效果了。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

小技巧:如何突破某些网站只能登陆后才能进行文字拷贝的限制

我写公众号文章时,经常需要从一些网站的文章上查阅一些资料。比如我想把这个网页上的一个标题“SAP Fiori 2.0用户体验设计概念获红点大奖”进行拷贝。

1243
来自专栏Fundebug

Vue UI:Vue开发者必不可少的工具

随着最新的稳定版本Vue CLI 3即将发布,是时候来看看有什么新鲜有趣的特性了。基于整个Vue.js开发者社区的反馈而大幅度改良,该版本提供了很多以工作流为中...

2275
来自专栏前端儿

安卓微信页面的调试

在开发安卓微信页面时,刚开始一般是会在PC上进行,等到开发后期的自测阶段再转到安卓模拟器上、转到各种真机上自测,上线了如果出问题还需要在真机上调试测试。

8542
来自专栏Java帮帮-微信公众号-技术文章全总结

简单到没朋友,微信小程序开发实录【面试+工作】

在准备微信小程序开发之前,希望你已经在微信·公众平台 https://mp.weixin.qq.com/注册了小程序。微信小程序账号注册入口 https://...

1.8K5
来自专栏蘑菇先生的技术笔记

Windows10自适应和交互式toast通知[1]

创建灵活的toast通知,包括内嵌图片及更多的内容,不在局限于之前Windows 8.1和Windows Phone 8.1提供的toast模板。

1356
来自专栏专业duilib使用+业余界面开发

duilib的xml预览工具duilibpreview

5594
来自专栏听雨堂

PowerPoint发布及链接图片的处理

        用PPT做了一个纯播放类的课件,希望发布到CD上,首先想到的是打包,找到一个PowerPoint Slide Show Converter的程序...

1968
来自专栏魏艾斯博客www.vpsss.net

宝塔 Linux 面板新增一键部署源码扩展功能

5164
来自专栏程序你好

三分钟让你了解什么是Web开发?

933
来自专栏地方网络工作室的专栏

打造前端MAC工作站(四)配置 Atom 编辑器

打造前端MAC工作站(四)配置 Atom 编辑器 前言 前端工程师可选择的编辑器主要有 Atom、Sublime Text3、VS Code,三者风格差不多,你...

3566

扫码关注云+社区

领取腾讯云代金券