首页 > 代码库 > 基于jQuery.i18n.properties实现前端网站语言多版本

基于jQuery.i18n.properties实现前端网站语言多版本

2024-09-15 22:51:56   218人阅读

我是参考播客做了个demo：http://blog.csdn.net/aixiaoyang168/article/details/49336709

jQuery.i18n.properties采用.properties文件对JavaScript进行国际化。jQuery.i18n.properties插件首先加载默认的资源文件（strings.properties），然后加载针对特定语言环境的资源文件（strings_zh.properties），这就保证了在未提供某种语言的翻译时，默认值始终有效。

一、demo代码：

技术分享

首页index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title class="i18n" name=‘title‘></title>
<meta name="viewport" content="width=device-width">
<style type="text/css">
    .lan1{
        float: left;
    }
    .lan2{
        float: right;
        margin-right: 100px;
    }
</style>
</head>
<body>
    <div>
        <div class="lan1"><label class="i18n" name="lan"></label></div>
        <div class="lan2">
            <select id="language">
                <option value="zh-CN">中文简体</option>
                <option value="zh-TW">中文繁體</option>
                <option value="en">English</option>
            </select>
        </div>
    </div>
    <br>
    <hr>
    <div><label class="i18n" name="hellomsg1"></label><label class="i18n" name="hellomsg2"></label></div><br>
    <div><label class="i18n" name="commonmsg1"></label><label class="i18n" name="commonmsg2"></label></div><br>
    <div>
        <input type="search" class="i18n-input" selectname="searchPlaceholder" selectattr="placeholder">
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.i18n.properties.min.js"></script>
    <script src="js/language.js"></script>
</body>
</html>

language.js:

/**
 * cookie操作
    1.name and value given , set cookie;
    2.name given, value is null, delete cookie;
    3.name given, value is undefined, get cookie;
 */
var getCookie = function(name, value, options) {
    if (typeof value != ‘undefined‘) { // name and value given, set cookie
        options = options || {};
        if (value =http://www.mamicode.com/== 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 = http://www.mamicode.com/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,2);
    }
    return false;
}

/**
 * 设置语言类型： 默认为中文
 */
var i18nLanguage = "zh-CN";

/*
设置一下网站支持的语言种类
 */
var webLanguage = [‘zh-CN‘, ‘zh-TW‘, ‘en‘, ‘zh‘];

/**
 * 执行页面i18n方法
 * @return
 */ 
var execI18n = function(){
    /*
        首先获取用户浏览器设备之前选择过的语言类型
     */
    if (getCookie("Language")) {
        i18nLanguage = getCookie("Language");
    } else {
        // 获取浏览器语言
        var navLanguage = getNavLanguage();
        if (navLanguage) {
            // 判断是否在网站支持语言数组里
            var charSize = $.inArray(navLanguage, webLanguage);
            if (charSize > -1) {
                i18nLanguage = navLanguage;
                getCookie("Language",navLanguage,{       // 存到缓存中
                    expires: 30,
                    path:‘/‘
                });
            };
        } else{
            console.log("not navigator");
            return false;
        }
    }

    /* 需要引入 i18n 文件*/
    if ($.i18n == undefined) {
        console.log("请引入jquery.i18n.properties.js文件")
        return false;
    };

    /*
        这里需要进行i18n的翻译
     */
    jQuery.i18n.properties({
        name: ‘opqt‘,
        path: ‘i18n/‘,
        mode : ‘map‘,                       //用Map的方式使用资源文件中的值
        language : i18nLanguage,
        cache:false,
        encoding: ‘UTF-8‘,
        callback : function() {             //加载成功后设置显示内容
            var insertEle = $(".i18n");
            console.log(".i18n 写入中...");
            insertEle.each(function() {
                $(this).html($.i18n.prop($(this).attr(‘name‘)));    // 根据i18n元素的 name 获取内容写入
            });
            console.log("写入完毕");

            console.log(".i18n-input 写入中...");
            var insertInputEle = $(".i18n-input");
            insertInputEle.each(function() {
                var selectAttr = $(this).attr(‘selectattr‘);
                if (!selectAttr) {
                    selectAttr = "value";
                };
                $(this).attr(selectAttr, $.i18n.prop($(this).attr(‘selectname‘)));
            });
            console.log("写入完毕");
        }
    });
}

$(function(){

    /*执行I18n翻译*/
    execI18n();

    /*将语言选择默认选中缓存中的值*/
    $("#language option[value="http://www.mamicode.com/+i18nLanguage+"]").attr("selected",true);

    /* 选择语言 */
    $("#language").on(‘change‘, function() {
        var language = $(this).children(‘option:selected‘).val()
        getCookie("Language",language,{
            expires: 30,
            path:‘/‘
        });
        location.reload();
    });
});

因为中文和繁体文拷贝到properties文件中就变成了unicode字符了，不认得，拷贝英文的一份：

opqt_en.properties：

title=i18n Resource Internationalization

lan=Language\uFF1A
hellomsg1=Index message: 
hellomsg2=Hello word! This is index message!
searchPlaceholder=Please input serach information

commonmsg1=Common message: 
commonmsg2=This is common message!

其他中文和繁体文：把原播客里面的贴过来吧：

opqt.properties、opqt_zh.properties、opqt_zh_CN.properties:

title=i18n资源国际化

lan=语言选择：
hellomsg1=首页消息: 
hellomsg2=资源国际化！这是首页消息!
searchPlaceholder=请输入搜索信息
commonmsg1=通用消息: 
commonmsg2=资源国际化!这是通用消息哦!

opqt_zh_TW.properties:

title=i18n資源國際化

lan=語言選擇：
hellomsg1=首頁消息: 
hellomsg2=資源國際化! 这是首頁消息！
searchPlaceholder=請輸入搜索信息
commonmsg1=通用消息: 
commonmsg2=資源國際化!這是通用消息哦!

二、原文中代码解释：

label class=”i18n” name=”hellomsg1”这里面class=”i18n”写法，下边在js里面我们可以根据类选择器获取需要国际化的地方，然后name=”hellomsg1”这里面的hellomsg1跟资源文件里面的key保持一致。获取方式二：input type=”search” class=”i18n-input” selectname=”searchPlaceholder” selectattr=”placeholder”这里面的class=”i18n-input”写法，跟上边的区别就是可以给html标签的任何属性可以赋值，例如placeholder，name，id什么的都可以，selectattr=”placeholder”里面的placeholder就是要赋值的属性，selectname=”searchPlaceholder”里面的searchPlaceholder跟资源文件里面的key保持一致。

 

效果图：

http://localhost:8080/jqueryi18n/index.html

技术分享

技术分享技术分享

 

源代码：上传到博客资源里面；jqueryi18n.rar

上传上去了，但是不知道怎么引用这个下载连接...

 

基于jQuery.i18n.properties实现前端网站语言多版本


联系
我们