スタイルシートを切り替えるjQueryプラグイン「Switch stylesheets with jQuery」
配布元: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>
これでリンクをクリックされた際に、スタイルシートが切り替えられます。
スポンサードリンク