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 相关文章推荐
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
layui表格分页 记录勾选的实例
Sep 02 Javascript
JavaScript数组排序功能简单实现
May 14 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
PHP取进制余数函数代码
2012/01/19 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP检测用户语言的方法
2015/06/15 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
json 实例详细说明教程
2009/10/31 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
vue-axios使用详解
2017/05/10 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
详解Python中的循环语句的用法
2015/04/09 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
中层竞聘演讲稿
2014/01/09 职场文书
机械专业求职信
2014/05/25 职场文书
装修活动策划方案
2014/08/27 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python