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中this关键字使用方法详解
Mar 08 Javascript
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
vue2.0项目实现路由跳转的方法详解
Jun 21 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
小程序Request的另类用法详解
Aug 09 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
VOLVO车载收音机
2021/03/02 无线电
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
说一说Python logging
2016/04/15 Python
python学习入门细节知识点
2018/03/29 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
简历中自我评价怎么写
2014/02/12 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
社会工作专业求职信
2014/07/15 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
python 如何用terminal输入参数
2021/05/25 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫