web-dev-qa-db-fra.com

Comment changer dynamiquement des thèmes après avoir cliqué sur un menu déroulant de thèmes

J'utilise bootstrap pour l'interface du site que je développe. Je prévois également d'intégrer les thèmes bootswatch à mon site. J'ai créé un menu déroulant contenant les différents thèmes de bootswatch Mon problème est de savoir comment changer de thème lorsque je clique sur l'un des thèmes du menu déroulant?

twitter-bootstrapbootswatch
30
Ferdinand Balbin

Violon: http://jsfiddle.net/82AsF/ (cliquez sur la liste déroulante des thèmes dans la barre de navigation)
Donnez à vos liens une classe theme-link et un data-theme valeur du nom du thème comme ceci:

<a href="#" data-theme="amelia" class="theme-link">Amelia</a>

Ensuite, définissez vos thèmes dans une variable globale comme ceci:

var themes = {
    "default": "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css",
    "amelia" : "//bootswatch.com/amelia/bootstrap.min.css",
    "cerulean" : "//bootswatch.com/cerulean/bootstrap.min.css",
    "cosmo" : "//bootswatch.com/cosmo/bootstrap.min.css",
    "cyborg" : "//bootswatch.com/cyborg/bootstrap.min.css",
    "flatly" : "//bootswatch.com/flatly/bootstrap.min.css",
    "journal" : "//bootswatch.com/journal/bootstrap.min.css",
    "readable" : "//bootswatch.com/readable/bootstrap.min.css",
    "simplex" : "//bootswatch.com/simplex/bootstrap.min.css",
    "slate" : "//bootswatch.com/slate/bootstrap.min.css",
    "spacelab" : "//bootswatch.com/spacelab/bootstrap.min.css",
    "united" : "//bootswatch.com/united/bootstrap.min.css"
}

(Veuillez héberger ces fichiers css de bootswatch sur votre propre serveur lorsque vous faites cela - je ne fais que des hotlinks car je n'ai pas de serveur sous la main)
Ensuite, utilisez le code jQuery suivant:

$(function(){
   var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
    themesheet.appendTo('head');
    $('.theme-link').click(function(){
       var themeurl = themes[$(this).attr('data-theme')]; 
        themesheet.attr('href',themeurl);
    });
});
58
Kevin Pei

le principal problème avec la solution ci-dessus si la page est actualisée, le thème a disparu. J'ai trouvé cet article très utile concernant le thème persistant dans le navigateur, car il enregistre les paramètres dans le stockage du navigateur.

j'espère que ça t'aide

http://wdtz.org/bootswatch-theme-selector.html

4
Umar Abbas

La solution fournie par Kevin est excellente. Je viens de passer du temps à essayer de comprendre comment je peux le faire fonctionner avec les bibliothèques de démarrage locales.

La valeur d'attribut href typique:

"~/lib/bootstrap/dist/css/bootstrap.min.css"

Mais dans ce cas:

        var themes = {

        "default": "lib/bootstrap/dist/css/bootstrap.min.css",
        "amelia": "lib/bootswatch/amelia/bootstrap.min.css",
        "cerulean": "lib/bootswatch/cerulean/bootstrap.min.css",
        "cosmo": "lib/bootswatch/cosmo/bootstrap.min.css",
        "cyborg": "lib/bootswatch/cyborg/bootstrap.min.css",
        "flatly": "lib/bootswatch/flatly/bootstrap.min.css",
        "journal": "lib/bootswatch/journal/bootstrap.min.css",
        "readable": "lib/bootswatch/readable/bootstrap.min.css",
        "simplex": "lib/bootswatch/simplex/bootstrap.min.css",
        "slate": "lib/bootswatch/slate/bootstrap.min.css",
        "spacelab": "lib/bootswatch/spacelab/bootstrap.min.css",
        "united": "lib/bootswatch/united/bootstrap.min.css"
    }
1
lucas

J'ai basé la mienne sur la réponse de @ KevinPei pour créer une liste déroulante automatique en utilisant jQuery, Bootstrap et Bootswatch pour ajouter une liste déroulante à la barre de navigation qui met automatiquement à jour le thème à la valeur sélectionnée.

Violon: https://jsfiddle.net/davfive/uwseLLzf/show

Le code fonctionne très bien dans la pratique. Cependant, dans jsfiddle, il existe deux comportements étranges:

  1. Parfois, la liste déroulante s'étend à tout l'écran
  2. La couleur du survol/survol de la liste déroulante ne s'affiche pas dans jsfiddle.
<html lang="en">
<head>
    <!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <a class="navbar-brand">Bootswatch Theme Changer</a>
    <div class="nav navbar-nav pull-right">
        <li id="theme-button" class="dropdown">
          <a href="#"  class="dropdown-toggle" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
          <ul class="dropdown-menu ">
            <li><a href="#" name="current">Cerulean</a></li>
            <li class="divider"></li>
            <li><a href="#" name="cerulean">Cerulean</a></li>
            <li><a href="#" name="cosmo">Cosmo</a></li>
            <li><a href="#" name="cyborg">Cyborg</a></li>
            <li><a href="#" name="darkly">Darkly</a></li>
            <li><a href="#" name="flatly">Flatly</a></li>
            <li><a href="#" name="journal">Journal</a></li>
            <li><a href="#" name="Lumen">Lumen</a></li>
            <li><a href="#" name="paper">Paper</a></li>
            <li><a href="#" name="readable">Readable</a></li>
            <li><a href="#" name="sandstone">Sandstone</a></li>
            <li><a href="#" name="simplex">Simplex</a></li>
            <li><a href="#" name="slate">Slate</a></li>
            <li><a href="#" name="solar">Solar</a></li>
            <li><a href="#" name="spacelab">Spacelab</a></li>
            <li><a href="#" name="superhero">Superhero</a></li>
            <li><a href="#" name="united">United</a></li>
            <li><a href="#" name="yeti">Yeti</a></li>
          </ul>
        </li>
    </div>
  </div>
</div>
<script>
jQuery(function($) {
  $('#theme-button ul a').click(function() {
    if ($(this).attr('name') != 'current') {
      var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'
      var urlend = '/bootstrap.min.css'
      var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
      var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);

      $('#theme-button ul a[name="current"]').text($(this).text());
    }
  });
});
</script>
</body>
</html>
1
davfive

vous pouvez essayer quelque chose comme ça

html:

<link href="/Themes/DefaultClean/Content/css/styles.css" id="theme-sheet" rel="stylesheet" type="text/css" />

javascript:

function setTheme(themeName) {
    $('#theme-sheet').attr({ href: "https://bootswatch.com/slate/bootstrap.min.css" });;
}

où dans la fonction setTheme sera appelée à partir de la source souhaitée, comme la liste déroulante ou le bouton.

0
aditya