jquery结合html实现中英文页面切换

更新时间：2016年11月29日 14:31:15 作者：星空之旅1995

这篇文章主要为大家详细介绍了jquery结合html实现中英文页面切换,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

目的：前端（只采用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

<!DOCTYPE>
<html lang="en">
  <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 class="top_lan"> 
     <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('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");
    }
  }
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jQuery使用动态渲染表单功能完成ajax文件下载
使用ajax实现文件下载，方便，快捷，时尚，多么有挑战的一个功能，首先获取url和data然后把参数组装成form的input再利用request发送请求，也就是动态渲染表单，提交表单后再删除，本例将实现文件下载功能，感兴趣的朋友可以聊解下
2013-01-01
JQuery之拖拽插件实现代码
一直以来，都对JS获取元素的位置感到非常的困惑：一会client、一会offset、一会scroll。再加上各大浏览器之间的不兼容，唉，搞得哥晕晕乎乎的。
2011-04-04
jquery遍历input取得input的name
非常简单的一句话即可实现，大家可以看看。
2009-04-04
14个有用的Jquery技巧分享
这篇文章主要介绍了14个有用的Jquery技巧分享,本文有一些性能优化技巧、编码优化技巧、简洁方法等,需要的朋友可以参考下
2015-01-01
jquery实现垂直和水平菜单导航栏
这篇文章主要为大家详细介绍了jquery实现垂直和水平菜单导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
jquery对象和DOM对象的区别介绍
jquery对象和DOM对象在使用过程很频繁，正是因为如此，好多朋友都不知道它们之间有什么区别，下面为大家详细介绍下，希望对大家有所帮助
2013-08-08
基于jQuery实现仿微博发布框字数提示
这篇文章主要为大家详细介绍了基于jQuery实现仿微博发布框字数提示的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-07
jquery随意添加移除html的实现代码
jquery随意添加移除html的实现代码，需要的朋友可以参考下。
2011-06-06
jquery实现表单验证并阻止非法提交
本文给大家分享的是使用jquery实现表单验证并阻止非法提交的代码，思路非常不错，这里推荐给小伙伴们参考下。
2015-07-07
JQuery调用WebServices的方法和4个实例
你是不是经常作这种开发，前端用JS写逻辑，后端用aspx或者ashx作服务？你是不是经常在请求aspx的时候在查询字符串中拼接诸如a.aspx?method=getDepartmetn&param1=1&param2=2的字符串？
2014-05-05