親切なUIに必須！ JavaScriptライブラリ StyleSwitcher.jsの使い方メモ

javascript
スポンサーリンク

社内システムで使用する機会があったのでメモ。

StyleSwitcher.jsはリンクのクリックにより、読み込むCSSファイルを簡単に切り替えることができる便利なjavascriptライブラリである。

設置方法が簡単というだけでなく、変更されたスタイル情報はcookieに保存されるため、一度設定するとページ遷移や再訪問の際にも前回分が反映されるという優れものである。複数のcssを読み込んでスタイルを変更させるので、一括変換的なものを使用するより微調整が可能。当然文字サイズだけでなくカラーや配置を変えることにも応用できる。

今回は文字サイズ変更を目的として使用したため、文字サイズ変更の例。

ダウンロード

下記よりStyleSwitcher.jsをダウンロードする。
http://alistapart.com/article/alternate

CSSを準備する。

以下の４種類のCSSを準備する。

  • style.css（メインのCSS）
  • fs-standard.css（標準サイズ用CSS）
  • fs-large.css（大サイズ用CSS）
  • fs-small.css（小サイズ用CSS）

メインはstyle.cssへ記述し、style.cssに対して加えたい変更点のみを下記のように記述する。

/* fs-standard */
#parts-fsStandard {background:url(images/fs-standard-on.png) no-repeat;}
#parts-fsLarge{ background:url(images/fs-large-off.png) no-repeat;}
#parts-fsSmall{ background:url(images/fs-small-off.png) no-repeat;}
body {
font-size:16px;
}

/* fs-large */
#parts-fsStandard {background:url(images/fs-standard-off.png) no-repeat;}
#parts-fsLarge{ background:url(images/fs-large-on.png) no-repeat;}
#parts-fsSmall{ background:url(images/fs-small-off.png) no-repeat;}
body {
font-size:20px;
}

/* fs-small */
#parts-fsStandard {background:url(images/fs-standard-off.png) no-repeat;}
#parts-fsLarge{ background:url(images/fs-large-off.png) no-repeat;}
#parts-fsSmall{ background:url(images/fs-small-on.png) no-repeat;}
body {
font-size:9px;
}

適当な位置にファイルを配置

必要となるページのhead内で読み込む

切り替え用のcssはrel=”alternate stylesheet”とし、title設定も必要。

<script type="text/javascript" src="<?=base_url()?>css/js/styleswitcher.js"></script>
<link href="<?=base_url()?>css/fs-standard.css" type="text/css" rel="stylesheet" title="fs-standard">
<link href="<?=base_url()?>css/fs-standard.css" type="text/css" rel="alternate stylesheet" title="fs-standard">
<link href="<?=base_url()?>css/fs-large.css" type="text/css" rel="alternate stylesheet" title="fs-large">
<link href="<?=base_url()?>css/fs-small.css" type="text/css" rel="alternate stylesheet" title="fs-small">
<link href="<?=base_url()?>css/style.css" type="text/css" rel="stylesheet">
５．bodyへ以下のように記述

onclick=”setActiveStyleSheet(‘fs-small’)の名称はtitle名と合わせる。

<a id="parts-fsSmall" class="test" onclick="setActiveStyleSheet('fs-small'); return false;" href="javascript:void(0);">小</a>
<a id="parts-fsStandard" class="test" onclick="setActiveStyleSheet('fs-standard'); return false;" href="javascript:void(0);">中</a>
<a id="parts-fsLarge" class="test" onclick="setActiveStyleSheet('fs-large'); return false;" href="javascript:void(0);">大</a>

完成版はこんな感じ。クリック時にページ全体のフォントサイズが変更される。（画像はon時とoff時の2種類を用意しておく）

f:id:kojikoji75:20130708130930j:plain

変更が必要な箇所を特定のクラス名で囲う必要があるライブラリ等もあるが、StyleSwitcher.jsはそのような面倒は一切生じない。

jQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) - TechNotejQuery UI を無駄なく使いこなすために必要な知識まとめ(各ファイルの役割など) – TechNote

jQueryUIは、インタラクティブなWebサイトを開発するために使用されるjQueryベースのUIライブラリです。このため、多くのサイトで「簡単」「手軽」など…

システム管理者でなくても知っとくべき！ Windowsサーバ／クライアントの時刻同期設定まとめ - TechNoteシステム管理者でなくても知っとくべき！ Windowsサーバ／クライアントの時刻同期設定まとめ – TechNote

コンピュータの内臓時計はズレやすいため、「時刻同期」について検討することはとても重要なことと思われますが、その重要性はあまり認識されていない気がします。私も先日…

BootstrapにぴったりのWebアイコンフォント FontAwesome 4.0.0 が公開されていた件 - TechNoteBootstrapにぴったりのWebアイコンフォント FontAwesome 4.0.0 が公開されていた件 – TechNote

しばらくニュースをチェックできずにいて何気なくFontAwesomeのサイトを覗いてみたら、FontAw…

よくわかるJavaScriptの教科書

よくわかるJavaScriptの教科書

JavaScript 第6版

JavaScript 第6版

ブログランキング・にほんブログ村へ　 Windowsランキング
タイトルとURLをコピーしました