新建一个项目 里面新建两文件夹 一个用于放置js文件 一个语言包的文件
搜狗截图20年04月12日1121_1.png
第一步 js文件里面新建三个js
搜狗截图20年04月12日1123_2.png
第一个 js 引用 jquery-3.1.1.min.js
第二个 js 引用 jquery.i18n.properties.min.js
/******************************************************************************
* jquery.i18n.properties
*
* Dual licensed under the GPL (http://dev.jquery.com/browser/trunk/jquery/GPL-LICENSE.txt) and
* MIT (http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt) licenses.
*
* @version 1.0.x
* @author Nuno Fernandes
* @url www.codingwithcoffee.com
* @inspiration Localisation assistance for jQuery (http://keith-wood.name/localisation.html)
* by Keith Wood (kbwood{at}iinet.com.au) June 2007
*
*****************************************************************************/
(function($) {
$.i18n = {};
/** Map holding bundle keys (if mode: 'map') */
$.i18n.map = {};
/**
* Load and parse message bundle files (.properties),
* making bundles keys available as javascript variables.
*
* i18n files are named <name>.js, or <name>_<language>.js or <name>_<language>_<country>.js
* Where:
* The <language> argument is a valid ISO Language Code. These codes are the lower-case,
* two-letter codes as defined by ISO-639. You can find a full list of these codes at a
* number of sites, such as: http://www.loc.gov/standards/iso639-2/englangn.html
* The <country> argument is a valid ISO Country Code. These codes are the upper-case,
* two-letter codes as defined by ISO-3166. You can find a full list of these codes at a
* number of sites, such as: http://www.iso.ch/iso/en/prods-services/iso3166ma/02iso-3166-code-lists/list-en1.html
*
* Sample usage for a bundles/Messages.properties bundle:
* $.i18n.properties({
* name: 'Messages',
* language: 'en_US',
* path: 'bundles'
* });
* @param name (string/string[], optional) names of file to load (eg, 'Messages' or ['Msg1','Msg2']). Defaults to "Messages"
* @param language (string, optional) language/country code (eg, 'en', 'en_US', 'pt_PT'). if not specified, language reported by the browser will be used instead.
* @param path (string, optional) path of directory that contains file to load
* @param mode (string, optional) whether bundles keys are available as JavaScript variables/functions or as a map (eg, 'vars' or 'map')
* @param cache (boolean, optional) whether bundles should be cached by the browser, or forcibly reloaded on each page load. Defaults to false (i.e. forcibly reloaded)
* @param encoding (string, optional) the encoding to request for bundles. Property file resource bundles are specified to be in ISO-8859-1 format. Defaults to UTF-8 for backward compatibility.
* @param callback (function, optional) callback function to be called after script is terminated
*/
$.i18n.properties = function(settings) {
// set up settings
var defaults = {
name: 'Messages',
language: '',
path: '',
mode: 'vars',
cache: false,
encoding: 'UTF-8',
callback: null
};
settings = $.extend(defaults, settings);
if(settings.language === null || settings.language == '') {
settings.language = $.i18n.browserLang();
}
if(settings.language === null) {settings.language='';}
// load and parse bundle files
var files = getFiles(settings.name);
for(i=0; i<files.length; i++) {
// 1. load base (eg, Messages.properties)
// 此行为博主注释
// loadAndParseFile(settings.path + files[i] + '.properties', settings);
// 2. with language code (eg, Messages_pt.properties)
if(settings.language.length >= 2) {
loadAndParseFile(settings.path + files[i] + '_' + settings.language.substring(0, 2) +'.properties', settings);
}
// 3. with language code and country code (eg, Messages_pt_PT.properties)
if(settings.language.length >= 5) {
loadAndParseFile(settings.path + files[i] + '_' + settings.language.substring(0, 5) +'.properties', settings);
}
}
// call callback
if(settings.callback){ settings.callback(); }
};
/**
* When configured with mode: 'map', allows access to bundle values by specifying its key.
* Eg, jQuery.i18n.prop('com.company.bundles.menu_add')
*/
$.i18n.prop = function(key /* Add parameters as function arguments as necessary */) {
var value = $.i18n.map[key];
if (value == null)
return '[' + key + ']';
// if(arguments.length < 2) // No arguments.
// //if(key == 'spv.lbl.modified') {alert(value);}
// return value;
// if (!$.isArray(placeHolderValues)) {
// // If placeHolderValues is not an array, make it into one.
// placeHolderValues = [placeHolderValues];
// for (var i=2; i<arguments.length; i++)
// placeHolderValues.push(arguments[i]);
// }
// Place holder replacement
/**
* Tested with:
* test.t1=asdf ''{0}''
* test.t2=asdf '{0}' '{1}'{1}'zxcv
* test.t3=This is \"a quote" 'a''{0}''s'd{fgh{ij'
* test.t4="'''{'0}''" {0}{a}
* test.t5="'''{0}'''" {1}
* test.t6=a {1} b {0} c
* test.t7=a 'quoted \\ s\ttringy' \t\t x
*
* Produces:
* test.t1, p1 ==> asdf 'p1'
* test.t2, p1 ==> asdf {0} {1}{1}zxcv
* test.t3, p1 ==> This is "a quote" a'{0}'sd{fgh{ij
* test.t4, p1 ==> "'{0}'" p1{a}
* test.t5, p1 ==> "'{0}'" {1}
* test.t6, p1 ==> a {1} b p1 c
* test.t6, p1, p2 ==> a p2 b p1 c
* test.t6, p1, p2, p3 ==> a p2 b p1 c
* test.t7 ==> a quoted \ s tringy x
*/
var i;
if (typeof(value) == 'string') {
// Handle escape characters. Done separately from the tokenizing loop below because escape characters are
// active in quoted strings.
i = 0;
while ((i = value.indexOf('\\', i)) != -1) {
if (value[i+1] == 't')
value = value.substring(0, i) + '\t' + value.substring((i++) + 2); // tab
else if (value[i+1] == 'r')
value = value.substring(0, i) + '\r' + value.substring((i++) + 2); // return
else if (value[i+1] == 'n')
value = value.substring(0, i) + '\n' + value.substring((i++) + 2); // line feed
else if (value[i+1] == 'f')
value = value.substring(0, i) + '\f' + value.substring((i++) + 2); // form feed
else if (value[i+1] == '\\')
value = value.substring(0, i) + '\\' + value.substring((i++) + 2); // \
else
value = value.substring(0, i) + value.substring(i+1); // Quietly drop the character
}
// Lazily convert the string to a list of tokens.
var arr = [], j, index;
i = 0;
while (i < value.length) {
if (value[i] == '\'') {
// Handle quotes
if (i == value.length-1)
value = value.substring(0, i); // Silently drop the trailing quote
else if (value[i+1] == '\'')
value = value.substring(0, i) + value.substring(++i); // Escaped quote
else {
// Quoted string
j = i + 2;
while ((j = value.indexOf('\'', j)) != -1) {
if (j == value.length-1 || value[j+1] != '\'') {
// Found start and end quotes. Remove them
value = value.substring(0,i) + value.substring(i+1, j) + value.substring(j+1);
i = j - 1;
break;
}
else {
// Found a double quote, reduce to a single quote.
value = value.substring(0,j) + value.substring(++j);
}
}
if (j == -1) {
// There is no end quote. Drop the start quote
value = value.substring(0,i) + value.substring(i+1);
}
}
}
else if (value[i] == '{') {
// Beginning of an unquoted place holder.
j = value.indexOf('}', i+1);
if (j == -1)
i++; // No end. Process the rest of the line. Java would throw an exception
else {
// Add 1 to the index so that it aligns with the function arguments.
index = parseInt(value.substring(i+1, j));
if (!isNaN(index) && index >= 0) {
// Put the line thus far (if it isn't empty) into the array
var s = value.substring(0, i);
if (s != "")
arr.push(s);
// Put the parameter reference into the array
arr.push(index);
// Start the processing over again starting from the rest of the line.
i = 0;
value = value.substring(j+1);
}
else
i = j + 1; // Invalid parameter. Leave as is.
}
}
else
i++;
}
// Put the remainder of the no-empty line into the array.
if (value != "")
arr.push(value);
value = arr;
// Make the array the value for the entry.
$.i18n.map[key] = arr;
}
if (value.length == 0)
return "";
if (value.lengh == 1 && typeof(value[0]) == "string")
return value[0];
var s = "";
for (i=0; i<value.length; i++) {
if (typeof(value[i]) == "string")
s += value[i];
// Must be a number
else if (value[i] + 1 < arguments.length)
s += arguments[value[i] + 1];
else
s += "{"+ value[i] +"}";
}
return s;
};
/** Language reported by browser, normalized code */
$.i18n.browserLang = function() {
return normaliseLanguageCode(navigator.language /* Mozilla */ || navigator.userLanguage /* IE */);
}
/** Load and parse .properties files */
function loadAndParseFile(filename, settings) {
$.ajax({
url: filename,
async: false,
cache: settings.cache,
contentType:'text/plain;charset='+ settings.encoding,
dataType: 'text',
success: function(data, status) {
parseData(data, settings.mode);
}
});
}
/** Parse .properties files */
function parseData(data, mode) {
var parsed = '';
var parameters = data.split( /\n/ );
var regPlaceHolder = /(\{\d+\})/g;
var regRepPlaceHolder = /\{(\d+)\}/g;
var unicodeRE = /(\\u.{4})/ig;
for(var i=0; i<parameters.length; i++ ) {
parameters[i] = parameters[i].replace( /^\s\s*/, '' ).replace( /\s\s*$/, '' ); // trim
if(parameters[i].length > 0 && parameters[i].match("^#")!="#") { // skip comments
var pair = parameters[i].split('=');
if(pair.length > 0) {
/** Process key & value */
var name = unescape(pair[0]).replace( /^\s\s*/, '' ).replace( /\s\s*$/, '' ); // trim
var value = pair.length == 1 ? "" : pair[1];
// process multi-line values
while(value.match(/\\$/)=="\\") {
value = value.substring(0, value.length - 1);
value += parameters[++i].replace( /\s\s*$/, '' ); // right trim
}
// Put values with embedded '='s back together
for(var s=2;s<pair.length;s++){ value +='=' + pair[s]; }
value = value.replace( /^\s\s*/, '' ).replace( /\s\s*$/, '' ); // trim
/** Mode: bundle keys in a map */
if(mode == 'map' || mode == 'both') {
// handle unicode chars possibly left out
var unicodeMatches = value.match(unicodeRE);
if(unicodeMatches) {
for(var u=0; u<unicodeMatches.length; u++) {
value = value.replace( unicodeMatches[u], unescapeUnicode(unicodeMatches[u]));
}
}
// add to map
$.i18n.map[name] = value;
}
/** Mode: bundle keys as vars/functions */
if(mode == 'vars' || mode == 'both') {
value = value.replace( /"/g, '\\"' ); // escape quotation mark (")
// make sure namespaced key exists (eg, 'some.key')
checkKeyNamespace(name);
// value with variable substitutions
if(regPlaceHolder.test(value)) {
var parts = value.split(regPlaceHolder);
// process function args
var first = true;
var fnArgs = '';
var usedArgs = [];
for(var p=0; p<parts.length; p++) {
if(regPlaceHolder.test(parts[p]) && (usedArgs.length == 0 || usedArgs.indexOf(parts[p]) == -1)) {
if(!first) {fnArgs += ',';}
fnArgs += parts[p].replace(regRepPlaceHolder, 'v$1');
usedArgs.push(parts[p]);
first = false;
}
}
parsed += name + '=function(' + fnArgs + '){';
// process function body
var fnExpr = '"' + value.replace(regRepPlaceHolder, '"+v$1+"') + '"';
parsed += 'return ' + fnExpr + ';' + '};';
// simple value
}else{
parsed += name+'="'+value+'";';
}
} // END: Mode: bundle keys as vars/functions
} // END: if(pair.length > 0)
} // END: skip comments
}
eval(parsed);
}
/** Make sure namespace exists (for keys with dots in name) */
// TODO key parts that start with numbers quietly fail. i.e. month.short.1=Jan
function checkKeyNamespace(key) {
var regDot = /\./;
if(regDot.test(key)) {
var fullname = '';
var names = key.split( /\./ );
for(var i=0; i<names.length; i++) {
if(i>0) {fullname += '.';}
fullname += names[i];
if(eval('typeof '+fullname+' == "undefined"')) {
eval(fullname + '={};');
}
}
}
}
/** Make sure filename is an array */
function getFiles(names) {
return (names && names.constructor == Array) ? names : [names];
}
/** Ensure language code is in the format aa_AA. */
function normaliseLanguageCode(lang) {
lang = lang.toLowerCase();
if(lang.length > 3) {
lang = lang.substring(0, 3) + lang.substring(3).toUpperCase();
}
return lang;
}
/** Unescape unicode chars ('\u00e3') */
function unescapeUnicode(str) {
// unescape unicode codes
var codes = [];
var code = parseInt(str.substr(2), 16);
if (code >= 0 && code < Math.pow(2, 16)) {
codes.push(code);
}
// convert codes to text
var unescaped = '';
for (var i = 0; i < codes.length; ++i) {
unescaped += String.fromCharCode(codes[i]);
}
return unescaped;
}
/* Cross-Browser Split 1.0.1
(c) Steven Levithan <stevenlevithan.com>; MIT License
An ECMA-compliant, uniform cross-browser split method */
var cbSplit;
// avoid running twice, which would break `cbSplit._nativeSplit`'s reference to the native `split`
if (!cbSplit) {
cbSplit = function(str, separator, limit) {
// if `separator` is not a regex, use the native `split`
if (Object.prototype.toString.call(separator) !== "[object RegExp]") {
if(typeof cbSplit._nativeSplit == "undefined")
return str.split(separator, limit);
else
return cbSplit._nativeSplit.call(str, separator, limit);
}
var output = [],
lastLastIndex = 0,
flags = (separator.ignoreCase ? "i" : "") +
(separator.multiline ? "m" : "") +
(separator.sticky ? "y" : ""),
separator = RegExp(separator.source, flags + "g"), // make `global` and avoid `lastIndex` issues by working with a copy
separator2, match, lastIndex, lastLength;
str = str + ""; // type conversion
if (!cbSplit._compliantExecNpcg) {
separator2 = RegExp("^" + separator.source + "$(?!\\s)", flags); // doesn't need /g or /y, but they don't hurt
}
/* behavior for `limit`: if it's...
- `undefined`: no limit.
- `NaN` or zero: return an empty array.
- a positive number: use `Math.floor(limit)`.
- a negative number: no limit.
- other: type-convert, then use the above rules. */
if (limit === undefined || +limit < 0) {
limit = Infinity;
} else {
limit = Math.floor(+limit);
if (!limit) {
return [];
}
}
while (match = separator.exec(str)) {
lastIndex = match.index + match[0].length; // `separator.lastIndex` is not reliable cross-browser
if (lastIndex > lastLastIndex) {
output.push(str.slice(lastLastIndex, match.index));
// fix browsers whose `exec` methods don't consistently return `undefined` for nonparticipating capturing groups
if (!cbSplit._compliantExecNpcg && match.length > 1) {
match[0].replace(separator2, function () {
for (var i = 1; i < arguments.length - 2; i++) {
if (arguments[i] === undefined) {
match[i] = undefined;
}
}
});
}
if (match.length > 1 && match.index < str.length) {
Array.prototype.push.apply(output, match.slice(1));
}
lastLength = match[0].length;
lastLastIndex = lastIndex;
if (output.length >= limit) {
break;
}
}
if (separator.lastIndex === match.index) {
separator.lastIndex++; // avoid an infinite loop
}
}
if (lastLastIndex === str.length) {
if (lastLength || !separator.test("")) {
output.push("");
}
} else {
output.push(str.slice(lastLastIndex));
}
return output.length > limit ? output.slice(0, limit) : output;
};
cbSplit._compliantExecNpcg = /()??/.exec("")[1] === undefined; // NPCG: nonparticipating capturing group
cbSplit._nativeSplit = String.prototype.split;
} // end `if (!cbSplit)`
String.prototype.split = function (separator, limit) {
return cbSplit(this, separator, limit);
};
})(jQuery);
#######第三个 js 新建 language.js 带有缓存功能
/**
* 设置语言类型： 默认为中文
*/
var i18nLanguage = "cn";
console.log(i18nLanguage.substr(0, 2))
/*
设置一下网站支持的语言种类
*/
var webLanguage = ['cn', 'tw', 'en'];
/*页面执行加载执行*/
$(function() {
/*执行I18n翻译*/
execI18n();
/*将语言选择默认选中缓存中的值*/
$("#language option[value=" + i18nLanguage + "]").attr("selected", true);
/* 选择语言 */
$("#language").on('change', function() {
var language = $(this).children('option:selected').val()
console.log(language);
getCookie("userLanguage", language, {
expires: 30,
path: '/'
});
location.reload();
});
});
/**
* 执行页面i18n方法
* @return
*/
var execI18n = function() {
/*
首先获取用户浏览器设备之前选择过的语言类型
*/
if(getCookie("userLanguage")) {
i18nLanguage = getCookie("userLanguage");
} else {
// 获取浏览器语言
var navLanguage = getNavLanguage();
if(navLanguage) {
// 判断是否在网站支持语言数组里
var charSize = $.inArray(navLanguage, webLanguage);
if(charSize > -1) {
i18nLanguage = navLanguage;
// 存到缓存中
getCookie("userLanguage", navLanguage);
};
} else {
console.log("not navigator");
return false;
}
}
/* 需要引入 i18n 文件*/
if($.i18n == undefined) {
console.log("请引入i18n js 文件")
return false;
};
/*
这里需要进行i18n的翻译
*/
jQuery.i18n.properties({
name: 'strings', //资源文件名称
path: 'language/', //资源文件路径
mode: 'map', //用Map的方式使用资源文件中的值
language: i18nLanguage.substr(0, 2),
callback: function() { //加载成功后设置显示内容 赋值
/*以下为赋值方法*/
var insertEle = $('.i18n');
console.log($.i18n.map)
console.log(i18nLanguage.substr(0, 2))
$('.two').html($.i18n.prop($('.two').attr('name')));
insertEle.each(function() {
// 根据i18n元素的 name 获取内容写入
console.log($.i18n.prop($(this).attr('name')))
$(this).html($.i18n.prop($(this).attr('name')));
});
//搜索占位文字赋值
var insertInputEle = $(".i18n-input");
insertInputEle.each(function(index, obj) {
var selectAttr = $(this).attr('selectattr');
if(!selectAttr) {
selectAttr = "value";
};
$(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname')));
});
console.log("写入完毕");
}
});
}
/**
* cookie操作
*/
var getCookie = function(name, value, options) {
if(typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if(value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if(typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var s = [cookie, expires, path, domain, secure].join('');
var secure = options.secure ? '; secure' : '';
var c = [name, '=', encodeURIComponent(value)].join('');
var cookie = [c, expires, path, domain, secure].join('')
document.cookie = cookie;
} else { // only name given, get cookie
var cookieValue = null;
if(document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for(var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if(cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
/**
* 获取浏览器语言类型
* @return {string} 浏览器国家语言
*/
var getNavLanguage = function() {
if(navigator.appName == "Netscape") {
var navLanguage = navigator.language;
return navLanguage.substr(0, 5).toLowerCase();
}
return false;
}
language文件夹里面新建三个语言包
搜狗截图20年04月12日1123_3.png
第一个 strings_cn.properties
title=i18n资源国际化
lan=语言选择：
hellomsg1=首页消息:
hellomsg2=资源国际化！这是首页消息!
searchPlaceholder=请输入搜索信息
twoTitle=跳转
第二个 strings_en.properties
title=i18n Resource Internationalization
lan=Language：
hellomsg1=Index message:
hellomsg2=Hello word! This is index message!
searchPlaceholder=Please input serach information
twoTitle=跳转英文
第三个 strings_tw.properties
title=i18n資源國際化
lan=語言選擇：
hellomsg1=首頁消息:
hellomsg2=資源國際化! 这是首頁消息！
searchPlaceholder=請輸入搜索信息
twoTitle=跳转繁体
接下来 新建一个html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title class="i18n" name='title'></title>
<style type="text/css">
.two {
width: 80%;
text-align: center;
font-size: 26px;
color: #ffffff;
line-height: 88px;
background: red;
display: block;
}
</style>
</head>
<body>
<div class="lan">
<div class="lan1"><label class="i18n" name="lan"></label></div>
<div class="lan2">
<select id="language">
<option value="cn">中文简体</option>
<option value="tw">中文繁體</option>
<option value="en">English</option>
</select>
</div>
</div>
<br>
<hr>
<div>
<div>{$.i18n}</div>
<label class="i18n" name="hellomsg1"></label>
<label class="i18n" name="hellomsg2"></label>
</div>
<br>
<div>
<input type="search" class="i18n-input" selectname="searchPlaceholder" selectattr="placeholder">
</div>
<a href="indextwo.html" class="two" name="twoTitle"></a>
<script src="js/jquery-3.1.1.min.js"></script>
<!-- 加载语言包文件 -->
<script src="js/jquery.i18n.properties.min.js"></script>
<script src="js/language.js"></script>
</body>
</body>
</html>
主要功能在于language.js里面 把language.js看懂 就行了 是对应name进行赋值
网友评论