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


Posted in Javascript onNovember 29, 2016

目的:前端(只采用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");
    }
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
Sea.JS知识总结
May 05 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
基于Three.js插件制作360度全景图
Nov 29 #Javascript
jquery购物车结算功能实现方法
Oct 29 #Javascript
JavaScript微信定位功能实现方法
Nov 29 #Javascript
jQuery中的select操作详解
Nov 29 #Javascript
微信小程序加载更多 点击查看更多
Nov 29 #Javascript
AngularJs表单验证实例代码解析
Nov 29 #Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php创建session的方法实例详解
2015/01/27 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP中“=&gt;
2019/03/01 PHP
javascript prototype 原型链
2009/03/12 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
学习Python爬虫的几点建议
2020/08/05 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
租房协议书范本
2014/04/09 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server