GHWEB06.GRASSHOPPER

jQueryで文字サイズ変更機能の作り方

  • Category:Web関連
  • Web関連の備忘録

moji自治体サイト等でアクセシビリティの一環として導入されている文字サイズ変更機能を実装してみます。jQuery本体は、Google Hosted Libraries の バージョン1.9.1 を使用します。

文字サイズ変更のスクリプトとサンプル

$(function(){
$("#moji li").click(function () {
var no = $(this).parent().children().index(this);
switch (no){
case 0:
$("#contents").css("font-size", + 0.75 + "em");
break;
case 1:
$("#contents").css("font-size", + 1 + "em");
break;
case 2:
$("#contents").css("font-size", + 1.2 + "em");
break;
}
});
});

サンプル1

スクリプトの処理内容

//#moji li がクリックされると {   } の中を実行
$("#moji li").click(function () {

//クリックされたli要素が何番目かを調べて変数「no」に代入
var no = $(this).parent().children().index(this);

//switch文で変数「no」の結果と他の値が一致するか調べる
switch (no){

//no が 0 (小をクリック)の場合
case 0:
//#contents に フォントサイズ 0.75em を指定
$("#contents").css("font-size", + 0.75 + "em");
break;

//no が 1 (中をクリック)の場合
case 1:
//#contents に フォントサイズ 1em を指定
$("#contents").css("font-size", + 1 + "em");
break;

//no が 2 (大をクリック)の場合
case 2:
//#contents に フォントサイズ 1.2em を指定
$("#contents").css("font-size", + 1.2 + "em");
break;
}

この方法で文字サイズの変更は可能ですが、画面遷移や再読込みをするとフォントサイズが元サイズに戻ってしまいます。次のサンプルではその辺を解消してみます。


文字サイズ変更のスクリプトとサンプルcookie使用版

プラグイン jquery.cookie.js を利用してcookieを使えるようにします。
まずは、HTMLのヘッダに jquery.cookie.js の記述を追加。
スクリプトは以下のようにcookieの読込みと保存の記述を追加しています。
サンプルページで再読込等をして試してみて下さい。
$(function(){
var newSize = $.cookie("fsize");
if ( newSize == null ){
var nowSize = 1;
} else { var nowSize = Number( newSize );
}
$("#contents").css("font-size", + nowSize + "em");
$("#moji li").click(function () {
var no = $(this).parent().children().index(this);
switch (no){
case 0:
$("#contents").css("font-size", + 0.75 + "em");
$.cookie("fsize",0.75,{expires:1,path:'/'});
break;
case 1:
$("#contents").css("font-size", + 1 + "em");
$.cookie("fsize",null,{path:'/'});
break;
case 2:
$("#contents").css("font-size", + 1.2 + "em");
$.cookie("fsize",1.2,{expires:1,path:'/'});
break;
}
});
});

サンプル2

スクリプトの処理内容cookie使用版

スクリプトの処理内容
// cookie fsizeの読込んで変数 newSize に代入
var newSize = $.cookie("fsize");

//変数 newSize が null なら
if ( newSize == null ){
// nowSize に 1 を代入
var nowSize = 1;
//nullと違うなら 変数 newSize を nowSize に代入
} else { var nowSize = Number( newSize );
}

///#contents に フォントサイズ nowSize を指定
$("#contents").css("font-size", + nowSize + "em");

//#moji li がクリックされた時の処理
$("#moji li").click(function () {

//クリックされたli要素が何番目かを調べて変数「no」に代入
var no = $(this).parent().children().index(this);

//switch文で変数「no」の結果と他の値が一致するか調べます
switch (no){

//no が 0(小をクリック)の場合
case 0:
//#contents に フォントサイズ 0.75em を指定
$("#contents").css("font-size", + 0.75 + "em");
//cookie「fsize」に「0.75」をセットして1日保存。
$.cookie("fsize",0.75,{expires:1,path:'/'});
break;

//no が 1(中をクリック)の場合
case 1:
//#contents に フォントサイズ 1em を指定
$("#contents").css("font-size", + 1 + "em");
//cookieの削除
$.cookie("fsize",null,{path:'/'});
//↑でcookieが削除されない場合はこちらで削除
//$.cookie("fsize",null,{expires:-1,path:'/'});
break;

//no が 2(大をクリック)の場合
case 2:
//#contents に フォントサイズ 1.2em を指定
$("#contents").css("font-size", + 1.2 + "em");
//cookie「fsize」に「1.2」をセットして1日保存。
$.cookie("fsize",1.2,{expires:1,path:'/'});
break;

以上、勉強を兼ねて掲載してみました。

RELATED ARTICLE
  • 掲載: