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实现的网页颜色代码表全集
Jul 17 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
May 10 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
vue配置接口域名方法总结
May 12 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 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 获取完整url地址
2008/12/20 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
基于php-fpm的配置详解
2013/06/03 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
写给小白看的JavaScript异步
2017/11/29 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
采购文员岗位职责
2013/11/20 职场文书
体育教师求职信
2014/06/30 职场文书
企业战略合作意向书
2015/05/08 职场文书
公司的力量观后感
2015/06/05 职场文书
投诉信范文
2015/07/02 职场文书