zudolab jqStyleswitcher

基本セットアップ例

1. jQuery、"jqCookie.js"、"jqStyleswitcher.js" を読み込みます。

2. (X)HTMLのhead内、"jqStyleswitcher.js" を読み込むタイミングよりも先に、以下のように、代替スタイルシートのためのlink要素を用意します。

   <link rel="stylesheet" type="text/css" href="style_standard.css" title="standard" />
   <link rel="alternate stylesheet" type="text/css" href="style_larger.css" title="larger" />
   <link rel="alternate stylesheet" type="text/css" href="style_largest.css" title="largest" />

   title属性の値は、そのスタイルシートファイルに割り当てたい名称を指定します。ここではfont-sizeの切り替えを行うための例として説明しますので、standard, larger, largestとしています。

3. 以下のメソッドを呼ぶことで、アクティブにしたい代替スタイルシートを切り替えることができます。STYLESHEET_TITLE_ATTRIBUTE_VALUEには、有効にしたいlink要素のtitle属性値を入れます。

   styleswitcher.setActiveCSS(STYLESHEET_TITLE_ATTRIBUTE_VALUE)".

   以下が、このメソッドを呼ぶためのスイッチとなるコードの例です。
   各a要素をクリックした時に、対応するスタイルシートファイルが有効になります。

   <ul>
       <li><a href="javascript:void(0)" onclick="styleswitcher.setActiveCSS('standard')">standard</a></li>
       <li><a href="javascript:void(0)" onclick="styleswitcher.setActiveCSS('larger')">larger</a></li>
       <li><a href="javascript:void(0)" onclick="styleswitcher.setActiveCSS('largest')">largest</a></li>
   </ul>

   最後に有効にしたスタイルシートファイルは、cookieに保存され、同一のドメイン内に存在するページであれば、他のページに移動しても有効になったままになります。