• jq国际化jquery.i18n.properties使用


    使用jquery.i18n.properties可以实现网站中英文切换的功能,如果中英文页面有很大不同的话,这种就不是很好,可以做参考开发

    1. 引入一些文件
      jquery.i18n.properties.js

    需要引入jquery,并且i18n放在jq后面引入

    1. 新建文件

    language_zh.properties (中文对照表,这个文件就叫properties文件,后缀就是properties,里面就是键值对的格式)

    $.i18n.properties方法里面的name是语言文件的前缀名称

    TITLE = 标题
    MORE = 更多
    HOME = 主页
    PRODUCT = 产品
    

    language_en.properties (英文对照表)

    TITLE = title
    MORE = more
    HOME = home
    PRODUCT = product
    

    language.js

    /**
     * 获取浏览器语言类型
     * @return {string} 浏览器国家语言
     */
    var getNavLanguage = function() {
    	if(navigator.appName == "Netscape") {
    		var navLanguage = navigator.language || navigator.userLanguage;
    		return navLanguage.substr(0, 2);
    	}
    	return false;
    }
    
    /**
     * 设置语言类型: 默认为中文
     */
    var i18nLanguage = "en_US";
    /*
    设置一下网站支持的语言种类
     */
    var webLanguage = ['zh-CN', 'en_US'];
    /**
     * 执行页面i18n方法
     * @return
     */
    var execI18n = function() {
    	// 获取浏览器语言
    	var navLanguage = getNavLanguage();
    	if(navLanguage) {
    		// 判断是否在网站支持语言数组里
    		var charSize = $.inArray(navLanguage, webLanguage);
    		if(charSize > -1) {
    			i18nLanguage = navLanguage;
    		};
    	} else {
    		console.log("not navigator");
    		return false;
    	}
    	/* 需要引入 i18n 文件*/
    	if($.i18n == undefined) {
    		return false;
    	};
    	/*
    	这里需要进行i18n的翻译
    	 */
    	//      i18nLanguage="zh_CN";
    	//      i18nLanguage="en_US";
    	$.i18n.properties({
    		name: "language", //资源文件名称
    		path: window.htmlURL + '/js/i18n/', //资源文件路径
    		mode: 'map', //用Map的方式使用资源文件中的值
    		language: i18nLanguage,
    		callback: function() { //加载成功后设置显示内容
    			var insertEle = $(".i18n");
    			insertEle.each(function() {
    				var contrastName = $(this).attr('contrastName');
    				// 根据i18n元素的 contrastName 获取内容写入
    				if(contrastName) {
    					$(this).html($.i18n.prop(contrastName));
    				};
    			});
    			var insertInputEle = $(".i18n-input");
    			insertInputEle.each(function() {
    				var selectAttr = $(this).attr('selectattr');
    				if(!selectAttr) {
    					selectAttr = "value";
    				};
    				$(this).attr(selectAttr, $.i18n.prop($(this).attr('contrastName')));
    			});
                            var oPlaceholder = $('input[placeholder], textarea[placeholder]');
    			oPlaceholder.each(function() {
    				var inputPlaceholder = $(this).attr('inputPlaceholder');
    				if(inputPlaceholder) {
    					$(this).attr('placeholder', $.i18n.prop(inputPlaceholder));
    				};
    			});
    		}
    	});
    };
    /**
     * 单独获取prop
     * @return
     */
    var execI18nProp = function(contrastName) {
    	var contrastValue = "";
    	/* 需要引入 i18n 文件*/
    	if($.i18n == undefined) {
    		return false;
    	};
    	if(contrastName) {
    		contrastValue = $.i18n.prop(contrastName);
    	};
    	return contrastValue
    }
    
    
    // execI18nProp 对于一些需要拼接显示的文字需要这个方法,通过字段名拿英文
    var workStatusText = function(status, timeFlag) {
        if(status == 5 || status == 0 ){
            return {"text": "未开始", "color": "gray-color"}
        }else if(status == 1){
            return {"text": "进行中", "color": "blue-font"}
        }else if(status == 2){
            return {"text": execI18nProp("complete"), "color": "green-color"}
        }else{
            return null;
        }
    }
    

    // 执行函数,上面的代码可以根据需求自定义开发
    execI18n();

    1. html中使用
    <div name="more" class="active"><span class="i18n" contrastName="more">全部</span></div>
    

    参考博客

  • 相关阅读:
    Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型?
    "=="和equals方法究竟有什么区别?
    Tomcat发生java.lang.OutOfMemoryError: PermGen space的解决方案
    HashMap原理
    springMVC
    SqlServer和Oracle修改表结构语句
    quartz定时任务时间表达式说明
    Linq to Entity 时间差作为筛选条件产生的问题
    密码学基础
    C#如何使用异步编程【BeginInvoke/EndInvoke】
  • 原文地址:https://www.cnblogs.com/lisaShare/p/13999123.html
Copyright © 2020-2023  润新知