`
xbydn
  • 浏览: 2522 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

关于实现网站换肤

阅读更多

虽然不是我写的代码,但是我把所有的注释都加上去了,代码应该很好懂了。
这我即将做的一个项目需要用到的一个JQuery。分享给大家。

/**
* Styleswitch stylesheet switcher built on jQuery
* Under an Attribution, Share Alike License
* By Kelvin Luck ( http://www.kelvinluck.com/ )
**/
//页面解析完成后立即使用这个,里面的function是一个匿名函数,应用包含styleswitch的class,设定点击事件
//获取styleswitch中的rel属性里的值
$(document).ready(function() {
    $('.styleswitch').click(function()
    {
        switchStylestyle(this.getAttribute("rel"));
        return false;
    });
    var c = readCookie('style');//css1
    if (c) switchStylestyle(c);
});

function switchStylestyle(styleName)
{
    //link元素中带有rel属性的并且值包含style的,并且包含title属性的
    $('link[@rel*=style][@title]').each(function(i)
    {
        //this代表link元素的disabled属性,并且将这个属性设为true
        this.disabled = true;
        //判断title里的值是不与传过来的styleName相等,若相等,则disabled设为false
        if (this.getAttribute('title') == styleName) this.disabled = false;
    });
    //调用createCookie并且传3个参数,‘style’,css1,365天
    createCookie('style', styleName, 365);
}

// cookie functions http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days)
{
    if (days)
    {
        var date = new Date();
        //当前一年加上一年比如现在是2010 那这里显示的就是2011  Sun, 18 Sep 2011 10:48:37 GMT
        date.setTime(date.getTime()+(days*24*60*60*1000));
        //获取格林威治时间值  ;expries=Sun, 18 Sep 2011 10:48:37 GMT
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    //设置cookie  style=css1+时间
    document.cookie = name+"="+value+expires+"; path=/";
    //cookie=  style=css1;expries=Sun, 18 Sep 2011 10:48:37 GMT;path=/
}
function readCookie(name)
{
    //nameEQ="style="
    var nameEQ = name + "=";
    //ca[0]= "style=css1" ca[1]="expries=Sun, 18 Sep 2011 10:48:37 GMT" ca[2]="path=/"
    var ca = document.cookie.split(';');
    //循环遍历ca
    for(var i=0;i < ca.length;i++)
    {
        var c = ca;
        while (c.charAt(0)==' ') c = c.substring(1,c.length);//style=css1  expries=Sun, 18 Sep 2011 10:48:37 GMT
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);//css1
    }
    return null;
}
function eraseCookie(name)
{
    createCookie(name,"",-1);
}
// /cookie functions
分享到:
评论
1 楼 andyihk 2011-02-24  
还不错

相关推荐

    jQuery实现网站换肤功能

    5. `js`:这个文件夹可能包含JavaScript代码,特别是实现换肤逻辑的脚本。 6. `style`:很可能包含了不同皮肤的CSS文件,如`skin1.css`, `skin2.css`, `skin3.css`等。 实现换肤功能的基本步骤如下: 1. **引入...

    jQuery实现网站换肤功能.zip

    1. `&lt;head&gt;`部分:引入jQuery库(可能通过CDN链接)以及项目中的`js`目录下的脚本文件,如`skin.js`,这个脚本文件包含了实现换肤功能的JavaScript代码。 2. `&lt;body&gt;`部分:可能包含一个或多个用于切换皮肤的按钮,...

    jquery实现网页换肤

    在网页设计中,换肤功能是一项用户友好的特性,它允许用户根据个人喜好更改网站的外观和风格。本文将深入探讨如何使用jQuery实现这一功能,同时也会涉及到CSS、JavaScript和图像资源的应用。 首先,jQuery是一个...

    jQuery实现网页换肤

    压缩包中的"Scripts"可能包含了实现换肤功能的JavaScript代码,这些代码可能包括了上述的事件绑定和样式切换。而"css"文件夹则可能包含了几种预设的皮肤样式,例如`skin1.css`, `skin2.css`等。在实际应用中,我们...

    css+js实现网站换肤

    在"css+js实现网站换肤"的场景下,我们将探讨如何利用CSS(层叠样式表)和JavaScript来实现这一功能。 首先,CSS是网页设计中的关键部分,用于定义元素的外观、布局和结构。在换肤功能中,我们可以创建多个CSS文件...

    qt5.12通过qss实现一键换肤以及Font Awesome字体在qt中的应用,欢迎大家下载使用!!!

    win10系统上基于qt5.12通过qss实现一键换肤以及Font Awesome字体在qt中的应用,欢迎大家下载使用!!!——————————————win10系统上基于qt5.12通过qss实现一键换肤以及Font Awesome字体在qt中的应用,...

    Qt 实现界面换肤功能

    在本文中,我们将深入探讨如何使用Qt框架来实现一个具有界面换肤、无边框窗口拖动、标题栏双击放大缩小以及自定义对话框功能的应用程序。Qt是一个跨平台的C++图形用户界面应用程序开发框架,广泛应用于桌面、移动和...

    jQuery实现网站换肤功能--带cookie默认为后点击后的颜色

    为了实现换肤,我们需要提前准备不同的皮肤样式。这通常通过定义多个CSS文件来完成,每个文件代表一种皮肤。例如,我们可以有`skin-red.css`、`skin-blue.css`等,每个文件包含对应的色彩主题。 3. **jQuery选择器...

    C#实现窗体换肤完整源码

    本教程将探讨如何在C#中实现窗体换肤功能,这是一个提高用户界面(UI)吸引力和交互性的关键特性。我们将主要关注以下几个方面: 1. **皮肤的概念**: 在软件开发中,皮肤通常指的是改变应用程序外观的视觉主题。...

    android 换肤项目(可以实现随机换肤)

    这个“android换肤项目”就是一个专门针对这一需求的实现,它结合了Dialog和ImageButton,同时具备随机换肤的功能。接下来,我们将详细探讨这个项目中的关键知识点。 1. **Dialog和ImageButton**: Dialog在...

    Javascript实现的换肤

    JavaScript实现的换肤功能在网页应用中非常常见,它允许用户根据个人喜好选择不同的主题或样式,提升用户体验。本文将深入探讨如何使用JavaScript来实现这一功能,并基于描述中的"FallBackCSS",推测这是一个用于在...

    android换肤原理实现

    要实现换肤,我们需要为不同的主题创建相应的资源文件,并在运行时根据用户的选取动态加载。 1. **字符串资源换肤**:`string.xml`文件定义了应用中的文本内容。为了实现换肤,可以为每个主题创建一个单独的`string...

    Flutter悬浮窗组件之实现快捷换肤、切换语言

    Flutter悬浮窗组件之实现快捷换肤、切换语言等开发调试功能模块

    C#实现窗体换肤完整源码(经典)

    使用这类库时,只需按照文档说明配置,即可轻松实现换肤功能。然而,选择第三方库时需要注意兼容性、性能以及是否支持持续更新。 在提供的源码中,“C#实现窗体换肤完整源码(经典)”可能包含了自定义控件的实现、...

    js实现网页换肤

    在网页设计中,提供换肤功能可以为用户提供个性化的体验,让网站更加吸引人。JavaScript(简称js)作为客户端脚本语言,非常适合用于实现这样的动态效果。本文将深入讲解如何利用JavaScript来实现网页换肤的功能。 ...

    jQuery实现换肤效果

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,因此非常适合用来实现换肤效果。本文将详细介绍如何利用jQuery来实现网站的换肤功能。 首先,我们需要理解换肤的基本原理。换肤...

    VC实现窗体换肤

    虽然在某些情况下这个消息不是必须处理的,但在实现换肤功能时,我们可以通过处理这个消息来保持窗体的直角边缘,而不是默认的圆角边缘。 5. **WM_PAINT**:当窗体的客户区域需要重绘时,该消息会被发送给窗体。...

Global site tag (gtag.js) - Google Analytics