手记

多语言切换jquery.i18n.min.js

项目需求,切换多语言,采用

jQuery.i18n.min.js文件内容如下

-------------------------------------------------

/*!
 * jquery i18n Plugin v1.0.0
 * https://github.com/ZOMAKE/jquery.i18n
 *
 * Copyright 2017 ZOMAKE,Inc.
 * Released under the Apache Licence 2.0
 */


(function($) {
    $.fn.extend({
        i18n: function(options) {
            var defaults = {
                lang: "",
                defaultLang:"",
                filePath:"/i18n/",
                filePrefix:"i18n_",
                fileSuffix:"",
                forever: true,
                callback: function() {}
            };


            function getCookie(name) {
                var arr =document.cookie.split('; ');
                for (var i = 0; i <arr.length; i++) {
                    var arr1= arr[i].split('=');
                    if(arr1[0] == name) {
                       return arr1[1];
                    }
                }
                return '';
            };


            function setCookie(name, value,myDay) {
                var oDate = new Date();
               oDate.setDate(oDate.getDate() + myDay);
                document.cookie = name+ '=' + value + '; expires=' + oDate;
            };


            var options = $.extend(defaults,options);


            if (getCookie('i18n_lang') != ""&& getCookie('i18n_lang') != "undefined" &&getCookie('i18n_lang') != null) {
                defaults.defaultLang =getCookie('i18n_lang');
            } else if (options.lang =="" && defaults.defaultLang == "") {
                throw "defaultLangmust not be null !";
            };


            if (options.lang != null &&options.lang != "") {
                if (options.forever) {
                   setCookie('i18n_lang', options.lang);
                } else {
                   $.removeCookie("i18n_lang");
                }
            } else {
                options.lang =defaults.defaultLang;
            };


            var i = this;
            $.getJSON(options.filePath +options.filePrefix + options.lang + options.fileSuffix + ".json", function(data){
                var i18nLang = {};
                if (data != null) {
                    i18nLang= data;
                }


                $(i).each(function(i) {
                    vari18nOnly = $(this).attr("i18n-only");
                    if($(this).val() != null && $(this).val() != "") {
                       if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "value") {
                           $(this).val(i18nLang[$(this).attr("i18n")])
                       }
                    }
                    if($(this).html() != null && $(this).html() != "") {
                       if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "html") {
                           $(this).html(i18nLang[$(this).attr("i18n")])
                       }
                    }
                    if($(this).attr('placeholder') != null && $(this).attr('placeholder') !="") {
                       if (i18nOnly == null || i18nOnly == undefined || i18nOnly =="" || i18nOnly == "placeholder") {
                           $(this).attr('placeholder',i18nLang[$(this).attr("i18n")])
                       }
                    }
                });
                options.callback();
            });
        }
    });
})(jQuery);

----------------------------------------------------------------------------------------------------

将语言文件放到webapp的i18n目录下



i18n_chinese.json类似内容如下

{

    "code":"邮编",

    "contactTelephone":"联系电话",

    "email":"邮箱"}

i18n_english.json

{

    "code":"Code",

    "contactTelephone":"ContactTelephone",

    "email":"Email"}

想要切换语言 给标签添加i18n属性

如<li i18n=" code">邮编</li>

我是通过Cookie方式绑定当前语言的,提取language.jsp如下:

<!DOCTYPE html>

<%@page language="Java"pageEncoding="UTF-8"%>

<script type="text/JavaScript"src="${ctx}/anfangyun/js/jquery.i18n.min.js"></script>

<script>

function setCookieLanguage(name,value) {

   document.cookie = name + '=' + value ;

};

function getCookieLanguage(name) {

   vararr = document.cookie.split('; ');

   for(vari = 0; i < arr.length; i++) {

        var arr1 = arr[i].split('=');

        if (arr1[0] == name) {

            return arr1[1];

        }

   }

   return'';

};

$(function(){

   //切换语言begin

   //获取浏览器默认语言

   var languageType =navigator.browserLanguage?navigator.browserLanguage:navigator.language;

   if (languageType.indexOf('zh')>-1 &&getCookieLanguage("languageCookie")==""){

      $("[i18n]").i18n({defaultLang:"chinese"});

   }

   if (languageType.indexOf('en')>-1 &&getCookieLanguage("languageCookie")==""){

      $("[i18n]").i18n({defaultLang:"english"});

   }

   if (languageType.indexOf('ru')>-1 &&getCookieLanguage("languageCookie")==""){

      $("[i18n]").i18n({defaultLang:"russian"});

   }

   //切换为中文 - 按钮

   $("#chinese").click(function() {

      $("[i18n]").i18n({defaultLang:"chinese"});//选择文件i18n_chinese.json

      setCookieLanguage("languageCookie","chinese");

   });

   //切换为英文 - 按钮

   $("#english").click(function() {

      $("[i18n]").i18n({defaultLang:"english"});//选择文件i18n_english.json

      setCookieLanguage("languageCookie","english");

   });

   //切换为俄文 - 按钮

   $("#russian").click(function() {

      $("[i18n]").i18n({defaultLang:"russian"});//选择文件i18n_russian.json

      setCookieLanguage("languageCookie","russian");

   });

   //点击后有cookie,定位选择文件名字

   if (getCookieLanguage("languageCookie").indexOf("chinese")>-1){

      $("#chinese").addClass('cur');

      $("[i18n]").i18n({defaultLang:"chinese"});

      //更改头部图片

   $(".afy_hd_capt").css("background-image","url(${ctx}/anfangyun/images/afy_hd_capt.png)");

   $(".afy_hd_dire").css("background-image","url(${ctx}/anfangyun/images/afy_hd_dire.png)");

   }

   if (getCookieLanguage("languageCookie").indexOf("english")>-1){

      $("[i18n]").i18n({defaultLang:"english"});

   }

   if (getCookieLanguage("languageCookie").indexOf("russian")>-1){

      $("[i18n]").i18n({defaultLang:"russian"});

   }

//切换语言end

});

 

</script>

----------------------


0人推荐
随时随地看视频
慕课网APP