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 相关文章推荐
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
Layui表格监听行单双击事件讲解
Nov 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经典的给图片加水印程序
2006/12/06 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
php模板原理讲解
2013/11/13 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
详解jQuery设置内容和属性
2019/04/11 jQuery
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
Python的一些用法分享
2012/10/07 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
Python 处理文件的几种方式
2019/08/23 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
python批量修改文件名的示例
2020/09/27 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
网络信息管理员岗位职责
2014/01/05 职场文书
竞聘书格式及范文
2014/03/31 职场文书
售房协议书
2014/08/19 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
公司财务部岗位职责
2015/04/14 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python