web-dev-qa-db-ja.com

テーマのドロップダウンメニューをクリックした後、テーマを動的に変更する方法

私は開発中のウェブサイトのインターフェースにbootstrapを使用しています。ブートスウォッチのテーマを自分のサイトに統合することも計画しています。ブートスウォッチのさまざまなテーマを含むドロップダウンメニューを作成しました。私の問題は、ドロップダウンメニューでテーマの1つをクリックしたときにテーマを切り替える方法です。

twitter-bootstrapbootswatch
30
Ferdinand Balbin

フィドル：http://jsfiddle.net/82AsF/ （ナビゲーションバーのテーマドロップダウンをクリックします）
リンクをクラスに与えるtheme-linkおよびdata-themeそのようなテーマ名の値：

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

次に、テーマをグローバル変数で次のように定義します。

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"
}

（これを行うとき、これらのbootswatch cssファイルを自分のサーバーでホストしてください-サーバーが手元にないのでホットリンクしているだけです）
次に、次のjQueryコードを使用します。

$(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

上記のソリューションの主な問題は、ページが更新されるとテーマが消えてしまうことです。この記事はブラウザのストレージに設定を保存するため、ブラウザの永続テーマに関して非常に役立ちました。

私はそれがあなたを助けることを願っています

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

4
Umar Abbas

Kevinが提供するソリューションは素晴らしいです。ローカルブートウォッチライブラリでどのように機能させることができるかを理解しようとして少し時間を費やしました。

典型的なhref属性値：

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

しかし、この場合：

        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

@KevinPeiの答えに基づいて、jQuery、Bootstrap、およびBootswatchを使用して自動ドロップダウンを作成し、選択した値にテーマを自動的に更新するドロップダウンをnavbarに追加しました。

フィドル：https://jsfiddle.net/davfive/uwseLLzf/show

コードは実際にはうまく機能します。ただし、jsfiddleには、2つの奇妙な動作があります。

  1. ドロップダウンが画面全体に広がる場合があります
  2. ドロップダウンのマウスオーバー/ホバーの色が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

このようなものを試すことができます

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" });;
}

setTheme関数では、ドロップダウンやボタンなどの目的のソースから呼び出されます。

0
aditya