html+jquery实现页面中英文切换

目的: 前端(只采用thymeleaf模板+jquery) 实现国际化

由: 前端没有采用流行的vue.js angular 等框架,纯html不可以引用js中定义的常量
采用jquery赋值(维护2个模板(中,英)界面) 直接out

方案:采用https://github.com/coderifous/jquery-localize/ 一个本地化插件
a jQuery plugin that makes it easy to internationalize your web site

步骤:
1 html


<html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Languagetitle>
    
    <script src="jquery.js" type="text/javascript" charset="utf-8">script>
    <script src="jquery.localize.js" type="text/javascript" charset="utf-8">script>
    <script src="language_cookie.js" type="text/javascript" charset="utf-8">script>
head>
<body>
 <div class="top_lan"> 
          <select id="ddlSomoveLanguage" onchange="chgLang();">
               <option value="">LAGUAGEoption>
               <option value="ja">日本option>
                <option value="en">ENGLISHoption>
            select>
         div>
 <div id="prod_navright">
            <ul>  
              <li><a data-localize="hpt.management" href="hospitality_management_ja.html" >MANAGEMENTa>li>
              <li><a data-localize="hpt.support" href="hospitality_support_ja.html">SUPPORTa>li>
              <li><a data-localize="hpt.tutorial" href="hospitality_tutorial_ja.html">TUTORIALa>li>
              <li><a data-localize="hpt.features" href="hospitality_features_ja.html">FEATURESa>li>
            ul>
          div>
body>
html>

2 语言包文件
text-en.json

{
 "hpt":{  
    "features": "FEATURES",
    "tutorial": "TUTORIAL",
    "support": "SUPPORT",
    "management": "MANAGEMENT"
}
}

text-ja.json
·······

3 language_cookie.js 需要在服务器上执行 本机执行无法获取需要的json文件 主要的代码 标记处的代码底层可能使用的是xmlHttpRequest实现获取.json语言包文件

var name = "somoveLanguage";
function chgLang() {
    var value = $("#ddlSomoveLanguage").children('option:selected').val();
    SetCookie(name, value);
    console.log("come in chgLang" + name + value);
    location.reload();
}
function SetCookie(name, value) {
    var Days = 30; //此 cookie 将被保存 30 天
    var exp = new Date(); //new Date("December 31, 9998");
    exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){  //取cookies函数
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]);
    return null
}
$(function() {
    var uulanguage = (navigator.language || navigator.browserLanguage).toLowerCase();
    console.log("come in readly" + uulanguage);

    if (uulanguage.indexOf("en") > -1) {
        $("[data-localize]").localize("text", {   //**主要的代码** jquery.localize.js 底层实现切换逻辑
            pathPrefix: "lang",
            language: "en"
        });
         console.log("come in en");
    } else if (uulanguage.indexOf("ja") > -1) {
        $("[data-localize]").localize("text", {
            pathPrefix: "lang",
            language: "ja"
        });
          console.log("come in ja");
    } else {
        $("[data-localize]").localize("text", {
            pathPrefix: "lang",
            language: "en"
        });
        console.log("come in moren en");
    };
     //根据cookie选择语言
    if (getCookie(name) != "") {
        if (getCookie(name) == "ja") {
            $("[data-localize]").localize("text", {
                pathPrefix: "lang",
                language: "ja"
            });
            console.log("come in cookie ja");
        }
        if (getCookie(name) == "en") {
            $("[data-localize]").localize("text", {
                pathPrefix: "lang",
                language: "en"
            });
            console.log("come in cookie en");
        }
    }
});

angular实现国际化方案
http://yijiebuyi.com/blog/3b55056c87b73ba606c19e9338dca679.html

你可能感兴趣的:(前端)