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 相关文章推荐
javascript不可用的问题探究
Oct 01 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
vue中使用腾讯云Im的示例
Oct 23 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
2015/06/11 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
pandas string转dataframe的方法
2018/04/11 Python
Python对象属性自动更新操作示例
2018/06/15 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
2018/12/26 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
建筑行业的大学生自我评价
2013/12/08 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
机关会计岗位职责
2014/04/08 职场文书
地震捐款倡议书
2014/08/29 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
幼师个人总结范文
2015/02/28 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Python实现排序方法常见的四种
2021/07/15 Python