Astuce Comment créer un sélecteur de thème en 200 secondes

Avez-vous déjà vu des sites proposant une sorte de "sélecteur de couleurs" dans la section en-tête? Vous voulez savoir comme il est facile de reproduire? Je vais vous montrer dans 200 secondes, en utilisant jQuery.

Le screencast

Certes, ceci est un exemple très simple. Qu'attendez-vous de plus dans 200 secondes! :) Mais, cela peut facilement être étendu pour importer de nouvelles feuilles de style, si vous le souhaitez.

Le jQuery final

 var colorOptions = 'noir, bleu, orange, rouge, vert'.split (', '), colorDivs = [], colorsContainer = $ (' # couleursContainer '); pour (var i = 0, len = colorOptions.length; i < len; i++ )  var div = $('
') .css (' background ', colorOptions [i]) [0]; colorDivs.push (div);  colorsContainer.append (colorDivs); $ ('# header'). hover (function () colorsContainer .fadeIn (200) .children ('div') .hover (function () $ ('h2'). css ('color', $ ) .css ('backgroundColor')););, function () colorsContainer.fadeOut (200););

Conclusion

J'ai dû faire un zoom sur ce screencast, alors n'hésitez pas à discuter / poser des questions dans les commentaires! J'espère que tu as aimé! Aimez-vous les astuces "deux par semaine" que tous les sites de Tuts font maintenant??

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..