jquery的Theme和Theme Switcher使用小结


Posted in Javascript onSeptember 08, 2010

首先上一幅截图,效果不错吧:
jquery的Theme和Theme Switcher使用小结

一、引入jquery主题theme 
在head中引用jquery主题的CSS链接http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/base/jquery-ui.css还有许多其他不同的主题:base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader。只要将上面链接中的base替换成主题名即可切换不同的主题。 

二、使用jquery主题theme 
给想要装饰的部分加上class,如:<a class="ui-state-default ui-corner-all" href="#">Nothing's gonna change my love for you</a> 表示默认的ui, corner-all表示圆滑四个角。

jquery的Theme和Theme Switcher使用小结 

三、增加hover的效果

jquery的Theme和Theme Switcher使用小结

这里需要使用jquery的脚本。首先在head中引入jquery库 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
1.3表示1.3里面的最新版本,现在是1.3.2。 
然后手写脚本;

$(function(){$('.ui-state-default').hover(function(){$(this).addClass('ui-state-hover');},function(){$(this).removeClass('ui-state-hover');});});

这样就实现了鼠标移到上方是改变样式的效果了。

四、使用Theme Switcher在前台更换主题
先引入库

<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

,然后可以在页面任何地方加入层<div id="switcher">主题切换功能载入中...</div>,我习惯将这个switch的wikget做成apDiv层,方便挪动合适的位置。最后手写script激活这个层:
$('#switcher').themeswitcher();

jquery的Theme和Theme Switcher使用小结

五、使网页记住自己的主题 
每次更换主题,jquery都会写入cookie的,要使网页记住自己的主题,只需要提取这个cookie出来,并且刷新页面的css即可。 
把脚本写出来 

$(function(){if(theme==null) updateCSS("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css");else updateCSS("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/"+theme+"/jquery-ui.css");}) 
function updateCSS(locStr){var cssLink=$('<link href="'+locStr+'"type="text/css" rel="Stylesheet" class="ui-theme"/>');$("head").append(cssLink);if($("link.ui-theme").size()>3){$("link.ui-theme:first").remove();}}

最后页面代码大概是这样子的:
<?xml version="1.0" encoding="UTF-8" ?> 
<%@ page language="java" contentType="text/html; charset=UTF-8" 
pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
#switcher { 
position:absolute; 
left: 564px; 
top: 20px; 
} 
</style> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">google.load("jquery","1.3.2");google.load("jqueryui","1.7.2");function OnLoad(){$('#switcher').html("");var theme=$.cookie('jquery-ui-theme');$(function(){if(theme==null) updateCSS("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css");else updateCSS("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/"+theme+"/jquery-ui.css");});$(function(){$('.ui-state-default').hover(function(){$(this).addClass('ui-state-hover');},function(){$(this).removeClass('ui-state-hover');});});$("#pic2").hide();$('#switcher').themeswitcher();}google.setOnLoadCallback(OnLoad);function updateCSS(locStr){var cssLink=$('<link href="'+locStr+'"type="text/css" rel="Stylesheet" class="ui-theme"/>');$("head").append(cssLink);if($("link.ui-theme").size()>3){$("link.ui-theme:first").remove();}} 
</script> 
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> 
</script> 
<title></title> 
</head> 
<body> 
<div id="switcher">主题切换功能载入中...</div> 
<p><a class="ui-state-default ui-corner-all" href="http://mee-moo.googlecode.com/svn/trunk/resource/music/nothinggcmlfu.mp3">Nothing's gonna change my love for you</a></p> 
</body> 
</html>
Javascript 相关文章推荐
lib.utf.js
Aug 21 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
用vue设计一个日历表
Dec 03 Vue.js
复制小说文本时出现的随机乱码的去除方法
Sep 07 #Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 #Javascript
Document对象内容集合(比较全)
Sep 06 #Javascript
Jquery优化效率 提升性能解决方案
Sep 06 #Javascript
jquery中this的使用说明
Sep 06 #Javascript
firefox下frameset取不到值的解决方法
Sep 06 #Javascript
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
PHP实现计算器小功能
2020/08/28 PHP
JS 表单验证大全
2011/11/23 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python yield 使用浅析
2015/05/28 Python
Python实现快速多线程ping的方法
2015/07/15 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
Python sys模块常用方法解析
2020/02/20 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
一道SQL面试题
2012/12/31 面试题
化学教学随笔感言
2014/02/19 职场文书
《秋游》教学反思
2014/04/24 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
个人汇报材料范文
2014/12/30 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android