jQuery實現無刷新切換主題皮膚功能

時間 2020-06-09

原文原文鏈接

主題皮膚切換功能在不少網站和系統中應用，用戶能夠根據此功能設置本身喜歡的主題顏色風格，加強了用戶體驗。本文將圍繞如何使用jQuery實現點擊無刷新切換主題皮膚功能。javascript

查看演示DEMO：https://www.helloweba.net/demo/style-switch/css

實現該功能的原理就是經過點擊定義的主題樣式，改變頁面當前引用的主題CSS文件，而且將當前的主題樣式寫入cookie中或者寫入數據庫中，以便下次該用戶從新訪問頁面時，調用的就是上次設置好的主題樣式。html

準備主題皮膚樣式java

首先，我準備了三個樣式表CSS文件，分別是三種風格的主題皮膚，將其引入頁面，放置在頁面的<head>之間。jquery

<link title="default" rel="stylesheet" type="text/css" href="css/default.css" /> <link title="blue" rel="stylesheet" type="text/css" href="css/blue.css" disabled="disabled" /> <link title="brown" rel="stylesheet" type="text/css" href="css/brown.css" disabled="disabled" />

注意我給每一個<link>添加了title屬性，是由用處的，另外我禁用了第2個和第3個CSS文件，就是默認起做用的是第1個CSS文件。web

XHTML數據庫

<ul id="styles"> <li id="default">經典</li> <li id="blue">淡藍</li> <li id="brown">棕色</li> </ul>

三種主題風格用於點擊切換，注意我分別給每一個li加了id屬性。瀏覽器

CSScookie

ul#styles{margin-top:10px} 
ul#styles li{float:left; width:50px; height:40px; line-height:40px; padding:2px;  
margin-left:10px; border:1px solid #fff; text-align:center; color:#fff; cursor:pointer} 
ul#styles li.cur{border:1px solid #369; background-image:url(images/selected.gif);  
background-repeat:no-repeat; background-position:4px 32px} 
ul#styles li#default{background-color:#162934;} 
ul#styles li#blue{background-color:#90c5e7} 
ul#styles li#brown{background-color:#601f00}

用CSS渲染XHTML，其中ul#styles li.cur是指當前主題選中下的樣式，我用一個小勾表示當前選中的主題。app

jQeury

首先咱們要引入jquery庫和jquery.cookie插件。jquery.cookie插件爲jQuery提供了強大的cookie操做功能，你不用去寫複雜的原生的javascript，只管直接調用該插件就行。關於該插件的使用，請閱讀本站文章：使用jQuery操做Cookies

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script>

接下來，當用戶點擊切換選擇主題時，要發生如下動做：獲取選擇的主題（id），查看引用的CSS文件，若是發現其title屬性值正好與當前選中的主題id值相等，則應用該主題CSS文件，同時將其餘引用的CSS文件禁用，而且將當前選中的主題寫入cookie中，設置cookie過時時間，最後將當前選中的主題按鈕（li）設置爲當前選中狀態。具體看下面的代碼：

$("#styles li").click(function(){ var style = $(this).attr("id"); $("link[title='"+style+"']").removeAttr("disabled"); $("link[title!='"+style+"']").attr("disabled","disabled"); $.cookie("mystyle",style,{expires:30}); $(this).addClass("cur").siblings().removeClass("cur"); });

注意，在本例中我將選中的樣式保存在用戶cookie中，cookie名稱爲」mystyle「，值爲當前選中的主題值，過去時間爲30天，即：expires:30

接着須要作的是頁面載入時，讀取主題cookie值，若是主題cookie存在則調用cookie值對應的主題樣式CSS文件，而且設置當前主題按鈕狀態爲選中狀態，反之，則調用默認樣式。代碼以下：

var cookie_style = $.cookie("mystyle"); if(cookie_style==null){ $("link[title='default']").removeAttr("disabled"); $("#styles li#default").addClass("cur"); }else{ $("link[title='"+cookie_style+"']").removeAttr("disabled"); $("#styles li[id='"+cookie_style+"']").addClass("cur"); $("link[title!='"+cookie_style+"']").attr("disabled","disabled"); }

將以上兩段代碼加入到$(function(){})中，工做到此完成，去看看效果吧。

值得一提的是，本文應用的cookie記錄用戶所選擇設置的主題皮膚樣式，可是當cookie到期或者用戶清除了瀏覽器的COOKIE，亦或者用戶換用其餘瀏覽器瀏覽時，當前設置的主題就會失效。爲了讓用戶永久保存選擇的主題樣式，必須將所選的主題與用戶信息對應，並寫入數據庫，下次該用戶登陸就能夠直接讀取主題，固然，該方法應用在有用戶權限範圍的系統，如後臺管理系統，我的中心等。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。