如何使此樣式表swincether使用Cookie

我發現tvanfosson retheme插件here。我簡化了插件以適應我的需要。它工作正常。我有一個帶數字選項值的下拉選擇列表來選擇樣式表。但是，我需要爲每種風格設置一個cookie。該cookie已創建，但無法保留cookie。這裏是修改後的插件：如何使此樣式表swincether使用Cookie

;(function($) { 

    $.fn.extend({ 
     retheme: function(options,callback) { 
      options = $.extend({}, $.Retheme.defaults, options); 

      this.each(function() { 
       new $.Retheme(this,options,callback); 
      }); 
      return this; 
     } 
    }); 

    $.Retheme = function(ctl, options, callback) { 
     if (options.styleSheet.match(/^\w/)) { 
      options.styleSheet = '#' + options.styleSheet; 
     } else { 
      //add checking based on url 
      options.styleSheet = $('link[href*=' + options.baseUrl + ']'); 
     } 

     $(ctl).filter('select').change(function() { 
      loadTheme(themeSelector(this), options); 
      if (callback) callback.apply(this); 
      return false; 
     }); 
    }; 

    function themeSelector(ctl) { 
     var $this = $(ctl); 
     var theme = $this.attr('href'); 
     if (!theme) { 
      theme = $this.val(); 
     } 

     return theme; 
    } 

    function loadTheme(theme, options) { 
     //var cookedHref = options.baseUrl + theme; 
     //$.cookie('cthemeHref', cookedHref, { expires: 1 }); 
     //var themeHref = $.cookie('cthemeHref'); 

     var themeHref = options.baseUrl + theme; 

     if (!themeHref.match(/\.css$/)) { 
      themeHref += '.css'; 
     } 

     var styleSheet = $(options.styleSheet); 

     // set a cookie 
     $.cookie('links', styleSheet, {expires: 1, path: '/'}); 

     var speed = options.speed; 
     var delay = options.delay; 

     var overlay = buildOverlay(); 
      overlay.fadeIn(speed, function() { 
       styleSheet.attr('href', themeHref); 
       // set a cookie 
       $.cookie('css', themeHref , {expires: 1, path: '/'}); 
       alert($.cookie('css')); 
       //$.get(themeHref, function() { // don't want to keep loading 
        setTimeout(function() { 
        overlay.fadeOut(speed, function() { 
         dieOverlay(); 
        }); 
        }, delay); 
       //}); 
       }); 
    }; 

    $.Retheme.defaults = { 
     baseUrl: '/styles/', 
     styleSheet: '', 
     speed: 'slow', 
     delay: 500 
    }; 

})(jQuery);

然後我把以下內容抓住cookie。問題是href屬性中的所有鏈接被單個選定的cookie取代，而我想每次選取或激活一個cookie用於每個選定的鏈接。

if($.cookie('css')) { 
    //$('link').attr('href', $.cookie('css')); //kill all other hrefs 
    $.cookie('links').attr('href', $.cookie('css')); // $.cookie('links') is not a function 
} else { 
$(function() { 
    $('#edit-apple').retheme({baseUrl: '/apple/style-'}); 
    $('#edit-orange').retheme({baseUrl: '/orange/style-'}); 
    $('#edit-mango').retheme({baseUrl: '/mango/style-'}); 
}

注：在蘋果的文件夾我的樣式風格1.CSS，風格2.css等。隨着否則retheme失敗。沒有別的，它的作品，但沒有抓住cookie。

一如既往的任何幫助將非常感激。謝謝

來源

2010-02-12 swan

什麼是存儲在$.cookie('css')和$.cookie('links')內的值？

爲什麼不把一個css文件名存儲在一個cookie中，然後當頁面加載時，檢查這個cookie的值。如果cookie存在，且該值有效（包含一組有限的允許值），則使用該值並加載樣式表文件。如果cookie無效或者沒有任何值，則加載默認樣式表頁面。

你也可以看看jquery ui themeroller如何實現主題切換器here。

來源

2010-02-13 00:16:20

@Donny Kurnia：我猜我做了太多的餅乾。其實我需要的可能是$ .cookie（'css'）部分。仍然在工作，並有麻煩來管理幾個不同的目標鏈接和幾個相關的選擇框，如水果和蔬菜的東西與他們的孩子的風格。這就是爲什麼我需要帶回調函數的主題切換器。並感謝這個鏈接，如果我只有一個目標鏈接可以使用，那麼這將更加容易:) – swan 2010-02-13 05:06:09

如何使此樣式表swincether使用Cookie

回答

相關問題