JQuery 网站换肤功能
我第一次看到样式表切换器是在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
转载于:https://www.cnblogs.com/top5/archive/2009/11/01/1593984.html
JQuery 网站换肤功能相关推荐
- jQuery实现网站换肤
------------写在前面-------------- 第一次写微博,不知道怎么才可以更好的表述自己的观点.毕竟新人,被关注的比较少,所以,也当做自己学习过程的笔记吧. ------------ ...
- java怎样实现换肤功能_JavaScript实现换肤功能
一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...
- 仿造百度换肤功能的实现
换肤功能的应用很广,不管是搜索界面还是普通的管理界面等等,都可以进行设计并且应用换肤功能,起到更好的用户体验. 今天仿造百度的换肤功能,实现了基本的换肤功能,接下来将会为大家介绍如何实现.在设计界面的 ...
- 揭秘换肤技术:实现系统滚动条换肤功能
对于Windows系统中各种控件换肤功能,要数滚动条的换肤最难实现了,尤其是控件自带的系统滚动条,如Edit.ListBox.ListView.TreeView等自带的系统滚动条,要想实现其自定义的皮 ...
- 实现系统滚动条换肤功能
对于Windows系统中各种控件换肤功能,要数滚动条的换肤最难实现了,尤其是控件自带的系统滚动条,如Edit.ListBox.ListView.TreeView等自带的系统滚动条,要想实现其自定义的皮 ...
- 换肤功能原理及自定义组件化UI样式初步尝试
只从UI工作开始向前端工作,我一直计划着开发一套属于自己的UI框架,网站通过拖拽点击,或输入布局代码,后台自动生成一套静态页面,从此前端工作仅需要补充各种排版即可,静态页面通过代码生成. 可能我上面的 ...
- 小程序服务器换肤,微信小程序实现换肤功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
- 使用 css/less 动态更换主题色(换肤功能)
前言 说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
- 在Ajax程序中实现无刷新换肤功能(asp.net2.0)
写了一年多的WEB程序,觉得程序中换肤的功能是非常吸引人眼球的技术.特别是在子父级的WEB平台与论坛上应用广泛,可以突出不同人的风格与个性. 从文章的标题上看是Ajax的无刷新换肤,只是本 ...
最新文章
- TextLink的空格使用
- 二十一、oracle pl/sql分类一 存储过程
- 怎么学python-如何系统的学习python?
- OpenCV计算机视觉应用程序的交互式视觉调试
- Instagram视频上传延迟优化
- java 中的doit(n)_CoreJava测试题(含答案).docx
- C#LeetCode刷题之#290-单词模式(Word Pattern)
- 计算机视觉:相机成像原理:世界坐标系、相机坐标系、图像坐标系、像素坐标系之间的转换(转载)
- 利用NLB建立双机负载均衡群集
- ssm 转发请求_千呼万唤!阿里内部终于把这份SSM框架技术学习笔记分享出来了...
- (24)FPGA开发必备(FPGA不积跬步101)
- 【深度优先搜索】计蒜客:Betsy的旅行
- iOS HTML5的JS交互
- CLion:使用CLion新建一个C语言项目
- VBA操作WORD(五)批量调整图片大小、居中设置
- yyyy-MM-dd 转化成 中国标准时间(Tue Dec 31 2019 00:00:00 GMT+0800 (中国标准时间))
- 程序员应该知道的经济学常识
- 车牌号归属地查询,免费API
- 知识图谱架构(Knowledge Graph)
- 明解C语言入门篇_第12章_结构体