通过jquery 使用 i18n，实现多语言

jquery.i18n.properties.js 文件下载可查看

https://download.csdn.net/download/qq_37541486/12837911

结果预览

1.引入jquery

2.引入jquery.i18n.properties.js

3.创建common_zh.properties和common.properties文件

（ 如果使用 common.properties文件英文没反应，可以修改为common_en.properties）

##common_zh.properties
Contact = 联系我们
Contact1 = 注册问题，请查阅 <a>用户支持页面</a>.
           

##common.properties
Contact = Contact
Contact1 = For questions regarding user registration<br/> please see <a>our user page</a>.
           

html中的使用

1. data-i18n-text=“Contact” （普通标签的多语言写法）
2. data-i18n-placeholder=“Contact” ( 表单类的 placeholder的多语言写法)
3. data-i18n-text_call=“Contact1” (带标签的多语言写法)
4. data-i18n-value
5. data-i18n-title

js中的使用

1. $.i18n.prop(‘Contact1’)

代码示例

<!-- 通过 data-i18n-text="“为标签赋值 -->
<div id="timeType">
    <label class="itemLabel radio-inline"><input type="radio" name="Resolution" value="y"/> <span data-i18n-text="AnnualAvg"></span></label>
    <label class="itemLabel radio-inline"><input type="radio" name="Resolution" value="m"/> <span data-i18n-text="MonthlyAvg"></span></label>
    <label class="itemLabel radio-inline"><input type="radio" name="Resolution" value="d"/> <span data-i18n-text="DailyAvg"></span></label>
</div>
<!-- 通过 data-i18n-placeholder="“ 为placeholder赋值 -->
<input class="form-control input-xs" type="text" readonly name="range" id="SelectTime" data-i18n-placeholder="pleSeleTimePeriod"/>
           

this.language =$.cookie('pll_language');
this.pathUrl = ''
this.i18nModal();
i18nModal:function(){
	$.i18n.properties({ // 加载资浏览器语言对应的资源文件
	    name: 'common', // 资源文件名称
	    path: this.pathUrl+'/public/i18n/', // 资源文件路径
	    mode: 'both', // 用 Map 的方式使用资源文件中的值
	    language:this.language,
	    callback: function() { // 加载成功后设置显示内容
	        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-text_call]').each(function () {
	                //如果text里面还有html需要过滤掉
	                $(this).html($.i18n.prop($(this).data('i18n-text_call')));
	            });
	            $('[data-i18n-value]').each(function () {
	                $(this).val($.i18n.prop($(this).data('i18n-value')));
	            });
	            
	            $('[data-i18n-title]').each(function () {
	                $(this).attr('data-original-title',$.i18n.prop($(this).data('i18n-title')));
	            });
	        }
	        catch(ex){ }
	    }
	});
}