Twitter Bootstrap で構築されたクライアントのプロジェクトに取り組んでいます。彼は、ユーザーが選択できるさまざまな配色を用意したいと考えています。たとえば、上部のメニューからユーザーが変更できる赤色の配色と青色の配色を用意します。
これを行う jQuery 用のプラグイン (またはその他のもの) はありますか? 実際に行う必要があるのは、別の CSS ファイルをロードすることだけだと思いますが、これを行うにはどうすればよいでしょうか?
Twitter Bootstrap で構築されたクライアントのプロジェクトに取り組んでいます。彼は、ユーザーが選択できるさまざまな配色を用意したいと考えています。たとえば、上部のメニューからユーザーが変更できる赤色の配色と青色の配色を用意します。
これを行う jQuery 用のプラグイン (またはその他のもの) はありますか? 実際に行う必要があるのは、別の CSS ファイルをロードすることだけだと思いますが、これを行うにはどうすればよいでしょうか?
キックストラップを使用します。基本的にどこからでもテーマをインストールでき、独自のテーマを作成し、Bootswatch のテーマを含め、Less.js クライアント側を使用して毎回変更を簡単に再コンパイルできます。
さて、さまざまなテーマをロードしたいので...
jQuery を使用してさまざまなスタイルシートを読み込むことができます
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
...
</html>
これは、ボタンのクリックまたはトリガーされた別のイベントである可能性があります。したがって、ページ DOM の head セクションに新しい要素を挿入するだけです。これは、数行の jQuery で実行できます。
$(document).ready(function () {
$("a").click(function () {
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
});
});
これで解決することを願っています...
スタイルの href を変更しても、それ自体は何もしません。ブラウザーは既に CSS を読み込んでおり、HREF を変更しても新しいファイルを再度読み取ることはありません。
この質問への回答を読んでください。役立つかもしれません。
ページのリロードが問題ない場合は、使用する配色を定義するセッション値を使用して、javascript ではなくサーバー上で実行する必要があります。