[ プログラミング ] jquery.cookie.jsを利用して文字サイズを変更する

文字サイズを変更するボタンが設置されているWebサイトなどありますが、jQueryで実装できます。フォントサイズを保存するにはブラウザのクッキーを利用する必要がありますが、ここでは、jquery.cookie.jsというjQueryの記法でクッキーを取得・保存できるスクリプトを利用します。

このような場合、フォントを変更するボタンは画像の場合とテキストの場合がありますが、どちらにも対応させました。また、ホバー時、アクティブ時(選択時)で画像およびCSSスタイルが変更できるようにしました。

jquery.cookie.jsのダウンロード

以下のサイトからjquery.cookie.jsをダウンロードしてください。ソースコードを公開できるGitHubというサービスのリンクです。jquery.cookie.jsというリンクをクリックするとソースコードが表示されるのでコピーして利用してください。

ヘッダーで以下のように読み込めばOKです。

HTML

<head>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>

画像バージョンデモ

DOMO

テキストバージョンデモ

DOMO

HTML

<div id="font">
   <ul>
      <li><img src="images/btnS.gif" alt="小" /></li>
      <li><img src="images/btnM.gif" alt="中" /></li>
      <li><img src="images/btnL.gif" alt="大" /></li>
   </ul>
</div><!-- /#font -->
<div id="main">
   <p>
   あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
   </p>
</div><!-- /#main -->

テキストバージョンの場合は、1~7行目を以下のように変更します。

HTML

<div id="font">
   <ul>
      <li>小</li>
      <li>中</li>
      <li>大</li>
   </ul>
</div><!-- /#font -->

Java Script

$(function(){
   var target = $('#main');          // フォントサイズ変更エリア
   var controler = $('#font img');   // フォントサイズ変更ボタン(画像あるいはテキストを設定)
   var fontSize = [100,116,125];         // フォントサイズ(単位は%、HTMLと同じ並び順)
   var hoverSuffix = '_on';          // ボバー用画像の接尾辞名(ボバー用画像を使用しない場合は値を空にする)
   var activeSuffix = '_active';     // アクティブ用画像の接尾辞名(アクティブ用画像を使用しない場合は値を空にする)
   var hoverClass = 'hover';         // フォントサイズ変更ボタンのボバー時のクラス名(ボバー時のクラスを使用しない場合は値を空にする)
   var activeClass = 'active';       // フォントサイズ変更ボタンのアクティブ時のクラス名(アクティブ時のクラスを使用しない場合は値を空にする)
   var defaultFont = 0;              // 初期フォントサイズ設定(HTMLと同じ並び順で0から設定)
   var cookieExpires = 7;            // クッキー保存期間
   var number = fontSize.length;     // フォントサイズ変更ボタンの数
   var hoverImg = hoverSuffix!='' && controler.is('[src]');
   var activeImg = activeSuffix!='' && controler.is('[src]');

   // クッキー設定
   function cookieSet(index){
      $.cookie('fontsize',fontSize[index],{path:'/',expires:cookieExpires});
   }

   // 現在フォントサイズ取得
   function nowFont(){
      return $.cookie('fontsize');
   }

   // フォントサイズ設定
   function changeFont(){
      target.css({'font-size':nowFont()+'%'});
   }

   // ボタン画像ハイライトオン
   function imgOn(btn,suffix) {
      btn.attr('src',btn.attr('src').replace(eval('/^(\.+)(\\.[a-z]+)$/'),'$1'+suffix+'$2')).css('cursor','pointer');
   }

   // ボタン画像ハイライトオフ
   function imgOff(btn,suffix) {
      btn.attr('src',btn.attr('src').replace(eval('/^(\.+)'+suffix+'(\\.[a-z]+)$/'),'$1$2')).css('cursor','pointer');
   }

   // 初期表示
   // フォントサイズがクッキーに保存されている場合
   if(nowFont()){
      for(var i=0; i<number; i++){
         if(nowFont()==fontSize[i]){
            // 初期ボタン設定
            var btn = controler.eq(i);
            // フォントサイズ設定
            changeFont();
            // アクティブ用の画像がある場合は表示
            if(activeImg){
               imgOn(btn,activeSuffix);
            }
             // アクティブ時のクラス名を設定
            btn.addClass(activeClass);
         }
      }
   }
   // フォントサイズがクッキーに保存されていない場合
   else {
      // 初期ボタン設定
      var btn = controler.eq(defaultFont);
      // デフォルトのフォントサイズをクッキーに保存する
      cookieSet(defaultFont);
      // フォントサイズ設定
      changeFont();
      // アクティブ用の画像がある場合は表示
      if(activeImg){
         imgOn(btn,activeSuffix);
      }
       // アクティブ時のクラス名を設定
      btn.addClass(activeClass);
   }

   // ホバーイベント
   controler.each(function(i){
      // 現在のボタン要素を取得
      var self = $(this);
      if(hoverImg){
         self.hover(
         function(){
            if(nowFont()!=fontSize[i]){
               // ホバー用画像に切り替え
               imgOn(self,hoverSuffix);
               return;
            }
         },
         function(){
            if(nowFont()!=fontSize[i]){
               // 通常用画像に切り替え
               imgOff(self,hoverSuffix);
            }
         });
      }
      self.hover(
      function(){
         if(nowFont()!=fontSize[i]){
            // ホバーしたボタンにホバー時のクラス名を設定
            self.addClass(hoverClass);
         }
      },
      function(){
         if(nowFont()!=fontSize[i]){
            // ホバーしたボタンのホバー時のクラス名を削除
            self.removeClass(hoverClass);
         }
      });
   });

   // クリックイベント
   controler.click(function(){
      // 現在のボタン要素を取得
      var self = $(this);
      // 現在のボタン要素のインデックス番号(ボタンID)を取得
      var index = controler.index(self);
      // フォントサイズをクッキーに保存する
      cookieSet(index);
      // フォントサイズ設定
      changeFont();
      if(hoverImg){
         // ホバー用画像をオフ
         imgOff(self,hoverSuffix);
      }
      if(activeImg){
         // アクティブ用画像に切り替え
         imgOn(self,activeSuffix);
         // 非設定画像のアクティブ用画像を通常用に切り替え
         for(var i=0; i<number; i++){
            if(nowFont()!=fontSize[i]){
               imgOff(controler.eq(i),activeSuffix);
            }
         }
      }
      // クリックしたボタンのホバー時のクラス名を削除
      self.removeClass(hoverClass);
      // クリックしたボタンにアクティブ時のクラス名を設定
      self.addClass(activeClass);
      // 非設定ボタンのアクティブ時のクラス名を削除
      controler.not(self).removeClass(activeClass);
   });
});

テキストバージョンの場合は、2行目を以下のように変更します。

Java Script

var controler = $('#font li')

CSS

#font li {
   float:left;
   list-style:none;
   margin-right:5px;
   padding:10px;
   font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;
   color:#fff;
   font-size:20x;
   font-weight:bold;
   line-height:1.0;
   background:#8d8d8d;
   cursor:pointer;
}

#font li.hover {
   background:#dd6e2a;
}

#font li.active {
   background:#d09300;
}

CSSは最小限のものしか記載していません。テキストでスタイルを指定する際は、ホバー時は「.hover」というスタイル名、アクティブ時(選択時)は「.active」という名前になりますが、このスタイル名はご自由に変更できます。

動作確認ブラウザ

  • IE6~9(IE9以外はIETester使用)
  • Firefox 15.0.1
  • Safari 5.1.7
  • Google Chrome 21
  • Opera 12.01

参考サイト

以下のサイトを参考にしました。ありがとうございました。このスクリプトを元に自分でわかるようにプログラムを組んだのでかなり回りくどい書き方をしてる気がしています・・・。