通過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){ }
	    }
	});
}