• 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>
    

    参考博客

  • 相关阅读:
    C#跨平台物联网通讯框架ServerSuperIO(SSIO)正式开源... 1
    神秘值分解(Singular Value Decomposition)
    mysql的sql执行计划详解(非常有用)
    springweb flux websocket
    springweb flux 服务器推送事件
    nodejs-express 报错View is not a constructor
    深入理解 Laravel Eloquent(三)——模型间关系(关联)
    Laravel 校验规则之字段值唯一性校验
    Notice: Trying to get property of non-object problem(PHP)解决办法 中间件只能跳转不能返任何数据
    慕客网laravel学习笔记
  • 原文地址:https://www.cnblogs.com/lisaShare/p/13999123.html
Copyright © 2020-2023  润新知