これはブログです

3DCGとかプログラミングとか

多言語切り替え

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

やったこと

  • 切り替えボタンの『日本語』『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可。

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 < 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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください