草履虫的BLOG-网站换肤技术

很久没有更新,昨天看了下网站的PR值,由原来的0变成了3,哈哈,找工作烦中获得了一点YY的快感....
前一段有空都在做这样的一个案例:SVN+PHP(PDO+Smarty)+Ajax+一些前台效果(拖拽,Tooltip,换肤)等问题,目前还没有完成.预览可以看这里:http://mmchong.3322.org:81/work_xm_1/index.php(可能访问不了)有空会整理成一个个模块介绍下.最后会把整个案例做出来,相当于一个文章发布系统,这也是当时实习后决定要做的项目. 预览下换肤的图:

今天介绍的是换肤技术.
作者:草履虫
联系:caolvchong@gmail.com
首发:http://cceer.xmu.edu.cn/
换肤技术原理:很简单,动态改变需要的css文件就可以了.如果需要保存,设置cookie即可.
具体的说:
1.CSS设置部分: 通常,你需要写一个网站通用的CSS文件,该文件一般只控制css的位置布局,不设计颜色,背景布局然后有多个换肤方案的css文件,这里就只控制颜色,背景 2.JS部分: 有一个换肤函数,替换link中的需要的css 有cookie读写函数,用于保存设置

换肤函数可以这么写:

//====================换肤效果=====================
/*函数:change_css(css_id,css_document)
 *功能:自定义版面色彩样式,并写入cookie,保存
 *参数:
     css_id:要被替换的css文件在页面中的id
     css_document:要使用的css文件的路径
     cookie_name:要设置的该样式的cookie名称
 *返回值:
     无
 *--------------------------------*/
    function change_css(css_id,css_document,cookie_name){
        document.getElementById(css_id).setAttribute("href",css_document);
        set_cookie(cookie_name,css_document,365);//保存为1年,当然,你也可以把它分离出来,做为参数设置
    }

//====================cookie函数====================
/*--函数名:set_cookie
 *--功能:设置cookie,只能自定义一个cookie的名和值,设置多个时需要多次调用
 *--参数:
      c_name:自定义cookie名
      c_value:自定义cookie值
      可选c_expires:设置该cookie的存活时间,单位:天
      可选c_path:设置该cookie的路径
      可选c_domain:设置该cookie的域
      可选c_secure:设置是否安全cookie,1安全,0或不设置,不安全
 *--返回值:
       无
 *--------------------------------*/
    function set_cookie(c_name,c_value,c_expires,c_path,c_domain,c_secure){
      var cookie_string=c_name + "=" + escape(c_value);
      if(c_expires){
        var expires = new Date();
        expires.setTime(expires.getTime() + c_expires * 24 * 60 * 60 * 1000);
        cookie_string+=";expires="+expires;
      }
      if(c_path){
        cookie_string+=";path="+c_path;
      }
      if(c_domain){
        cookie_string+=";domain="+c_domain;
      }
      if(c_secure){
         cookie_string+=";secure";
      }
      document.cookie=cookie_string;
    }
/*--函数名:get_cookie
 *--功能:读取需要的cookie
 *--参数:
      c_name:要读取的cookie名
 *--返回值:
      value:要读取的cookie的值
 *--------------------------------*/
    function get_cookie(cookie_name){
       var cookie_pos = document.cookie.indexOf(cookie_name);
      // 如果找到了索引，就代表cookie存在，反之，就说明不存在。
      if (cookie_pos != -1){
         // 把cookie_pos放在值的开始，只要给值加1即可。
         cookie_pos += cookie_name.length + 1;
         var cookie_end = document.cookie.indexOf(";", cookie_pos);
         if (cookie_end == -1){
            cookie_end = document.cookie.length;
          }
         var value = unescape(document.cookie.substring(cookie_pos,cookie_end));
       }
      return value;
     }

//===================调用=====================
    window.onload = function() {
        var d_css_document=css_document;//默认的css文件,比如css/green.css
        var cookie = get_cookie(cookie_name);//读取cookie
        var css_document=cookie?cookie:d_css_document;//cookie是否存在
        change_css(css_id,css_document,cookie_name);//修改样式,当然,你要填入你自己的参数
    }

    
    比如:
      //这里的href写一个不存在的css,并设置id
      //换肤

==========================================================