写html的国际化标准,Jquery国际化，普通html+jquery项目国际化配置

使用jquery.i18n.js

需要引入jquery

.html文件引入

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);

根目录下新建文件夹 i18n

在文件夹i18n新建i181_cn.json

{

"i18n.menu-introduction": "集团介绍",

"i18n.menu-business": "业务领域",

"i18n.menu-product": "产品服务",

"i18n.menu-news": "新闻中心",

"i18n.menu-contact": "联系我们"

}

在文件夹i18n新建i181_en.json

{

"i18n.menu-introduction": "INTRODUCTION",

"i18n.menu-business": "BUSINESS",

"i18n.menu-product": "PRODUCT",

"i18n.menu-news": "NEWS",

"i18n.menu-contact": "CONTACT"

}

这两个文件存放语言包，如果有需求可以建更多个语言包

在html中使用

集团介绍

业务领域

产品服务

新闻中心

联系我们

切换时方法

function languageSelect(defaultLang) {

$("[i18n]").i18n({

defaultLang: defaultLang,

filePath: "../i18n/",

filePrefix: "i18n_",

fileSuffix: "",

forever: true,

callback: function (res) {

// console.log(res)

}

});

}

filePath 语言包文件目录，filePrefix 这个字段可以看一下我们语言包文件名，对应匹配的。

重点来了！！！

当切换语言时，调用languageSelect(defaultLang)，参数为语言包后缀cn,en....

栗子

当我切换时

我在index.html

if(!sessionStorage.getItem('__bdht_lan')){

sessionStorage.setItem('__bdht_lan',"cn")

}

我在 index.html 存储了一个{__bdht_lan: "cn"}

sessionStorage.setItem("__bdht_lan","en");

var defaultLang = sessionStorage.getItem("__bdht_lan");

languageSelect(defaultLang);

后面每次切换时更改这个变量为当前 语言，然后去调用

这么做为的是所有页面都可以去响应！

到这里就配置好了！

如果报错没有服务，自己在本地配置一个环境 。例如 express