2009年10月27日火曜日

文字サイズ変更方法(javaScript)

EC-CUBEへ文字サイズを変更するJavaScriptを追加する方法です。

1.jquery.js、jquery.cookie.jsをjsフォルダに格納する。
フォルダパス:/html/user_data/packages/default/js/

2.site_frame.tplのhaedの中でJavaScriptのファイルを指定する。
ファイルパス:/data/Smarty/templates/default/site_frame.tpl

<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.cookie.js"></script>
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.cookie.js"></script>

3.文字サイズを変更するボタンを用意してimageフォルダに格納する。
ファイルパス:/html/user_data/packages/default/image/fontsizechange.gif

4.style.cssをhtml/user_data/packages/default/css/に入れる。
ファイルパス:/html/user_data/packages/default/css/style.css

#fontsize-change{
      position:absolute;
      top:102px; left:560px;
      width: 200px; font-size:10px;
      }
#fontsize-change dl{
      height: 28px;
     overflow:hidden;
      }
#fontsize-change dt{
       float:left; width: 79px;
       height: 28px; background:url(../img/header/fontsizechange.gif) no-repeat 0 0;
       text-indent: -9999px;
       }
#fontsize-change dd{
       float: left; width:34px;
      margin-right:5px;
      }
#fontsize-change dd.l{
      width:28px;
      }
#fontsize-change dd a{
       display: block; height: 28px;
       text-indent:-9999px;
       background-image:url(../img/header/fontsizechange.gif);
       background-repeat:no-repeat;
      }
#fontsize-change dd.m a {background-position:-79px 0;}
#fontsize-change dd.l a {background-position:-118px 0;}
#fontsize-change dd.xl a{background-position:-151px 0;}
#fontsize-change dd.m a:hover,#fontsize-change dd.m a:active,
#fontsize-chanfe dd.m a.cr{background-position:-79px 100%}
#fontsize-change dd.l a:hover,#fontsize-change dd.l a:active,
#fontsize-change dd.l a.cr{background-position:-118px 100%}
#fontsize-change dd.lx a:hover,#fontsize-change dd.lx a:active,
#fontsize-change dd.xl a.cr {background-position:-151px 100%}

5.site_frame.tplにJavaScriptの実行場所を書き込む。
ファイルパス:/data/Smarty/templates/default/detail.tpl

<div id="fontsize-change">
   <script type="text/javascript">
//<![CDATA[fontsize.setup();//]]>
   </script>
</div>

6.JavaScriptの実行ファイルを作成する。
ファイル名:fontsize.jp

var fontSize = {};
fontSize.setup = function() {
var s = '<dl>';
s +='<dt> 文字サイズを変更</dt>'
s +='<dd class="m"><a href="#" oneclick="fontSize.setStyle(¥'M¥') ; return false;"> 標準</a></dd>';
s +=' <dd class="l"><a href="#" oneclick="fontSize.setStyle(¥'L¥') ; return false;"> 大</a></dd>' ;
s +=' <dd class="xl"><a href="#" oneclick="fontSize.setStyle(¥'XL¥') ; return false;"> 最大</a></dd>;
s +='</dl>';
document.write(s);};

var fontSize = {};
/*---文字サイズ変更を実行する関数---*/
fontSize.setStyle = function(fValue) { var btn = $("#fontsize-change a");
$(btn).each(function() { this.className = ""; });
 switch(fValue) {
  case "L" : var value = "L"; btn[1].className = "cr"; break;
  case "XL": var value = "XL"; btn[2].className = "cr"; break;
  default: var value = "M"; btn[0].className = "cr"; break;
 }
$.cookie("fontsize", value, { expires: 7, path: "/", domain: location.hostname,  secure: false });
document.body.className = this.initClass;
$(document.body).addClass("fontsize" + value);};

/*---ドキュメントのロード時に呼び出す関数---*/
fontSize.init = function() {
      く this.initClass = document.body.className;
       var c = $.cookie("fontsize");
      this.setStyle(c);
      };
$(document).ready(function(){
     fontSize.init(); });

8.作成したfontsize.jpをjsフォルダに格納する。
フォルダパス:/html/user_data/packages/default/js/

9.site_frame.tplのhaedの中でJavaScriptファイルの指定を追加する。
ファイルパス:/data/Smarty/templates/default/site_frame.tpl


を書き込む。

10.import.cssを開いてstyle.cssを記入する。
ファイルパス:/html/user_data/packages/default/css/import.css

/*M*/
body.fontsizeM{font-size:12px}
*html body.fontsizeM{font-size:76%}
*:first-child+html body.fontsizeM { font-size:76%}
/*L*/
body.fontsizeL{font-size:14px}
*html body.fontsizeM{font-size:88%}
*:first-child+html body.fontsizeL { font-size:88%}
/*XL*/
body.fontsizeXL{font-size:16px}
*html body.fontsizeXL{font-size:100%}
*:first-child+html body.fontsizeXL { font-size:100%}



それでもできなかったらfontsize.jsを開きCookieに関するところを強制に文字化強いて動かせる
方法があります。
EC-CUBEはCookieの使用方法がややこしいためです。
この部分を文字化するのです。
まず 38行目のところを文字化して無効にします。
そして46行目のところ殻49行目まで文字化して無効化します。
それでとりあえず動きます。



これで完了です。
              



作成者:李 禎桓

0 件のコメント:

コメントを投稿