これはブログです。

3DCGとかWebとかカメラとか

この記事は更新されてから1年以上経過しています。

2015/10/31

多言語切り替え

ロストテクノロジーになりそうなので、このブログに記載します。

やったこと

  • 切り替えボタンの『日本語』『English』(正確にはclass=jpSwitchとclass=enSwitch内の文字列)をクリックすると、該当するclassをshow、非該当classをhideします。
  • クッキーを使ってフラグを保持する(jquery-cookie.jsを導入)
  • クッキーのlangを見てNullであれば、デフォルトの言語(下記ソースコードでは日本語)を表示。
  • おまけとして、jpSwitch、enSwitchにcursorを合わせるとpointerになります(指のヤツ)

 

結論から言えば、jQuery で多言語切り替えを(魔)改造したものです。ただ、私の場合、3-1.言語情報をセッションに保持にクッキーを使ってます。ほかは同じです。

 

index.html

<!-- 省略 -->

<body>

   <!-- 切り替えボタン -->
   <p><span class="jpSwitch">日本語</span> / <span class="enSwitch">English</span></p>

   <div class="en">
      <!-- 英語の記事 -->
   </div>

   <div class="jp">
      <!-- 日本語の記事 -->
   </div>
</body>

<!-- 省略 -->

 

jquery-cookie.js
jQueryのプラグイン、cookieが簡単に扱える。下記よりDL可。

jquery-cookie – GitHub

 

changeLang.js

$(function () {

    "use strict";
    var lang = $.cookie("lang");

    if(lang == null){
        lang = "jp";
        $.cookie("lang", lang, { path: "/" });
            showLang(lang);
        }else{
            showLang(lang);
        }

    $(".jpSwitch").click(function (){
        lang = "jp";
        $.cookie("lang", lang, { path: "/" });
        showLang(lang);
    });

    $(".enSwitch").click(function (){
        lang = "en";
        $.cookie("lang", lang, { path: "/" });
        showLang(lang);
    });

});

 

showLang.js

function showLang (lang){
    var langSet = ["jp", "en"];
    for (var i = 0, len = langSet.length; i &lt; len; i++) {
        if (lang === langSet[i]) {
            $("."+langSet[i]).show();
        } else {
            $("."+langSet[i]).hide();
        }
    }
}

 

cursorChange.js(おまけ)

$(function (){
    $(".jpSwitch").hover(function (){
        $(this).css("cursor","pointer");
    });    
    
    $(".enSwitch").hover(function (){
        $(this).css("cursor","pointer");
    }); 
});

 

カテゴリ: プログラミング / タグ:

まだコメントはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。