Un sélecteur de style - Mais de quoi parle-t-on ici ? En effet, le titre peu laissé perplexe, mais dans les faits, le sélecteur de style permet d'intégrés 2,3 voir 4 feuilles de style différentes dans votre page. Un bon exemple, regardé dans le coin supérieur droit de PcKULT.NET. Vous y verrez mon sélecteur pour afficher PcKULT.NET en Bleu ou en Noir. Le principe expliqué ci-dessous grâce à jQuery est le même.
Feuille de style par défaut
Il est impératif de s'assurer d'insérer dans votre page, la feuille de style qui sera utilisé par défaut.
<link rel="stylesheet" href="/default.css" type="text/css">
Nous allons maintenant insérer la liste de nos autres feuilles disponible. Nous avons donc mis les choix dans une liste pour le moment. Il vous suffira de mettre celle-ci en forme si vous le désirez.
<ul>
<li><a id="css-rouge" href="#rouge">Rouge</a></li>
<li><a id="css-bleu" href="#bleu">Bleu</a></li>
<li><a id="css-noir" href="#noir"">Noir"</a></li>
</ul>
<li><a id="css-rouge" href="#rouge">Rouge</a></li>
<li><a id="css-bleu" href="#bleu">Bleu</a></li>
<li><a id="css-noir" href="#noir"">Noir"</a></li>
</ul>
jQuery
Voici maintenant le code jQuery vous permettant de changer instantanément le style lors du clique d'un visiteur sur une autre feuille de style.
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Rouge
$("#css-rouge").click(function() {
$("link[rel=stylesheet]").attr({href : "Rouge.css"});
});
// Bleu
$("#css-bleu").click(function() {
$("link[rel=stylesheet]").attr({href : "Bleu.css"});
});
// Vert
$("#css-noir").click(function() {
$("link[rel=stylesheet]").attr({href : "Noir.css"});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// Rouge
$("#css-rouge").click(function() {
$("link[rel=stylesheet]").attr({href : "Rouge.css"});
});
// Bleu
$("#css-bleu").click(function() {
$("link[rel=stylesheet]").attr({href : "Bleu.css"});
});
// Vert
$("#css-noir").click(function() {
$("link[rel=stylesheet]").attr({href : "Noir.css"});
});
});
</script>
Ajouter aux favoris
Bookmarker
Envoyer par mail
Vu: 698
Rétrolien(0)
Adresse URI pour un rétrolien sur cet articleCommentaires (0)
