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 相关文章推荐
js Form.elements[i]的使用实例
Nov 13 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 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操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
python计算对角线有理函数插值的方法
2015/05/07 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python smallseg分词用法实例分析
2015/05/28 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python人民币小写转大写辅助工具
2018/06/20 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
String和StringBuffer的区别
2015/08/13 面试题
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
2014年学校办公室工作总结
2014/12/19 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
居住证明范文
2015/06/17 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
PHP正则表达式之RCEService回溯
2022/04/11 PHP
GPU服务器的多用户配置方法
2022/07/07 Servers