前端多语言切换-jquery.i18n

本文原创地址：http://www.cnblogs.com/landeanfen/p/7581609.html
以下是本人使用流程：

1.下载jquery.i18n

链接：https://pan.baidu.com/s/1aN1_0Csii3K9S5fLy5MldQ
提取码：vs8x
包含文件：jquery.i18n.properties.js、jquery.i18n.properties.min.js、language.extensions.js 后续操作需要用到

2.创建资源文件

在项目中创建资源文件，如下图：

这里设置了中文（en）和英文（zh-CN）,文件名后缀需指定.properties.
需要设置切换的资源可保存在此文件中格式如下：

3.页面配置

引入：jq、jquery.i18n.properties.js、language.extensions.js文件。
jquery.i18n.properties.js、language.extensions.js文件在1步骤中的网盘有提供。

切换语言时将所选语言存入Cookie中，建议每次触发时先判断该Cookie是否为空，有值的话先清空,不然有的电脑IE可能会出现问题。代码如下：

   


    
    


    
        中文
        English
    
    

    

注意：在运行时前端jq会出现报错或警告，因为properties文件类型无法识别，需要手动将该文件类型加入可识别文件类型。如：

关于language.extensions.js代码是作者封装了i18n，使调用更加方便。

///**
// * 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++) {
                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 = "en";

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

///**
// * 执行页面i18n方法
// * return
// */
var execI18n = function () {
    /*
    获取一下资源文件名
     */
    //var optionEle = $("#i18n_pagename");
    //if (optionEle.length < 1) {
    //    console.log("未找到页面名称元素，请在页面写入\n ");
    //    return false;
    //}
    //var sourceName = optionEle.attr('content');
    //sourceName = sourceName.split('-');
    /*
    首先获取用户浏览器设备之前选择过的语言类型
     */
    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: 'common',//文件名称
        path: '/Content/i18n/' + i18nLanguage + '/', //资源文件路径
        mode: 'map', //用Map的方式使用资源文件中的值
        language: i18nLanguage,
        callback: function () {//加载成功后设置显示内容
            //console.log("i18n赋值中...");
            try {
                //初始化页面元素
                $('[data-i18n-placeholder]').each(function () {
                    $(this).attr('placeholder', $.i18n.prop($(this).data("i18n-placeholder")));
                });
                $('[data-i18n-text]').each(function () {
                    //如果text里面还有html需要过滤掉
                    var html = $(this).html();
                    var reg = /<(.*)>/;
                    if (reg.test(html)) {
                        var htmlValue = reg.exec(html)[0];
                        $(this).html(htmlValue + $.i18n.prop($(this).data('i18n-text')));
                    }
                    else {
                        $(this).text($.i18n.prop($(this).data('i18n-text')));
                    }
                });
                $('[data-i18n-value]').each(function () {
                    $(this).val($.i18n.prop($(this).data('i18n-value')));
                });
            }
            catch (ex) {
                console.log(ex);
            }
            //console.log("i18n写入完毕");
        }
    });
};

/*页面执行加载执行*/
$(function () {
    /*执行I18n翻译*/
    execI18n();
});

效果图：