Exemple d'habillage de thème de changement de non-actualisation jQuery explication_jquery

La fonction de changement de skin de thème est utilisée dans de nombreux sites Web et systèmes. Les utilisateurs peuvent définir leur style de couleur de thème préféré en fonction de cette fonction, ce qui améliore l'expérience utilisateur. Cet article se concentrera sur la façon d'utiliser jQuery pour implémenter la fonction de changement de skin de thème en un seul clic sans actualiser.

Le principe de mise en œuvre de cette fonction est de changer le fichier CSS du thème actuellement référencé par la page en cliquant sur le style de thème défini, et d'écrire le style de thème actuel dans un cookie ou dans la base de données pour qu'à la prochaine visite de l'utilisateur la page, ce qu'on appelle est le style de thème défini la dernière fois.
Préparer le style de skin du thème
Tout d'abord, j'ai préparé trois fichiers CSS de feuille de style, qui sont trois styles de skins de thème, je les ai introduits dans la page et je les ai placés entre le 93f0f5c25f18dab9d176bd4f6de5d30e

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

Notez que j'ai ajouté l'attribut title à chaque 2cdf5bf648cf2f33323966d7f58a7f3f à dessein. De plus, j'ai désactivé les deuxième et troisième fichiers CSS, ce qui signifie que le premier fichier CSS prend effet par défaut.
XHTML

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

Trois styles de thème sont utilisés pour le changement de clic Notez que j'ai ajouté l'attribut id à chaque li séparément.
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} 

Utilisez CSS pour rendre le XHTML, où ul#styles li.cur fait référence au style sous le thème actuellement sélectionné. J'utilise une petite coche pour indiquer le thème actuellement sélectionné.
jQeury
Nous devons d’abord présenter la bibliothèque jquery et le plug-in jquery.cookie. Le plug-in jquery.cookie fournit de puissantes fonctions d'opération de cookies pour jQuery. Vous n'avez pas besoin d'écrire du javascript natif compliqué, appelez simplement le plug-in directement. Concernant l'utilisation de ce plug-in, merci de lire l'article sur ce site :

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

Ensuite, lorsque l'utilisateur clique pour sélectionner un thème, les actions suivantes se produiront : obtenir le thème sélectionné (id), vérifier le fichier CSS référencé, et s'il s'avère que la valeur de son attribut de titre est exactement égale à la valeur de l'identifiant du thème actuellement sélectionné, puis appliquez le fichier CSS du thème, désactivez les autres fichiers CSS référencés, écrivez le thème actuellement sélectionné dans un cookie, définissez le délai d'expiration du cookie et enfin définissez le bouton du thème actuellement sélectionné (li) sur le thème actuellement sélectionné. État. Voir le code ci-dessous pour plus de détails :

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

Notez que dans cet exemple, j'enregistre le style sélectionné dans le cookie utilisateur. Le nom du cookie est "mystyle", la valeur est la valeur du thème actuellement sélectionné et le temps passé est de 30 jours, c'est-à-dire : expire : 30
Ce qu'il faut faire ensuite est de lire la valeur du cookie de thème lors du chargement de la page. Si le cookie de thème existe, appelez le fichier CSS de style de thème correspondant à la valeur du cookie et définissez l'état actuel du bouton de thème sur l'état sélectionné. appelle le style par défaut. Le code est le suivant :

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

Ajoutez les deux morceaux de code ci-dessus à $(function(){}) et le travail est terminé.
Il convient de mentionner que le cookie utilisé dans cet article enregistre le style de thème choisi par l'utilisateur, mais lorsque le cookie expire ou que l'utilisateur efface le COOKIE du navigateur, ou que l'utilisateur passe à un autre navigateur pour naviguer, le thème actuellement défini deviendra invalide. Pour que l'utilisateur puisse enregistrer définitivement le style de thème sélectionné, le thème sélectionné doit correspondre aux informations de l'utilisateur et être écrit dans la base de données. L'utilisateur pourra lire directement le thème lors de sa prochaine connexion. Bien entendu, cette méthode doit être utilisée. dans les systèmes avec des autorisations d'utilisateur, tels que le système de gestion backend, le centre personnel, etc.

Ce qui précède représente l'intégralité du contenu de cet article. Le contenu est très détaillé et facile à comprendre et à lire pour les lecteurs. J'espère que tout le monde pourra y gagner quelque chose !