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 相关文章推荐
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
Angular网络请求的封装方法
May 22 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
vue实力踩坑之push当前页无效
Apr 10 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 如何向 MySQL 发送数据
2006/10/09 PHP
php入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
详解vue-router导航守卫
2019/01/19 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
Python下rrdtool模块的基本使用方法
2015/11/13 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
报关简历自我评价怎么写
2013/09/19 职场文书
大学生收银员求职信分享
2014/01/02 职场文书
小学教师师德承诺书
2014/05/23 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书