前回のエントリー「jQueryを使ったフォントサイズ切替機能Part2」のスクリプトに手を加え、CSS(スタイルシート)の切替機能を作ってみます。

前回のスクリプトはクッキーを用いていなかったので、スタイルを保持することができませんでした。今回はクッキーを使用することによって、スタイルを保持するようにします。

クッキー機能に関してはQuirksModeのCookiesの一部を利用しています。

今回はJavaScriptを外部ファイル化し、jQueryのプラグインとしても利用できるようにしました。下記よりダウンロードできます。

• jqswitch.js(2KB)

使い方はjQueryのほかのプラグインと同様head内に次のように書きます

<script src="/common/js/jquery.js" type="text/javascript"></script>
<script src="/common/js/jqswitch.js" type="text/javascript"></script>

前回の切替機能と同様で、<a>タグのrel属性の中に切り替えたいcssへのパスを書きます。<a>タグにはあらかじめstyleswitchというクラスを指定しておきます。

<ul>
<li><a href="#" rel="/common/css/fontlarge.css" class="styleswitch">スタイル2</a></li>
<li><a href="#" rel="/common/css/master.css" class="styleswitch">デフォルトスタイル</a></li>
<li><a href="#" rel="/common/css/style01.css" class="styleswitch">スタイル1</a></li>
</ul>

変更したいスタイルシートにはlink要素内にtitle=”changestyle”と指定しておきます。

これでクリックすると対象のCSSに切り替わるようになります。クッキーを使っているので、一度決められたスタイルは保持されるようになっています。

このスクリプトはMITライセンスとして利用できます。煮るなり焼くなりお好きにどうぞ～。

• スタイル切替のデモ

関連エントリー

• 透過pngをIE6で使う方法いろいろとjQueryプラグイン
• 使えそうなjQueryプラグイン
• シマシマなテーブルをjQueryで作る
• コーディングコンテストの種明かし
• jQueryを使ったアコーディオンメニュー
• jQueryでフォントサイズ切替機能
• jQueryでクロスフェードをやってみる
• IE6で隣接セレクタを使うには
• 画像置換とSEOスパムの境界線
• ブラウザ間の差異をなくすCSSリセット

• Category
  • CSS
  • jQuery
• 1 件のコメント
• TrackBack URL

このエントリーのトラックバックURL

http://www.lllcolor.com/web/css/48.html/trackback