Dans ce tutoriel, je vais vous montrer comment créer un sélecteur de style en utilisant jQuery et PHP. Le résultat final sera un sélecteur de style dynamique discret et entièrement dégradable qui sera rapide et facile à mettre en œuvre..

Étape 1: le HTML

Tout d’abord, nous devons créer notre fichier HTML de base et l’enregistrer sous le nom index.php:

              
 
Exemple de sélecteur de style
 
 
Accueil
 
Sur
 
Prestations de service
 
Des produits
 
Liens
 
Contact
 
 
 
 
Exemple de didacticiel NETTUTS
 
Contenu de la page… 
 
 
 
Pied de page… 
 
  
 
Choisissez votre style:
 
 
journée
 
Nuit
 
 
 
   

Vous verrez qu'il y a du PHP juste en dessous de l'attribut title dans la tête. C'est très simple - tout ce qu'il fait est de rechercher un cookie appelé "style" - s'il existe, il l'assigne à la variable locale (également appelée "style") et si le cookie ne pas existe, il attribue le thème par défaut ("jour") au $ style variable. Cette variable est ensuite répercutée dans l'attribut href de l'élément link (href = "css /.css ").

Vous verrez que le sélecteur de style est inclus ci-dessus dans notre code HTML. Il n'est pas nécessaire d'ajouter ceci à l'aide de JavaScript, car la méthode que nous utilisons permet au sélecteur de style de fonctionner lorsque JavaScript est désactivé. Les deux liens (jour et nuit) amènent l’utilisateur vers un fichier appelé style-switcher.php avec une chaîne de requête ajoutée spécifiant le thème correspondant (par exemple,. href = "style-switcher.php? style = jour").

J'ai aussi appelé le plugin jQuery appelé styleSwitcher. Cela n’a pas encore été mis au point (et bien au moment où vous le lirez), alors attendez!… Nous écrirons ce plugin à l’étape 4 de ce didacticiel..

Étape 2: le CSS

Maintenant, nous devons créer quelques feuilles de style CSS pour notre code HTML. J'ai décidé de ne créer que deux feuilles de style. L'une porte le thème "Jour" et l'autre le thème "Nuit". Je les ai nommées en conséquence. (day.css & night.css)

Le thème de la journée:

Le thème de la nuit:

Il est préférable de commencer par un style, puis de copier tous les sélecteurs dans la feuille de style alternative. Il suffit ensuite de modifier les diverses règles et déclarations CSS. Vous pouvez évidemment avoir autant de feuilles de style que vous le souhaitez, mais dans ce tutoriel, nous en utilisons deux à des fins d'illustration. De plus, nuit et jour vont bien ensemble en duo!

jour.css:

# dummy-element width: 2px; / * Nécessaire pour vérifier si StyleSheet a été chargé * / / * Réinitialisation * / body, ul, ol, li, img, formulaire, p, h1, h2, h3, h4, h5 , h6, blockquote margin: 0; rembourrage: 0; bordure: aucune; style de liste: aucun; poids de police: normal;  / * Général / En-tête * / body background: # 98beeb url (… /img/day-body-bg.jpg) repeat-x;  #container width: 60%; marge: 0 auto; largeur minimale: 400px; largeur maximale: 800px; position: relative;  h1 text-align: left; text-transform: majuscule; Couleur blanche; taille de la police: 1.4em; remplissage: 45px 30px 10px 30px;  / * Navigation * / #nav padding: 5px 5px 0 0; débordement caché;  #nav li display: inline; #nav a float: left; couleur: # 6195ce; poids de police: gras; texte-décoration: aucun; rembourrage: 3px 6px; marge gauche: 5px; fond blanc;  #nav a: survol color: # 2c5a8c; / * Bannière * / #banner height: 125px; fond: url (… /img/day-banner.jpg) center; bordure: blanc 5px; clarifier les deux;  / * Zone de contenu * / #content border: 10px solid white; fond blanc; couleur: # 2c5a8c; marge: 5px 0;  #contenu a font-weight: bold; #contenu a: hover text-decoration: underline; h2 padding: 0.3em 0; taille de la police: 1.4em;  p padding: 0.3em 0; / * Pied de page * / #foot background: white; couleur: # 1f3a57; text-align: center; bordure: blanc 10px; clarifier les deux;  #foot a text-decoration: none; poids de police: gras; couleur: # 2c5a8c;  #foot a: hover text-decoration: underline; / * Changement de style * / # changement de style position: absolute; largeur: 100%; en haut: 0; gauche: 0; à droite: 0; hauteur: 34px; fond: url # 79a3cc (… /img/day-ss-bg.jpg); bordure-bas: 1px blanc solide;  # style-switcher ul border-right: 1px blanc solide; Flotter à droite;  # style-switcher h4 display: inline; couleur: # 153c67; poids de police: gras; hauteur de ligne: 34px; rembourrage: 0 10px; float: gauche; bordure gauche: 1px blanc solide;  # style-switcher li display: inline; # style-switcher li a float: left; hauteur de ligne: 26px; Couleur blanche; arrière-plan: # 90a6bb; texte-décoration: aucun; rembourrage: 0 13px; affichage: en ligne; marge: 4px 4px 4px 0;  # style-switcher li a: survol background: # 3a5a7c;

nuit.css:

# dummy-element width: 2px; / * Nécessaire pour vérifier si StyleSheet a été chargé * / / * Réinitialisation * / body, ul, ol, li, img, formulaire, p, h1, h2, h3, h4, h5 , h6, blockquote margin: 0; rembourrage: 0; bordure: aucune; style de liste: aucun; poids de police: normal;  / * Général / En-tête * / body font-family: Calibri, "Arial Narrow", Arial, Sans-Serif; background: # 072952 url (… /img/night-body-bg.jpg) repeat-x;  #container width: 60%; marge: 0 auto; largeur minimale: 400px; largeur maximale: 800px; position: relative;  h1 text-align: left; text-transform: majuscule; Couleur blanche; taille de la police: 1.4em; remplissage: 45px 30px 10px 30px; famille de polices: "Times New Roman", Times, serif;  / * Navigation * / #nav padding: 5px 5px 0 0; débordement caché;  #nav li display: inline; #nav a float: left; couleur: # 010e2e; poids de police: gras; texte-décoration: aucun; remplissage: 8px 6px 3px 6px; taille de police: 0.8em; text-transform: majuscule; poids de police: 700; marge gauche: 5px; fond: url blanche (… /img/night-nav-bg2.jpg) repeat-x;  #nav a: survol color: # 2c5a8c; / * Bannière * / #banner height: 125px; fond: url (… /img/night-banner.jpg) center; bordure: blanc 5px; clarifier les deux;  / * Zone de contenu * / #content color: white; marge: 20px 0; rembourrage: 5px 0; border-top: 4px double blanc; bordure inférieure: 4px double blanc; famille de polices: "Times New Roman", Times, serif;  #contenu a font-weight: bold; #contenu a: hover text-decoration: underline; h2 padding: 0.3em 0; taille de la police: 1.4em;  p padding: 0.3em 0; / * Pied de page * / #foot color: white; taille de police: 0.8em; clarifier les deux;  #foot p text-align: center; rembourrage: 0;  #foot a text-decoration: none; poids de police: gras; Couleur blanche;  #foot a: hover text-decoration: underline; / * Changement de style * / # changement de style position: absolute; largeur: 100%; en haut: 0; gauche: 0; à droite: 0; hauteur: 34px;  # style-switcher ul float: left; # style-switcher h4 display: inline; Couleur blanche; poids de police: gras; hauteur de ligne: 34px; rembourrage: 0 10px; float: gauche;  # style-switcher li display: inline; # style-switcher li a float: left; hauteur de ligne: 34px; Couleur blanche; texte-décoration: aucun; rembourrage: 0 4px; marge gauche: 5px; affichage: en ligne;  # style-switcher li a: survoler background: white; couleur: # 13181c; fond: url blanche (… /img/night-ss-bg.jpg) répéter-x à gauche en bas; 

Ce n'est pas vraiment un tutoriel CSS, je ne vais donc pas approfondir ce qui précède, mais si vous avez des questions, n'hésitez pas à les poser dans la section commentaires. Et oui, je sais que min-width n'est pas supporté par les anciens navigateurs! ;)

Étape 3: style-switcher.php

C’est là que nous écrivons la fonctionnalité principale du sélecteur de style. Il ne s'agit en réalité que de quelques lignes de code PHP très basique. Vous devez créer un nouveau fichier appelé "style-switcher.php" et y copier les éléments suivants:

Ainsi, le code ci-dessus attribue la variable "style" GET à une variable locale. $ style variable. En d’autres termes, il prendra la valeur de la propriété style dans la chaîne de requête (style-switcher.php? Style =journée). Il installe ensuite un cookie (pendant une semaine) appelé "style" - nous pourrons le récupérer sur notre principal index.php avec le code présenté à l'étape 1 (rappelez-vous ce petit morceau de PHP dans le tête?). Ensuite, il vérifie si "js" est ajouté à la chaîne de requête. Si c'est le cas, nous savons que JavaScript (que nous n'avons pas encore écrit) a demandé ce script PHP. La condition else survient lorsqu'un utilisateur n'active pas JavaScript et redirige l'utilisateur vers le référent (c'est-à-dire la page d'où il vient de s'afficher). Cela deviendra plus clair une fois que nous aurons écrit le texte jQuery.!

Étape 4: Le matériel jQuery

Vous pouvez, si vous le souhaitez, vous arrêter ici!… La solution jusqu'à présent fonctionnera parfaitement, mais comme je l'ai indiqué dans l'introduction, nous allons le rendre encore plus cool avec un peu de jSuery awesomeness! Non seulement nous allons permettre à l'utilisateur de changer de thème sans rafraîchir la page, mais nous allons aussi ajouter un effet de fondu vraiment cool… Je veux dire, quel type de tutoriel jQuery serait-il s'il n'y avait pas de fondu!?!?

Évidemment, tout cela est possible sans avoir à créer de plug-in, mais je pensais que ce serait une bonne expérience d'apprentissage pour tous. En outre, cela nous permet d'adapter ou de transférer le code rapidement et facilement..

Tout d'abord, créons un fichier appelé "styleswitcher.jquery.js".

Créer un nouveau plugin dans jQuery est extrêmement simple. tout ce qu'il faut c'est le code suivant:

jQuery.fn.styleSwitcher = function () // Le code va ici ...

Donc, nous voulons d’abord préciser ce qui se passe lorsqu’un des liens de la feuille de style est cliqué div # style-switcher):

/ * "this" fait référence à chaque instance de l'élément sélectionné, * Donc, si vous appelez le plugin comme ceci: * $ ('a'). styleSwitcher (); alors, ce qui suit se produirait * lorsque vous cliquez sur une ancre dans le document: * / $ (this) .click (function () // Nous passons cet objet element à la fonction // loadStyleSheet. loadStyleSheet (this); // Et nous renvoyons false. Return false;);

loadStyleSheet:

Maintenant, nous devons écrire le loadStyleSheet une fonction:

function loadStyleSheet (obj) // Ajoute une nouvelle div à body: $ ('body'). append ('
'); // Donne à body une hauteur de 100% (pour résoudre le problème IE6): $ ('body'). Css (height: '100%'); // Sélectionne la nouvelle div créée et applique quelques styles: $ ('# superposition') .css (display: 'none', position: 'absolute', haut: 0, left: 0, width: '100%', height : '100%', zIndex: 1000, background: 'url noir (img / loading.gif) centre sans répétition') // Maintenant, fondez le div (#overlay): .fadeIn (500, function ()  // Ce qui suit arrivera quand la div aura fini de se fondre en: // Demande le script PHP (obj.href) avec l'élément de chaîne de requête "js" ajouté: $ .get (obj.href + '& js', function (data) / / Sélectionnez l'élément de lien dans l'en-tête du document (#stylesheet) et modifiez l'attribut href: $ ('# stylesheet'). Attr ('href', 'css /' + data + '.css'); // Vérifiez si le nouveau CSS StyleSheet a chargé: cssDummy.check (function () // Lorsque StyleSheet est chargé, fermez et supprimez le #overlay div: $ ('# superposition'). FadeOut (500, function () $ (this) .remove (););););); 

J'espère que les commentaires l'ont suffisamment expliqué. Les plus attentifs d’entre vous auront remarqué que nous appelons une fonction actuellement non définie (cssDummy.check ()). Ne t'inquiète pas car c'est la prochaine étape…

cssDummy:

Nous avons besoin d'un moyen de tester si une StyleSheet a été chargée. Si elle a été chargée, nous pouvons faire disparaître la division superposée, mais dans le cas contraire, nous devrons continuer à vérifier jusqu'au chargement. J'ai fait quelques recherches sur le net et j'ai trouvé un moyen fiable de tester une telle chose. Cela implique de tester la largeur calculée d'un élément factice. La largeur de cet élément sera définie dans le CSS - et donc la largeur calculée de l'élément ne sera égale à la largeur définie dans le CSS lorsque la feuille de style est chargée. J'espère que vous comprenez maintenant pourquoi nous avons dû inclure cette règle "# élément factice" dans chaque fichier CSS…

Alors, la voici:

var cssDummy = init: function () // Ajoute "dummy-element" div au corps: $ ('
') .appendTo (' corps '); , check: function (callback) // Vérifie si calculé avec égal à ce qui est défini dans StyleSheets (2px): if ($ ('# élément factice'). width () == 2) callback (); // S'il n'a pas encore été chargé, il suffit de réactiver cette // fonction toutes les 200 millisecondes jusqu'à son chargement: else setTimeout (function () cssDummy.check (callback), 200); 

Et, juste à la fin de notre plugin, nous allons appeler le cssDummy.init une fonction:

cssDummy.init ();

Avaient fini! Le plugin entier ressemble maintenant à ceci:

jQuery.fn.styleSwitcher = function () $ (this) .click (function () loadStyleSheet (this); return false;); function loadStyleSheet (obj) $ ('body'). append ('
'); $ ('body'). css (hauteur: '100%'); $ ('# superposition') .css (display: 'none', position: 'absolute', haut: 0, gauche: 0, largeur: '100%', hauteur: '100%', zIndex: 1000, arrière-plan : 'url noir (img / loading.gif) centre sans répétition') .fadeIn (500, function () $ .get (obj.href + '& js', fonction (données) $ ('# feuille de style') .attr ('href', 'css /' + data + '.css'); cssDummy.check (function () $ ('# overlay'). fadeOut (500, function () $ (this) .remove ();););););  var cssDummy = init: function () $ ('
') .appendTo (' corps '); , vérifier: function (rappel) if ($ ('# élément factice'). width () == 2) callback (); else setTimeout (function () cssDummy.check (rappel), 200);  cssDummy.init (); 

Nous pouvons maintenant appeler le plugin jQuery comme ceci:

$ ('# style-switcher a'). styleSwitcher ();

Fini!

Si vous n'êtes pas sûr de la structure de fichier, téléchargez les fichiers src pour les consulter. J'espère que vous avez apprécié la lecture de ce tutoriel. Comme toujours, si vous avez des questions, n'hésitez pas à les poser ci-dessous! Si vous avez apprécié cette publication, s'il vous plaît Digg il!