如何在點擊主題下拉菜單後動態更改主題

53

小提琴：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); 
    }); 
});

來源

2013-10-05 01:14:30

+1

感謝答。這真的很有幫助！ –

+0

感謝這給了我一個偉大的開始，類似的東西。 –

+0

感謝您的回答Kevin – Harsha

2

與如果頁面被刷新主題消失了上述解決方案的主要問題。我發現這篇文章對於瀏覽器中的持久主題非常有幫助，因爲它將設置保存在瀏覽器的存儲中。

我希望它可以幫助你

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

來源

2016-03-10 19:47:30

0

由凱文提供的是偉大的解決方案。我剛剛花了一些時間試圖弄清楚如何使它能夠與本地的bootswatch庫一起工作。

典型的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" 
    }

來源

2016-12-29 20:07:34 lucas

0

，你可以嘗試這樣的事情

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功能將被調用從期望的源，諸如下拉或按鈕。

來源

2017-07-12 19:43:11 aditya

0

我基於@ KevinPei的答案使用jQuery，Bootstrap和Bootswatch自動下拉菜單，將下拉菜單添加到自動更新主題到選定值的導航欄中。

小提琴：https://jsfiddle.net/davfive/uwseLLzf/show

的代碼在實踐中的偉大工程。然而，在的jsfiddle，有兩個奇怪的行爲：

有時候下拉延伸到整個屏幕
下拉的鼠標懸停/懸停顏色不顯示的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>

來源

2017-10-19 22:21:00 davfive

+0

我無法在我的應用程序上運行您的代碼 –

+0

感謝您的支持，並且非常抱歉您不得不這樣做。我忘了在引導程序和jquery中包含中的腳本鏈接。我已經更新並測試了它在jsfiddle之外的作用。 – davfive

如何在點擊主題下拉菜單後動態更改主題

回答

相關問題