スタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」

Check このエントリーをはてなブックマークに追加

配布元：Switch stylesheets with jQuery
ライセンス：クリエイティブコモンズAttribution, Share Alike License

Switch stylesheets with jQueryはユーザー操作により簡単にスタイルシートを切り替えることができるjQueryプラグインだ。

クッキーにも対応している為、一度選択されたスタイルシートはこのライブラリが読み込まれているすべてのページで優先的に表示されるようになります。

使い方

変更したいスタイルシートをhead要素などで読み込みます。デフォルトのスタイルシート以外はrel属性をrel=”alternate stylesheet”としデフォルトのスタイルシートはrel=”stylesheet”としておきま、title属性を使いそれぞれに名前を設定します。

<link rel="stylesheet" type="text/css" href="style1.css" title="style1" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />

Switch stylesheets with jQueryの配布元よりダウンロードしたstyleswitch.jsとjQueryをhead要素などで読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="styleswitch.js"></script>

スタイル切り替えのトリガーとなるa要素にはhref属性にhref=”?style=style1″とし、style1はlink要素につけたtilte属性の名前を設定します。rel属性にもrel=”style1″と名前を設定し、class属性にはclass=”styleswitch”と設定しておきます。

<a href="?style=style1" rel="style1" class="styleswitch">style1</a>
<a href="?style=style2" rel="style2" class="styleswitch">style2</a>
<a href="?style=style3" rel="style3" class="styleswitch">style3</a>

これでリンクをクリックされた際に、スタイルシートが切り替えられます。

サンプル

スポンサードリンク

コメント

カテゴリー：jQuery スタイルスイッチ ライブラリ