使用jquery实现中英文切换

中英文切换有很多种方式，现在就基于jquery的一种方式，使用的是：jquery.i18n.js

1，首先先引入jquery文件

2，然后新建文件jquery.i18n.js

(function ($) {$.fn.extend({i18n: function (options) {var defaults = {lang: "",defaultLang: "",filePath: "./i18n/",filePrefix: "i18n_",fileSuffix: "",forever: true,callback: function () {},};function getCookie(name) {var arr = document.cookie.split("; ");for (var i = 0; i < arr.length; i++) {var arr1 = arr[i].split("=");if (arr1[0] == name) {return arr1[1];}}return "";}function setCookie(name, value, myDay) {var oDate = new Date();oDate.setDate(oDate.getDate() + myDay);document.cookie = name + "=" + value + "; expires=" + oDate;}var options = $.extend(defaults, options);if (getCookie("i18n_lang") != "" && getCookie("i18n_lang") != "undefined" && getCookie("i18n_lang") != null) {defaults.defaultLang = getCookie("i18n_lang");} else if (options.lang == "" && defaults.defaultLang == "") {throw "defaultLang must not be null !";}if (options.lang != null && options.lang != "") {if (options.forever) {setCookie("i18n_lang", options.lang);} else {$.removeCookie("i18n_lang");}} else {options.lang = defaults.defaultLang;}var i = this;$.getJSON(options.filePath + options.filePrefix + options.lang + options.fileSuffix + ".json", function (data) {var i18nLang = {};if (data != null) {i18nLang = data;}$(i).each(function (i) {var i18nOnly = $(this).attr("i18n-only");if ($(this).val() != null && $(this).val() != "") {if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "value") {$(this).val(i18nLang[$(this).attr("i18n")]);}}if ($(this).html() != null && $(this).html() != "") {if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "html") {$(this).html(i18nLang[$(this).attr("i18n")]);}}if ($(this).attr("placeholder") != null && $(this).attr("placeholder") != "") {if (i18nOnly == null || i18nOnly == undefined || i18nOnly == "" || i18nOnly == "placeholder") {$(this).attr("placeholder", i18nLang[$(this).attr("i18n")]);}}});options.callback();});},});
})(jQuery);

注意filePath: "./i18n/",是json文件的路径

3.新建i18n文件夹，里面就是需要转换的字段，i18n_cn.json:

i18n_en.json:

4.在html中编辑内容：

<div class="login-header"><div class="switch" style="margin:0 0 20px 0"><select class="trans-en" style="border:none;outline:none;border-radius: 3px;width: 100px;padding-left: 10px;"><option value="中文">中文</option><option value="English">English</option></select></div><span class="welcome_text" i18n="welcomeIn">欢迎登入</span>
</div>

在需要中英文切换的地方加上i18n属性就行

5.通过下拉选择切换：

/*默认语言*/
$(document).ready(function() {var defaultLang='cn';function getLang(){if (document.cookie.indexOf('grycan.cn.bLang') != -1) {var arrCookie = document.cookie.split(';')for (let i = 0; i < arrCookie.length; i++) {var arr = arrCookie[i].split('=');if ('grycan.cn.bLang' == arr[0].trim()) {defaultLang = arr[1];languageSelect(defaultLang);if (defaultLang == 'en') {$('.trans-en').val('English')} else if(defaultLang == 'cn') {$('.trans-en').val('中文')}break;}}}}getLang();/*调用语言包*/function languageSelect(defaultLang) {$("[i18n]").i18n({defaultLang: defaultLang,filePath: "./i18n/",filePrefix: "i18n_",fileSuffix: "",forever: true,callback: function(res) {}});}languageSelect(defaultLang)// 设置cookiefunction setLang(name,value,path){var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); var paths = ";path=" + path;document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString() +paths;}$('.trans-en').change(function(){var condition = $(this).val();if(condition == 'English'){defaultLang = 'en';setLang('grycan.cn.bLang','en','/');window.localStorage.setItem('langType','en')}else if(condition == '中文'){defaultLang = 'cn';setLang('grycan.cn.bLang','cn','/');window.localStorage.setItem('langType','zh')}getLang();// document.location.reload(true);})
})
// end

使用jquery实现中英文切换相关推荐

js实现中英文切换（jquery.i18n.js）
jquery.i18n.js 实现中英文切换方法由于在公司官网所用到中英文切换功能,代码时js.jq写的.个人简单记录一下过程: 用的方法是 jquery.i18n.js. jquery.i18n ...
这可能是目前最方便的网站中英文切换（理论支持所有语言）
调用微软页面翻译API : The Translator Web Widget API 实现自动对页面进行中英文翻译微软提供的Demo实现上也很简单,分如下几步: 引入The Translato ...
正则表达式split匹配多种例如 “】”，“，”两种（页面级中英文切换方案）...
在做登陆界面的时候,因为涉及到中英文因为前后台已经分离,所以前端需要自行设计中英文做法: 编写两个文件,一个中文文件,一个是英文文件,分别放在对应的目录下面文件的内容 {"login& ...
ae中英文切换_AE技巧，AE CC软件如何切换中英文版
平时使用,中文界面更容易操作,但有时候需要切换成英文版使用,那AE怎么切换中英文界面呢?今天就来跟大家讲解一下切换语言界面的方法. 中文界面固然看着熟悉,对于入门来说也是非常有利的.但是,我们在学习过 ...
jenkins页面中英文切换配置
jenkins中英文切换配置 Jenkins--英文切换成中文更新了一下jenkins的war包, 结果启动后成英文的了,后来百度出解决方案: 原文地址:https://blog.csdn.net/ ...
开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo项目分析
开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo,这个是一个在网上流传比较多的Spri ...
SpringBoot中英文切换/国际化——java后端怎么用预置文本的内容替换web网页内容（Resource Bundle）
文章目录创建预置文件文本内容 Thymeleaf修改前端使其获得预置文本内容 html页面设置跳转标签和传值创建一个MyLocaleResolver配置文件在MvcConfiguration中注 ...
中英文切换_王者荣耀：模拟战奖励一览，新增中英文切换，李白第二套星元来袭...
王者荣耀体验服在今日凌晨更新后新增了不少功能,比如模拟战加入了精灵机制,以及局内新增语言设置,另外李白继千年之狐后,又有一套皮肤加入"星计划",即李白团战精神皮肤敏锐之力将迎来星元 ...
jquery背景自动切换特效
查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...

使用jquery实现中英文切换

使用jquery实现中英文切换相关推荐

最新文章

热门文章