中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

スタイルシートを切り替えるjQuery Plugin「CssSwitcher」

スタイルシートを切り替える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のほか、GoogleMicrosoftからの配信も利用できる。

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:

jquery.cssswitcher.js

Changes:

Licenses:

Dual licensed under the MIT and GPL licenses.

シェア

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

購読