【jQuery】スタイルシートを別のスタイルシートに切り替えるStyleSwitcher

jQuery

StyleSwitcher

June 7, 2018

StyleSwitcherはあなたのサイトに別のスタイルシートを切り替えるためのjQueryプラグイン。メインのCSSファイルを新しいスタイルで上書きし、直ちにプレビューすることができます。

Quick Start

代替スタイルシートを設定します。

HTMLを次のように設定します。

<select id="colorpick" class="form-control">
    <option value="defaultstyles" selected>Default Theme</option>
    <option value="customstyle1">Blue Theme</option>
    <option value="customstyle2">Green Theme</option>
    <option value="customstyle3">Purple Theme</option>
</select>

オプションの1つに値defaultstylesが必要。

styleSwitcher.jsファイルをjQueryの後、custom.jsファイルの前にフッターに追加します。
selectタグのstyleSwitcher関数を呼び出してプラグインを初期化

$(document).ready(function(){
    $('#colorpick').styleSwitcher();
})

Advanced Usage

オプションのデフォルト

$('#colorpick').styleSwitcher({
    path: "css/customstyles/",
    prefix: "custom",
    session: true
})
  1. path
  2. prefix
  3. session

Latest Posts

Related Posts