jquery를 html과 결합하여 중국어와 영어 페이지 간 전환-PHP开发-php.cn

jquery를 html과 결합하여 중국어와 영어 페이지 간 전환

高洛峰

풀어 주다： 2016-12-03 14:55:48

원래의

3150명이 탐색했습니다.

목적: 국제화를 달성하기 위한 프런트 엔드(thymeleaf 템플릿 + jquery만 사용)

원인: 프런트 엔드는 널리 사용되는 vue.js 각도 및 기타 프레임워크를 사용하지 않으며 순수 HTML은 다음에 정의된 상수를 참조할 수 없습니다. js
jquery 할당 사용(2개의 템플릿(중국어, 영어) 인터페이스 유지) 직접 출력

해결 방법: https://github.com/coderifous/jquery-localize/ 현지화 플러그인 사용
귀하의 웹 사이트를 쉽게 국제화할 수 있게 해주는 jQuery 플러그인

단계:

1개의 html

<!DOCTYPE>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Language</title>
  <!-- 引用三个js文件 language_cookie.js实现记忆功能 下一次用户刷新界面之后 记得之前用户使用了那个语种 -->
  <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> 
     <select id="ddlSomoveLanguage" onchange="chgLang();">
        <option value="">LAGUAGE</option>
        <option value="ja">日本</option>
        <option value="en">ENGLISH</option>
      </select>
     </div>
 <div id="prod_navright">
      <ul> <!-- data-localize="hpt.management" 固定写法 对应语言包文件中的key -->
       <li><a data-localize="hpt.management" href="hospitality_management_ja.html" >MANAGEMENT</a></li>
       <li><a data-localize="hpt.support" href="hospitality_support_ja.html">SUPPORT</a></li>
       <li><a data-localize="hpt.tutorial" href="hospitality_tutorial_ja.html">TUTORIAL</a></li>
       <li><a data-localize="hpt.features" href="hospitality_features_ja.html">FEATURES</a></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(&#39;option:selected&#39;).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");
    }
  }
});

로그인 후 복사