jquery 样式选择器插件_styleSwitch 1.0

插件作用
实现多种样式设置并保存cookie
使用方法
//click a link to change style and save it to cookie
      //用户点击时改变样式并保存cookie
$(".width-switch").click(function(){
      $(".width-switch").styleSwitch({
         selector:".widthstyles",
         stylename:"widthstyles",
         theClickElementRel:$(this).attr("rel"),
         expeirdays:10
      });
});

$(".font-switch").click(function(){
      $(".font-switch").styleSwitch({
         selector:".fontstyles",
         stylename:"fontstyles",
         theClickElementRel:$(this).attr("rel"),
         expeirdays:10
      });
});
});

源码：
// JavaScript Document
/**
* styleSwitch 1.0 plugin
* -----------------------------------------------
* the plugin to manage user setted style
* and change styles for user when user click the sytle link button
* Anthor:Rain.zhai
* Date: 2010/5/8
* weblink: http://hi.baidu.com/shiryu963/mo ... 8af08db05c07cd92a92
*/
(function($) {
//styleSwitch to response user selected style link
//styleSwitch方法对用户的点击作出响应
$.fn.styleSwitch = function(o) {
o = $.extend({
      selector:"", //样式表link的class名
      stylename:"style",//样式名称，用作cookie 名称，可以任意命名
      theClickElementRel:"",//用户点击链接
      expeirdays:10 //cookie有效期
}, o || {});

    var temp_selector = o.selector;
   var temp_stylename = o.stylename;
   var temp_expires = o.expeirdays;
   var temp_rel = o.theClickElementRel;

   //check if there a stylesheet title  attribute value equal the clicked link's rel value
            //遍历链接的样式表检查是否title属性值等于被点击链接的rel属性值
   $(temp_selector).each(function(i){
         this.disabled = true;
         if (this.getAttribute('title') == temp_rel){this.disabled = false;}
   });

               //销毁一个cookie
   $.eraseStyleCookie(temp_stylename);

   //create a cookie but the value must the user clicked link rel value
            //创建一个cookie 其值是当前点击链接的rel值
   $.createStyleCookie(temp_stylename, temp_rel, temp_expires);
}

//check if user has cookie in this page
      //检查用户该页面是否有cookie存在
$.checkCookieForStyle = function checkCookieForStyle(temp_linkselector,temp_linkstylename){

         //read the cookie by the temp_linkstylename
                              //通过temp_linkstylename参数来读取cookie
         var cookieHistoryStyleLinkName = $.readStyleCookie(temp_linkstylename);

         //if the return form cookie is not null or empty check the stylesheet title vale == the cookieHistoryStyleLinkName
                              //如果cookie不为null和空，将cookie的值与样式表链接进行比较
         if (cookieHistoryStyleLinkName!=null && cookieHistoryStyleLinkName!=""){
            $(temp_linkselector).each(function(i){
               this.disabled = true;
               if (this.getAttribute('title') == cookieHistoryStyleLinkName){this.disabled = false;}
            });
            return false;
         }
   }

//create a new cookie for user
      //为当前用户创建一个新的cookie
$.createStyleCookie = function createStyleCookie(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=/";
   }
   //读取cookie方法
   $.readStyleCookie=function readStyleCookie(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;
   }
   //erase a cookie for user
            //销毁cookie方法
   $.eraseStyleCookie=function eraseStyleCookie(name){
      $.createStyleCookie(name,"",-1);
   }

})(jQuery);
/*
* the end of the plugin code
* -----------------------------------------------
*/

兼容ie 6/7/8,FF3，chrome，opera，safari
原文:http://hi.baidu.com/shiryu963/bl ... db05c07cd92a92.html

jquery 样式选择器插件_styleSwitch 1.0

有话要说