jQuery UI 应用不同Theme的办法


Posted in Javascript onSeptember 12, 2010

jQuery UI 应用不同Theme的办法

 

一开始,我准备去动手,自己修改CSS文件。这被证明是个非常费力不讨好的事情。

有一次在jQuery UI的主页【http://jqueryui.com/home】停留的时候,一个单词很快吸引了我的注意:【themeable】,这不就是“可变主题的”的意思吗?于是我进入到【http://jqueryui.com/themeroller/】这里,发现了下图的这个地方,他们官网的人把主题的更换叫做“主题滚轮”(哈哈哈,翻译水平一般,信达雅也不知道满足了多少)。

jQuery UI 应用不同Theme的办法

 

第一个TAB页里说的是【滚出我们自己的主题样式】。打开下面各个分项后,可以自己定义自己需要的样式,定义好以后,点那个下载的按钮就可以下载自己定义好的一套主题样式了。这比自己动手去改CSS文件什么的方便多了。

第二个TAB页打开后,就发现原来他们已经准备好了很多的主题。这对于我这样的懒人很合适,这么多的样式总有一个是我想要的。

jQuery UI 应用不同Theme的办法

选中自己喜欢的样式,点击下载按钮,会自动转到下载页面,然后就能把自己想要的主题样式包给下载下来了。也可以在下载页面的【Theme】区的下拉框里选择自己需要的主题,我选择的是【Cupertino】。

jQuery UI 应用不同Theme的办法

 

两个压缩包下载下来(注意:不同的主题样式,压缩包名称是一样的,保存时别覆盖了),解压以后就发现,不同的主题其实只有CSS文件夹中的内容不同,也就是主题包的资源不同(主题包资源包括图片和CSS文件)。其它的都是一样的,文件夹文件名都一样,甚至于文件里面的元素的命名都是一样的。

jQuery UI 应用不同Theme的办法

 

在应用的项目工程中,只需要将主题包和【jquery-ui-1.8.4.custom.min.js】文件加入工程,就可以使用可变主题的jQuery UI了。如图:

jQuery UI 应用不同Theme的办法

 

我们所要做的就是在需要使用jQuery UI的页面中添加对于CSS文件和JS文件的引用即可。我一般是在母版页里添加。

<link rel="stylesheet" type="text/css" href="https://3water.com/Content/smoothness/jquery-ui-1.8.4.custom.css" /> 
<script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-ui-1.8.4.custom.min.js"></script>

当我们要更换jQuery UI的主题样式时,只需要修改对CSS的引用路径即可实现。如下图,这个颜色的部分就是修改的地方。
<link rel="stylesheet" type="text/css" href="https://3water.com/Content/cupertino/jquery-ui-1.8.4.custom.css" />

这里【http://jqueryui.com/demos/tabs/】是jQuery UI的一些使用示例的介绍,这个地址已经直接进入到TAB控件的使用说明。使用说明的页面布局如下图:

jQuery UI 应用不同Theme的办法

左边:选择你要显示的对象;

中间:是运行时的实际效果显示的地方,点击【View Source】能显示源代码;

右边:是选中对象的一些扩展功能的示例,选择不同的功能,显示区即会有随之变化,源代码区也会跟着变更;例如:上图选择【Open on mouseover】,Tab控件的Tab Page则由原来需要点击才能切换变成了只需要鼠标移动上去就可以切换了。

 

最后,再次强烈推荐jQuery UI

Javascript 相关文章推荐
通过url查找a元素并点击
Apr 09 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
jQuery循环动画与获取组件尺寸的方法
Feb 02 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
分享5个顶级的JavaScript Ajax组件库
Sep 16 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
基于jquery的表格排序
Sep 11 #Javascript
javascript多种数据类型表格排序代码分析
Sep 11 #Javascript
javascript 触发HTML元素绑定的函数
Sep 11 #Javascript
Js组件的一些写法
Sep 10 #Javascript
编写Js代码要注意的几条规则
Sep 10 #Javascript
jquery之empty()与remove()区别说明
Sep 10 #Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 #Javascript
You might like
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
PHP中一个有趣的preg_replace函数详解
2018/08/15 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
浅析Prototype的模板类 Template
2011/12/07 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
使用python实现个性化词云的方法
2017/06/16 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
python交互模式基础知识点学习
2020/06/18 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
新春联欢会主持词
2014/03/24 职场文书
日化店促销方案
2014/03/26 职场文书
李敖北大演讲稿
2014/05/24 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书