もっとシンプルかつ簡単にフォントサイズを変える「大・中・小」ボタンを実装する方法

2011/06/23

カテゴリ：: jQuery

タグ：: jquery; font; フォント; サイズ; Size; Cookie

先にエントリーした内容の別版。前のはボタン部分をimgの画像として読みこんで、そのsrcを変えることで実現をしていたのですが、なんだか有用性が低かったきがしてならなかったので、もう少しシンプルに且つ画像でもCSSのボタンでもどちらでもOKなようなスクリプトに変えてみた。

今回の仕様

先に紹介しているものは、画像リンクを変えて実装していたのに対し、今回はボタンを背景画像を利用して実装。同時に:hove時とクリックした部分につけるactiveに対して、CSSを予め用意しておく。

ちなみに、今回はCSS Spriteにて実装。

利用したソース・CSS・画像

JavaScriptのソースは最初に作ったものに、activeのclassをつけたり削除する機能をつけただけ。

■JavaScript

jQuery(function($){
  var history = $.cookie('fontSize');
  var elm = $('p','#test');
  if(!history){
    elm.addClass('fontM');
    $('#fontM').addClass('active');
  }else{
    elm.addClass(history);
    $('#'+history).addClass('active');
  }
  $('li','#fontChange').click(function(){
    if(!$(this).hasClass('active')){
      $('.active').removeClass('active');
      $(this).addClass('active');
      var setFontSize = this.id;
      $.cookie('fontSize', setFontSize);
      elm.removeClass().addClass(setFontSize);
    }
  });
});

■画像

CSS Spliteで利用するため、１つの画像に

■CSS

#fontChange li {
  float: left;
  display: block;
  width: 52px;
  height: 52px;
  padding: 0;
  margin-right: 5px;
  text-indent: -9999px;
  cursor: pointer;
  background:url(btn.png) no-repeat;
}

/* 背景位置指定 */

#fontChange li#fontS {
  background-position: 0 0;
}
#fontChange li#fontM {
  background-position: -58px 0;
}
#fontChange li#fontL {
  background-position: -116px 0;
}

/* :hover・.active時 */

#fontChange li#fontS:hover,
#fontChange li#fontS.active {
  background-position: 0 -58px;
}
#fontChange li#fontM:hover,
#fontChange li#fontM.active {
  background-position: -58px -58px;
}
#fontChange li#fontL:hover,
#fontChange li#fontL.active {
  background-position: -116px -58px;
}