スタイルシートを切り替えるJavaScript「CssSwitcher」に完全互換した「CssSwitcher jQuery Plugin」をリリース。jQuery本体 (バージョン 1.4.x) と jQuery Plugin「Cookie」を採用。
デモサンプル
つかいかた
1. スタイルシートの用意
デフォルトとなるスタイルシートファイルと切り替え用のスタイルシートを用意します。サーバにまとめてアップロード。
デフォルト layout.css、font.css、color.css、切り替え用として layout_fix.css、font_small.css、font_big.css、color_bule.css、color_red.css な感で。
2. スタイルシートファイルを header 要素に追加
追加の際、id属性を設定すること。id名は好みで。
<link rel="stylesheet" type="text/css" href="layout.css" id="layout" />
<link rel="stylesheet" type="text/css" href="font.css" id="font" />
<link rel="stylesheet" type="text/css" href="color.css" id="color" />3. jQueryのダウンロード
jQuery本体を以下のダウンロードページからダウンロードします。
jQuery本体はコンテンツデリバリネットワーク (CDN) から配信を受けてもOK。配信はjQuery CDNのほか、GoogleとMicrosoftからの配信も利用できる。
jQuery Plugin「Cookie」もダウンロード。
4. スクリプトのダウンロード、初期設定
jquery.cssswitcher.js をダウンロードして初期設定
// Settings
CssSwitcher.cssPath = "http://domain/path/to/css/";
CssSwitcher.idList = [ 'layout', 'font', 'color' ]; // List up id attribute
// Cookie Settings
CssSwitcher.domain = "";
CssSwitcher.path = "/";
CssSwitcher.expires = 7; // days or Wdy, DD-Mon-YYYY HH:MM:SS GMT (ex. Fri, 01-Dec-2010 20:40:03 GMT)
CssSwitcher.secure = 0; // 0 or 1基本設定
- 「CssSwitcher.cssPath」スタイルシートファイルのディレクトリパス
- 「CssSwitcher.idList」スタイルシートのIDリスト、link要素に追加したid名
Cookieの設定を必要に応じて
- 「CssSwitcher.domain」Webサーバー名
- 「CssSwitcher.path」パス名
- 「CssSwitcher.expires」有効期限 日数 または Wdy, DD-Mon-YYYY HH:MM:SS GMT形式
- 「CssSwitcher.secure」セキュリティ
保存してサーバにスクリプトをアップロード
5. HTML の header 要素に JavaScript ファイルを追加。jQuery本体のコンテンツデリバリネットワーク (CDN) からの配信はそのリンク先を
スタイルシートファイルより下部に追加
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.cssswitcher.js"></script>6. HTML にリンク設置
リンクタグで CssSwitcher.change() に JSON 形式で引数設定
id : link要素に追加したID
theme : 拡張子.cssを除いたスタイルシート名
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_small'}]);">小</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'default'}]);">標準</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_big'}]);">中</a>複数のスタイルシートを設定する場合
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_big'},{'id':'color','theme':'color_red'}]);">赤</a>
<a onclick="CssSwitcher.change([{'id':'font','theme':'font_small'},{'id':'color','theme':'color_blue'},{'id':'layout','theme':'layout_fix'}]);">固定レイアウト</a>技術的な課題:
- ブラウザのボタン操作でのページ遷移とブラウザキャッシュ
ブラウザの戻るボタンでの前のページに戻る際に、先のページで変更したスタイルシートが反映されない場合がある。
Download:
Changes:
- 0.0.2 2011.06.27 Fix browser cache.
- 0.0.1 2010.09.02 First Release.
Licenses:
Dual licensed under the MIT and GPL licenses.