当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 网站换肤功能实现代码

Javascript
jquery 弹出层实现代码
jQuery 扩展对input的一些操作方法
扩展jQuery 键盘事件的几个基本方法
Iframe 自适应高度并实时监控高度变化的js代码
CCPry JS类库 代码
jquery text()要注意啦
json 入门基础教程 推荐
json 实例详细说明教程
JavaScript中的JSON 中文版翻译
javascript GUID生成器实现代码
DOM 脚本编程中的兄弟节点
JavaScript Sort 表格排序
提高网站性能之 如何对待JavaScript
js 函数的执行环境和作用域链的深入解析
键盘 keycode的值 javascript时触发事件时很有用的要素
cnblogs csdn 代码运行框实现代码
简单实用的HTML到UBB转换脚本工具实现说明
Javascript结合css实现网页换肤功能
JQuery 网站换肤功能实现代码
JS OOP包机制,类创建的方法定义

No. « 269 270 271 272 »

技术文章搜索

关键字

Javascript 中的 JQuery 网站换肤功能实现代码

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 58 ::
收藏到网摘: n/a

我第一次看到样式表切换器是在A List Apart或者Simple Bits，那是两个设计师最应该去的网站。 从那以后，我找到了很多可以让访客通过鼠标点击某个地方切换样式表的方法。但最近我要写一篇如何 使用jQuery编写简单代码实现它的教程。
我将向你们逐步解说整个的过程，不仅仅因为要展示jQuery代码的简介，同时也要揭示jQuery库中的若干高级特性。
首先，代码
复制代码 代码如下:

$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}

其他这里没有提到的部分是你将在后面看到的创建和读取cookie的函数。
熟悉的开篇
$(document).ready(function(){ $('.styleswitch').click(function()……告诉jQuery“以最快的速度查找所有包含对象名‘styleswitch'的元素，并在他们被鼠标点击时执行一个函数”。
看起来不错。当鼠标点击预先指定的元素时，switchStylestyle函数将被调用。从现在开始是重点。
这句话什么意思？
第一次看到这句代码的时候我的脑子有些卡壳：
$('link[@rel*=style]').each(function(i) {
在互联网上搜索了一下后我空手而归。最后不得不找到了jQuery的作者John Resig，向他咨询。
他直接给了我一个jQuery网站的页面地址，里面讲解了若干jQuery提供的高级特性(xpath)，可以用来查找并操作页面中的若干元素。
如果你看过这些东西你就能明白上面那句神秘的代码的含义是告诉jQuery“查找所有带rel属性并且属性值字符串中包含‘style'的link链接元素”。
让我们看看如何编写包含一个主样式表，两个备用样式表的页面：
<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" /><link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" /><link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />我们可以看到所有样式表都含有一个包含‘style'字串的rel属性。
所以结果一目了然，jQuery轻松定位了页面中的样式表链接。
下一步？
each()函数将遍历所有这些样式表链接，并执行下一行中的代码：
this.disabled = true;if (this.getAttribute('title') == styleName) this.disabled = false;“首先禁用所有的样式表链接，然后开启任何title属性值与switchStylestyle函数传递过来的字串相同的样式表”
一把抓啊，不过很有效。
现在我们需要保证的是那些样式表存在并且有效。
完整代码和演示
既然 Kelvin Luck已经编写了这些代码，我就不在这里重复了。
DEMO
我相信Kelvin的灵感是从 这个网站那里得到的，我们正好可以看看使用其他工具实现这个功能是否要比jQuery更加复杂冗长。
完整的styleswitch.js
复制代码 代码如下:

/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
(function($)
{
$(document).ready(function() {
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
});
function switchStylestyle(styleName)
{
$('link[@rel*=style][title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
})(jQuery);
// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
// /cookie functions