jQuery-Theme-Skin-Beispiel ohne Aktualisierung, Erklärung_jquery

Die Funktion zum Wechseln des Theme-Skins wird in vielen Websites und Systemen verwendet. Benutzer können ihren bevorzugten Theme-Farbstil entsprechend dieser Funktion festlegen, was das Benutzererlebnis verbessert. Dieser Artikel konzentriert sich darauf, wie Sie mit jQuery die Funktion zum Wechseln von Themen-Skins mit einem Klick ohne Aktualisierung implementieren.

Das Prinzip der Implementierung dieser Funktion besteht darin, die aktuell von der Seite referenzierte Theme-CSS-Datei durch Klicken auf den definierten Theme-Stil zu ändern und den aktuellen Theme-Stil in ein Cookie oder in die Datenbank zu schreiben, damit der Benutzer ihn das nächste Mal erneut aufruft Auf der Seite wird der zuletzt festgelegte Themenstil aufgerufen.
Bereiten Sie den Design-Skin-Stil vor
Zuerst habe ich drei Stylesheet-CSS-Dateien vorbereitet, bei denen es sich um drei Stile von Themen-Skins handelt, sie in die Seite eingefügt und sie zwischen dem platziert.

<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" /> 

Beachten Sie, dass ich das Titelattribut zu jedem hinzugefügt habe. Außerdem habe ich die zweite und dritte CSS-Datei deaktiviert, was bedeutet, dass die erste CSS-Datei standardmäßig wirksam wird.
XHTML

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

Drei Designstile werden für die Klickumschaltung verwendet Beachten Sie, dass ich das id-Attribut jedem Li separat hinzugefügt habe.
CSS

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} 

Verwenden Sie CSS zum Rendern von XHTML, wobei sich ul#styles li.cur auf den Stil unter dem aktuell ausgewählten Thema bezieht. Ich verwende ein kleines Häkchen, um das aktuell ausgewählte Thema anzuzeigen.
jQeury
Zuerst müssen wir die jquery-Bibliothek und das jquery.cookie-Plug-in vorstellen. Das Plug-in jquery.cookie bietet leistungsstarke Cookie-Betriebsfunktionen für jQuery. Sie müssen kein kompliziertes natives Javascript schreiben, sondern rufen das Plug-in einfach direkt auf. Bezüglich der Verwendung dieses Plug-Ins lesen Sie bitte den Artikel auf dieser Website:

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

Wenn der Benutzer als Nächstes auf „Umschalten“ klickt, um ein Thema auszuwählen, werden die folgenden Aktionen ausgeführt: Abrufen des ausgewählten Themas (ID), Überprüfen der referenzierten CSS-Datei und ob der Wert des Titelattributs genau gleich ist den aktuell ausgewählten Theme-ID-Wert, dann die Theme-CSS-Datei anwenden, andere referenzierte CSS-Dateien deaktivieren, das aktuell ausgewählte Theme in ein Cookie schreiben, die Cookie-Ablaufzeit festlegen und schließlich die aktuell ausgewählte Theme-Schaltfläche (li) auf die aktuell ausgewählte setzen Zustand. Einzelheiten finden Sie im folgenden Code:

$("#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"); 
}); 

Beachten Sie, dass ich in diesem Beispiel den ausgewählten Stil im Benutzer-Cookie speichere. Der Cookie-Name ist „mystyle“, der Wert ist der aktuell ausgewählte Designwert und die vergangene Zeit beträgt 30 Tage, das heißt: läuft ab: 30
Als nächstes müssen Sie den Theme-Cookie-Wert lesen, wenn die Seite geladen wird. Wenn das Theme-Cookie vorhanden ist, rufen Sie die Theme-Stil-CSS-Datei auf, die dem Cookie-Wert entspricht, und setzen Sie den aktuellen Theme-Button-Status auf den ausgewählten Status. Rufen Sie den Standardstil auf. Der Code lautet wie folgt:

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"); 
} 

Fügen Sie die beiden oben genannten Codeteile zu $(function(){}) hinzu und die Arbeit ist abgeschlossen.
Es ist erwähnenswert, dass das in diesem Artikel verwendete Cookie den vom Benutzer gewählten Theme-Skin-Stil aufzeichnet. Wenn das Cookie jedoch abläuft oder der Benutzer das COOKIE des Browsers löscht oder der Benutzer zum Durchsuchen zu einem anderen Browser wechselt, Das aktuell eingestellte Theme wird ungültig. Damit der Benutzer den ausgewählten Theme-Stil dauerhaft speichern kann, muss das ausgewählte Theme den Benutzerinformationen entsprechen und in die Datenbank geschrieben werden. Der Benutzer kann das Theme beim nächsten Anmelden direkt lesen. Diese Methode sollte natürlich verwendet werden in Systemen mit Benutzerberechtigungen, wie Backend-Management-System, Personal Center usw.

Das Obige ist der gesamte Inhalt dieses Artikels. Der Inhalt ist sehr detailliert und für die Leser leicht zu verstehen und zu lesen.