sélecteur de feuilles de style jquery automatique

Question

J'ai vu beaucoup de commutateurs CSS qui placent un bouton permettant à l'utilisateur de changer de style pour l'adapter à son goût. Je suis à la recherche d'une solution similaire que je n'ai pas encore trouvée.

C'est le plus proche: http://net.tutsplus.com/demos/03_jQueryStyleSwitcher/demo/index.php#

Je veux que ma page se fanent d'une feuille de style à l'autre toutes les x secondes, change complètement toutes les css x secondes. Je veux le faire en jquery pour la simplicité et quelques belles transitions. Encore une fois, je veux que cela se produise AUTOMATIQUEMENT, sans le clic d'un bouton. Quelqu'un peut-il voir un code qui peut le faire?

Answer 1

Vous pouvez récupérer le code qui charge réellement la feuille de style et le déclencher à partir d'un appel setInterval au lieu d'un clic sur un bouton. Vous devez fournir l'URL de la feuille de style. Cela pourrait être stocké dans un tableau javascript et vous pourriez simplement faire une rotation à travers les éléments du tableau (ou en choisir un au hasard) dans la fonction déclenchée par le temporisateur d'intervalle. Vous avanceriez alors l'index (taille de tableau de mod) pour obtenir le prochain style à afficher.

var styles = [ '/example.com/css/style1.css', '/example.com/css/style2.css' ]; 
var currentStyle = 0; 

setInterval(function() { 
     currentStyle = (currentStyle + 1) % styles.length; 
     loadStylesheet(currentStyle); 
}, 5000); 

Mise à jour: J'ai passé un peu de temps aujourd'hui convertir l'exemple en un plugin qui fonctionne pour moi avec une sélection. Vous pouvez trouver le code sur mon blog, http://farm-fresh-code.blogspot.com/2009/08/jquery-theme-manager-plugin.html. Voici comment je pourrais probablement procéder pour l'utiliser. Cela fonctionnerait avec theme1.css, theme2.css, etc. Ce sont des styles aux urls: /example.com/styles/theme1.css, ...

Script:

var currentTheme = 0; 
var themes = $('.theme'); 
themes.retheme({ 
    baseUrl: '/example.com/styles', 
    loadingImg: '/example.com/images/image.gif' 
}); 

setInterval(function() { 
    currentTheme = (currentTheme + 1) % themes.length; 
    themes.eq(currentTheme).trigger('click'); 
}); 

Html:

<input type='hidden' class='theme' value='theme1' /> 
<input type='hidden' class='theme' value='theme2' /> 
<input type='hidden' class='theme' value='theme3' /> 

démo:

une démo du code utilisant à la fois une sélection et des liens se trouvent à http://myweb.uiowa.edu/timv/retheme-demo.