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 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
Feb 19 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
Layui实现主窗口和Iframe层参数传递
Nov 14 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
基于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
我的论坛源代码(八)
2006/10/09 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
js文件包含的几种方式介绍
2014/09/28 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
vue-router单页面路由
2017/06/17 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
wxPython实现分隔窗口
2019/11/19 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
通知的写法
2015/04/23 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
旅游安全责任协议书
2016/03/22 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
前端JavaScript大管家 package.json
2021/11/02 Javascript
使用Python解决图表与画布的间距问题
2022/04/11 Python