THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
Cookie
Size
サイズ
フォント
font
jquery

先にエントリーした内容の別版。前のはボタン部分を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で利用するため、1つの画像に

■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;
}

動作デモ

fontsize change (background images button) - jsdo.it - share JavaScript, HTML5 and CSS

ポイントはCSS

予めCSSで:hoverした時だけでなく、クリックした部分をacriveにしておくclass時のスタイルを決めておくだけ。JSで毎回画像のパスを変更するよりは動作はシンプルなものになる。

なにより、classを付加したり削除したりするだけで実装が可能。JavaScriptであれこれ複雑に考えるよりはシンプルにできる。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。