使用jquery.i18n实现国际化多语言显示

问题描述：
有时候你写的页面需要兼容多国语言，不同的国家浏览不同的语言。这种方法并不需要重新请求数据库拿数据，只需要更改文案之后页面会自动根据浏览器语言自动切换。

实现方法：
1，首先需要获取到浏览器的语言。当然还需要引入jquery.i18n.js 和jquery.js。

// begin i18n获取浏览器语言jQuery(document).ready(function() {var language;language = jQuery.i18n.normaliseLanguageCode({}); //获取浏览器的语言if(language == 'zh-MO' || language == 'zh_TW' || language == 'zh-rHK') {language = 'zh_HK';}if(language.indexOf("zh_HANT") != -1) {language = "zh_HK";}if(language == 'zh_CN' || language == 'zh_CH' || language == 'zh_AE') {language = 'zh';}// 这个就是将i18n翻译后的语言转换出来的函数loadProperties(language);console.log(language);$(document).attr("title", $.i18n.prop('rechargeFAQ_title'));$("meta[name='Keywords']").attr('content', $.i18n.prop('keywords'));$("meta[name='Description']").attr('content', $.i18n.prop('description'));// ar翻转页面if(language == 'ar') {$("html").css("direction", "rtl");$(".recharge-h3").css("padding-right", "0.32rem");}});

2，你需要配置 i18n 的函数配置。我这里封装了一个函数。

//用于页面初始化之后加载页面
function loadProperties(language) {jQuery.i18n.properties({ // 加载资浏览器语言对应的资源文件name: 'multi', // 资源文件名称path: './i18n/', // 资源文件路径cache: true,language: language, //zh中文  en英文mode: 'map', // 用 Map 的方式使用资源文件中的值callback: function() { // 加载成功后设置显示内容//   $(document).attr("title",$.i18n.prop('login.title'));var insertEle = $(".i18n");insertEle.each(function() {// 根据i18n元素的 ID 获取内容写入页面热// $(this).html($(this).attr('id'));try {if(typeof($(this).attr("placeholder"))!="undefined"){$(this).attr("placeholder",$.i18n.prop($(this).attr('id'))); }else if(typeof($(this).attr("button"))!="undefined"){$(this).attr("button",$.i18n.prop($(this).attr('id'))); }else {$(this).html($.i18n.prop($(this).attr('id')));}} catch(e) {console.log("key不存在，请在配置文件中配置对应的key：" + $(this).attr('id'));}});}});
};

3，使用方法
首先需要建一个文件夹。文件夹的名字跟第二步中path配置的要一样。至于文件夹下的multi文件都是固定的格式。i18n_en.json中_后面的是语言的简写，en代表的是英文，你需要兼容哪种语言就要添加一种该语言的json文件，

4，json文件中的数据样式如下：
等号前面的是页面中元素上的id标识，后面的是这个元素中应该显示的数据。

EnterID    =   点击输入 FaceCast ID
select-specifications   =   点击选择充值规格
check-account   =   核对充值账号
whatID  =   什么是 FaceCast ID ？
getID   =   输入 FaceCast ID
maskgetID = 输入 FaceCast ID
toastTips-format-error  =   输入格式有误
toastTips-no-exist  =   该ID不存在
toastTipsPlease =   请先核对充值账号
common-problem  =   常见问题
transaction-succeeded   =   交易成功
transaction-failed  =   交易失败
transaction-cancel  =   交易取消
whether-account =   1.我充值后怎么查看是否到账？
answer-whether-account  =   充值后可回到 APP 的【我的】-【钱包】中查看钻石
no-account  =   2.充值后若是没有到账怎么办？
answer-no-account   =   请在 APP 的【消息】-【官方消息】-【反馈与帮助】中提交您的问题，并提供以下信息，我们的客服将为您提供帮助。
recharge-money  =   1.充值金额和账户 ID
recharge-time   =   2.充值的时间和日期
recharge-shot   =   3.支付成功的屏幕截图
recharge-wrong  =   3.充错账户，充错金额怎么办
answer-recharge-wrong   =   请您在输入支付密码前，务必仔细确认充值账户 ID 和充值金额信息后再进行购买。错充金额无法退还，错充账户您可尝试与实际充值的 ID 用户联系，与对方协商是否愿意补偿您的充值。
refund  =   4.退款
answer-refund   =   抱歉！FaceCast 目前不支持任何形式的退款。
buy-enter-link  =   购买钻石可通过链接进行充值，<a class="web-link" href="https://pay.facecast.live/" >https://pay.facecast.live</a> 将链接复制在手机浏览器中打开，进入购买页面，核对账号后，选择相应的规格并使用合适的支付方式进行支付即可～ 优惠多多！
buy-notice-a    =   注意: <a>pay.facecast.live</a> 是 FaceCast 唯一官方购买钻石网址
replace =   更换
sureBtn =   确定
pay-style   =   选择支付方式
goBack  =   回到首页
toastTips   =   输入 FaceCast ID
rechargeFAQ_title   =   常见问题
PayStatusSuccess_title  =   交易成功
PayStatusFail_title =   交易失败
PayStatusCancel_title   =   交易取消
Diamonds_title  =   FaceCast 钻石充值官方网站
buy-notice  =   注意  pay.facecast.live 是 FaceCast 唯一官方购买钻石网站，客服咨询请进入【消息】-【官方消息】-【反馈与帮助】
RechargeHelp_title  =   充值帮助
openAPP =   打开 FaceCast APP
buy-diamonds-tit    =   购买钻石服务
description =   FaceCast 唯一官方钻石充值网站 ， FaceCast 是一款国际化社交软件，全球超过150多个国家和地区的用户正在使用 FaceCast
keywords    =   FaceCast 充值,FaceCast 钻石充值,FaceCast 官方充值,FaceCast 官方充值网站
wxPay = 请确认微信支付是否已完成
Completed = 已完成支付
failedPay = 支付遇到问题,重新支付
toastTips-no-complete = 支付未完成，请重新支付

5，页面中的应用。
需要同时给元素添加id和class，这个 id 是第四条中提到的等号前面的id。这个类是一个统一的，只要你需要添加多语言兼容你就需要在这个元素中添加一个 i18n 的类。

<body style="background: #F7F7F7;"><h3 class="recharge-h3 i18n" id="common-problem"></h3><div class="recharge-text mar-btm"><p class="text-link i18n" id="whether-account"></p><p class="text-tips i18n" id="answer-whether-account"></p><hr class="hr-line" /><p class="text-link i18n" id="no-account"></p><p class="text-tips i18n" id="answer-no-account"></p><p class="text-tips i18n" id="recharge-money"></p><p class="text-tips i18n" id="recharge-time"></p><p class="text-tips i18n" id="recharge-shot"></p><hr class="hr-line" /><p class="text-link i18n" id="recharge-wrong"> </p><p class="text-tips i18n" id="answer-recharge-wrong"></p><hr class="hr-line" /><p class="text-link i18n" id="refund"></p><p class="text-tips i18n" id="answer-refund"></p></div><!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKG5ZCG"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) --></body>

使用jquery.i18n实现国际化多语言显示相关推荐

Vue + Vant + i18n 实现国际化及语言切换
库版本 package version vue 2.6.11 vant 2.12.6 vue-i18n 8.23.0 最近一个用 react-mobile 的小型 IM App 被客户吐槽UI,所以现 ...
jquery.i18n实现国际化
导入jquery.i18n.js文件 jquery-i18n-properties 文件目录结构: 准备翻译文件通过阅读源码可知,翻译一种语言至多需要三个propoties文件基本文件,所有语言均 ...
i18n php_PHP国际化多语言的实现（非I18N）
PHP开发网站.系统会遇到需要支持多种语言的情况,这时候我们就需要国际化.一般都是推荐使用I18N,而使用I18N我们需要下载相应软件编辑PO文件,然后还要PHP的gettext扩展,有点小烦. 下面 ...
每个 Web 开发者应该知道的 jQuery i18n 知识！——爱创课堂
在设计网站时,一个重要的考虑是国际化.世界上每个地区和国家对于文本.消息.数字和日期应该如何出现有不同的期望.特定应用程序的每个用户期望所有文本和消息以熟悉的格式显示.JavaScript有一个很好的 ...
jQuery.i18n.properties实现js国际化
当我们在做前台页面开发时,由于页面内容过多,过于繁杂,有的时候一个页面上千行的(当然这样的页面也就算一般的),为了减少页面的内容,我们将页面的js文件提取出去,放入一个特定的js文件中,然后在页面中导 ...
使用 jQuery.i18n.properties 实现 Web 前端的国际化
jQuery.i18n.properties 简介在介绍 jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国际化英文单词为:Internationalization, ...
【vue-element-admin】4.x 添加 i18n 国际化多语言切换
花裤衩前辈的vue-element-admin模块在4.x的大版本中去除了对i18n国际化的支持,本次因项目需要,在一个基于 vue-element-admin V4.2.1 版本模板开发的项目中,需 ...
☘gMIS吉密斯i18n国际化多语言更新
gMIS吉密斯部署和使用范围日益扩大,跨国多语言版本成为迫切需要的功能,早在2018年年中就考虑要增加这一功能--在gMIS吉密斯中实现多语言版本的支持.以期实现gMIS吉密斯的跨行业.跨地区和国际化 ...
多语言切换jquery.i18n.min.js
项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jque ...

使用jquery.i18n实现国际化多语言显示

使用jquery.i18n实现国际化多语言显示相关推荐

最新文章

热门文章