`
cheneyph
  • 浏览: 292648 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论
收藏列表
标题 标签 来源
【jquery】jquery.lazyload图片分屏加载 jquery

        
【jquery】page loading v2.0 jquery
/**
 * 解决重复遮罩问题
 * loading效果,且可以重复加载而互不干扰
 * 依赖于css样式:
 * .window-loading-img{
 * 		background: center no-repeat url("../jeasyui/themes/images/loading.gif");
 * 		width: 20px;
 * }
 * 其中loading.gif使用的是easyui中的图片;
 * 使用示例:
 * var l = $.loading(); // 创建loading
 * l.loadend(); // 移除指定的loading效果
 * $.loadend();  // 移除一个loading
 * $.loadendAll();  // 移除所有loading效果
 * @param $
 */
(function($) {
	$.extend(jQuery, {
		/**
		 * @return 返回jQuery对象,与loadend()结合,可针对单个异步ajax请求处理
		 */
		loading: function(){
			var $count = $("<div class='-window-loading-count'/>");
			$('body').append($count);
			if($(".-window-loading-content").length > 0){
				$(".-window-loading-content").show();
				return $count;
			}
			var $mask = $("<div class='-window-loading-mask'/>").css({
				background: '#ccc',
				display: 'block',
				opacity: '0.40',
				overflow: 'hidden',
				position: 'absolute',
				left: '0px',
				top: '0px',
				width: '100%',
				'z-index': 8100
			});
			var $shadow = $("<div class='-window-loading-shadow'/>").css({
				background: '#fff',
				display: 'block',
				border: '1px solid #ccc',
				'box-shadow': '2px 2px 3px #cccccc',
				overflow: 'hidden',
				position: 'absolute',
				'z-index': 8110
			});
			var html = '<table><tr><td style="height:2em; width: .5em;"></td>';
			html += '<td class="window-loading-img"></td>';
			html += '<td style="padding-right: .5em;">正在加载,请等待...</td>';
			html += '</tr></table>';
			$shadow.append($(html));
			var $loading = $("<div class='-window-loading-content'/>").append($mask).append($shadow);
			$('body').append($loading);
			
			var shadow_h = $shadow.height();
			var shadow_w = $shadow.width();

			_resizeLoading();
			$(window).bind('resize', function(){
				_resizeLoading();
			});
			function _resizeLoading(){
				$(".-window-loading-mask").height(0);
				var h = $(window).height();
				h = h > $(document).height() ? h : $(document).height();
				$(".-window-loading-mask").height(h);

				var l = ($(window).width() - shadow_w) * 1/2;
				var t = ($(window).height() - shadow_h) * 1/3;
				$(".-window-loading-shadow").offset({left: l, top: t});
			}
			return $count;
		},
		/**
		 * 移除所有loading效果
		 */
		loadendAll: function(){
			$(".-window-loading-content").hide();
			$(".-window-loading-count").remove();
		},
		/**
		 * 随机移除一个loading
		 */
		loadend: function(){
			var $count = $(".-window-loading-count");
			if($count.length > 0){
				$($count[0]).loadend();
			}
		}
	});
	$.fn.extend({
		/**
		 * 移除指定的loading
		 */
		loadend: function(){
			$(this).remove();
			var $count = $(".-window-loading-count");
			if(null == $count || $count == undefined || $count.length == 0){
				$(".-window-loading-content").hide();
			}
		}
	});
})(jQuery);

/**
 * 设置全局 AJAX 默认选项
 */
$.ajaxSetup({
	beforeSend: function(XMLHttpRequest){
		$.loading();
	},
	complete: function(XMLHttpRequest, textStatus){
		$.loadend();
	}
})
【jquery】page loading jquery
/**
 * loading效果,且可以重复加载而互不干扰
 * 依赖于css样式:
 * .window-loading-img{
 * 		background: center no-repeat url("../jeasyui/themes/images/loading.gif");
 * 		width: 20px;
 * }
 * 其中loading.gif使用的是easyui中的图片;
 * 使用示例:
 * var l = $.loading();	// 创建loading
 * l.hideloading();	// 移除指定的loading效果
 * $.loadendAll();	// 移除所有loading效果
 * @param $
 */
(function($) {
	$.extend(jQuery, {
		/**
		 * @return 返回jQuery对象,与loadend()结合,可针对单个异步ajax请求处理
		 */
		loading: function(){
			var $mask = $("<div class='-window-loading-mask'/>").css({
				background: '#ccc',
				display: 'block',
				opacity: '0.20',
				overflow: 'hidden',
				position: 'absolute',
				left: '0px',
				top: '0px',
				width: '100%',
				'z-index': 8100
			});
			var $shadow = $("<div class='-window-loading-shadow'/>").css({
				background: '#fff',
				display: 'block',
				border: '1px solid #ccc',
				'box-shadow': '2px 2px 3px #cccccc',
				overflow: 'hidden',
				position: 'absolute',
				'z-index': 8110
			});
			var html = '<table><tr><td style="height:2em; width: .5em;"></td>';
			html += '<td class="window-loading-img"></td>';
			html += '<td style="padding-right: .5em;">正在加载,请等待...</td>';
			html += '</tr></table>';
			$shadow.append($(html));
			var $loading = $("<div class='-window-loading-content'/>").append($mask).append($shadow);
			$('body').append($loading);
			
			var shadow_h = $shadow.height();
			var shadow_w = $shadow.width();

			_resizeLoading();
			$(window).bind('resize', function(){
				_resizeLoading();
			});
			function _resizeLoading(){
				$(".-window-loading-mask").height(0);
				var h = $(window).height();
				h = h > $(document).height() ? h : $(document).height();
				$(".-window-loading-mask").height(h);

				var l = ($(window).width() - shadow_w) * 1/2;
				var t = ($(window).height() - shadow_h) * 1/3;
				$(".-window-loading-shadow").offset({left: l, top: t});
			}
			return $loading;
		},
		/**
		 * 移除所有loading效果
		 */
		loadendAll: function(){
			$(".-window-loading-content").remove();
		}
	});
	$.fn.extend({
		/**
		 * 移除指定的loading
		 */
		loadend: function(){
			$(this).remove();
		}
	});
})(jQuery);
【jquery】页面数据加载 jquery
/**
 * 将DIV层里的所有元素按Name/Value的形式转换成JSON对象<br>
 * @param div
 * @return
 */
function divIntegrateToJSON(div){
	var json = {};
	var $paras = $("#" + div).find(":input[type=checkbox]");
	var inputArray = new Array();
	$.each($paras, function(){
		if($(this).attr("checked") == true){
			var exist = false;
			for ( var int = 0; int < inputArray.length; int++) {
				if(inputArray[int][0] == $.trim($(this).attr("name"))){
					inputArray[int][1][inputArray[int][1].length] = $.trim($(this).val());
					exist = true;
				}
			}
			if(!exist){
				var tempArray = new Array();
				tempArray[0] = $.trim($(this).attr("name"));
				tempArray[1] = new Array();
				tempArray[1][0] = $.trim($(this).val());
				inputArray[inputArray.length] = tempArray;
			}
		}
	});
	for ( var int = 0; int < inputArray.length; int++) {
		$.extend(json, eval("({" + inputArray[int][0] + ":inputArray[int][1]})"));
	}

	var $parasRadio = $("#" + div).find(":input[type=radio]");
	$.each($parasRadio, function(){
		if($(this).attr("checked") == true){
			$.extend(json, eval("({" + $.trim($(this).attr("name")) + ":'" + $.trim($(this).val()) + "'})"));
		}
	});
	
	$paras = $("#" + div).find(":input").not($paras).not($parasRadio);
	$.each($paras, function(i){
		if($.trim($(this).attr("name")) != "" && $.trim($(this).val()) != ""){
			$.extend(json, eval("({" + $.trim($(this).attr("name")) + ":'" + $.trim($(this).val()) + "'})"));
		}
	});
	return json;
};



$.fn.extend({
	/** 返回对象的Name/Value形式的JSON对象 */
	nvJson: function(){
		var key = $.trim($(this).attr("name"));
		var value = $.trim($(this).val());
		if(key != "" && value != ""){
			return $.parseJSON("{\"" + key + "\":\"" + value + "\"}");
		}else{
			return {};
		}
	}
});


/**
 * 页面数据加载<br>
 * 针对jQuery Mobile
 */
$.fn.extend({
	loadByAction: function(json){
		var deConfig = {
				url: "../pageLoadAction",	// Action地址
				dataSQLID: null,	// 数据查询脚本,以数组形式指定多个脚本
				dataSouce: DataSource.LMES, // 指定数据库:lmes-E服务系统,slis-核心,flexcc-咨诉系统
				paras: {}	// 查询参数
		};
		var config = {};
		$.extend(true, config, deConfig, json);
		if(null == config.url){
			alert('url is null');
		}
		var paraJSON = {};
		$.extend(true, paraJSON, config.paras, {dataSouce: config.dataSouce});
		$.extend(true, paraJSON, {dataSQLID: config.dataSQLID});
		var result = getAjaxData(config.url, paraJSON);
		if(result["_state"] == "SUCCESS"){
			$(this).loadByData(result["_data"]);
		}else{
			alert("页面数据加载异常");
		}
	},
	loadByData: function(data){
		if(null == data || undefined == data) return;
		if($.isJSON(data) == false) return;
		for(var key in data){
			var $ele = $("input[name=" + key.toLowerCase() + "]");
			if(null == $ele || $ele.length == 0) continue;
			if($ele.length == 1) $ele.val(data[key]);
			else{
				// 针对radio、checkbox处理
				// TODO
			}
		}
	}
});
【jquery】解析xml jquery Convert xml to string with jQuery
<!-- test2 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery XML</title>
<link rel="stylesheet" type="text/css" href="../../lib/jeasyui/themes/easyui.css">
<link rel="stylesheet" type="text/css" href="../../lib/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../lib/common/project.css">
	<script type="text/javascript" src="../../lib/jeasyui/jquery.min.js"></script>
	<script type="text/javascript" src="../../lib/jeasyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="./jquery.xml.js"></script>
<!-- 	<script type="text/javascript" src="./jquery.jxml.js"></script> -->
</head>
<body>
<table>
	<tr>
		<td style="border: 1px solid;">
<xmp><data>
	<riskcode>APLP</riskcode>
	<riskname>的空格和换行会直接显示</riskname>
</data>
</xmp>
		</td>
	</tr>
	<tr>
		<td><textarea id="" name="" rows="15" cols="80" class="textarea"></textarea></td>
		<td><a href="javascript:void(0);" class="easyui-linkbutton">操作</a></td>
	</tr>
</table>
<script type="text/javascript">
(function($) {
	$.extend(jQuery, {
		loadXML: function(xmlString){
			return $($.parseXML(xmlString));
		}
	});
	$.fn.extend({
		appendXml: function(s){
			return this.each(function() {
				if (typeof s != "string") return;
// 	            if (!jQuery.isXMLDoc(this)){
// 	            	console.log("isXMLDoc = " + false);
// 	            	return;
// 	            }
	            var node = $.parseXML(s).firstChild.cloneNode(true);
// 	            console.log(node);
// 	            console.log(node.nodeName);
	            this.appendChild(node);
			});
		},
		toXMLString: function(){
			var xmlDoc = $(this)[0];
// 			return xmlDoc.xml || (new XMLSerializer()).serializeToString(xmlDoc);
			if (window.ActiveXObject){
				console.log("IE ...");
				return xmlDoc.xml;
			} else {
				return (new XMLSerializer()).serializeToString(xmlDoc);
			}
		}
	});
})(jQuery);

$(document).ready(function(){
	var xml = $("xmp").html();

	var $xml = $(xml);
	$xml.appendXml("<remark>daof想出来的</remark>");
	console.log("@>> " + $xml.toXMLString());
})
</script>
</body>
</html>





<!----------------------------------------------------------------------->
<!----------------------------------------------------------------------->
<!----------------------------------------------------------------------->

<!-- test1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery XML</title>
<link rel="stylesheet" type="text/css" href="../../lib/jeasyui/themes/easyui.css">
<link rel="stylesheet" type="text/css" href="../../lib/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../lib/common/project.css">
	<script type="text/javascript" src="../../lib/jeasyui/jquery.min.js"></script>
	<script type="text/javascript" src="../../lib/jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
<table>
	<tr>
		<td style="border: 1px solid;">
<xmp><data>
	<riskcode>APLP</riskcode>
	<riskname>的空格和换行会直接显示</riskname>
</data>
</xmp>
		</td>
	</tr>
	<tr>
		<td><textarea id="" name="" rows="15" cols="80" class="textarea"></textarea></td>
		<td><a href="javascript:void(0);" class="easyui-linkbutton">操作</a></td>
	</tr>
</table>
<script type="text/javascript">
$(document).ready(function(){
	$("a").click(function(){
		var xml = $("xmp").html();
		console.log(xml);
		
		var $xmlObj = null;
		if (window.ActiveXObject){
			var xmldoc = new ActiveXObject("Microsoft.XMLDOM");   //创建XMLDOC 对象
			xmldoc.async=false;  //使用同步方式加载XML字符串
			xmldoc.loadXML(xml);  //加载XML字符串
			$xmlObj = $(xmldoc);
		} else {
			$xmlObj = $(xml);
		}
// 		var $xmlObj = $.parseXML(xml);
		console.log("riskcode = " + $xmlObj.find('riskcode').text());
		
// 		var $msg = $("<msg/>");
// 		$msg.text("jquery xml 消息");
// 		$xmlObj.append($("<msg/>").text("jquery xml 消息"));
		
		var xmlString;
	    if (window.ActiveXObject){
		    // IE
	    	console.log("IE ...");
	        xmlString = $xmlObj[0].xml;
	    } else {
		    // code for Mozilla, Firefox, Opera, etc.
		    var oSerializer = new XMLSerializer(); 
	        xmlString = oSerializer.serializeToString($xmlObj[0]);
	    }
		$("textarea").val(xmlString);
	});
})
</script>
</body>
</html>
jquery extend扩展_校验部分 jquery
$.extend({
	/**
	 * 判断是否String对象
	 */
	isString: function(str){
		return (typeof str=='string')&&str.constructor==String;
	},
	/**
	 * 判断是否JSON对象
	 */
	isJSON: function(obj){
		var isjson = typeof(obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() == "[object object]" && !obj.length;    
		return isjson;
	},
	// JQuery type
	isJQuery : function(obj){
		return obj instanceof jQuery;
	},
	// positive integer
	isInteger : function(value){
		// /^(\+?)(\-?)(\d+)$/
		if(/^[1-9]+[0-9]*]*$/.test($.trim(value))) return true;
		else return false;
	},
	// Date Type
	isDate : function(date){
		return date instanceof Date;
	}
});
jquery extend扩展_功能部分 jquery
$.extend({
	/**
	 * 将URL中的参数转换成JSON对象
	 */
	urlJSON:function(){
		var paramters = window.location.search.substr(1);
		if(null != paramters && undefined != paramters && '' != paramters){
			paramters = paramters.replace(/&/g,"\",\"");
			paramters = paramters.replace(/=/g,"\":\"");
			paramters = '{"'+paramters+'"}';
		    return eval("("+paramters+")");
		}
		return {};
		
	},
	/**
	 * 千分位显示数据,小数部分不做千分位显示
	 * num:原数据
	 * decimal:四舍五入为指定小数位数的数字
	 */
	formatThousandths: function(num, decimal){
		if(null == num ||""== num) return "";
		if($.isString(num)) num = parseFloat(num);
		if(null == decimal || decimal == undefined || decimal < 0){
			decimal = 0;
		}
		num = num.toFixed(decimal) + '';
		var array = num.split(".");
		switch (array.length) {
		case 1:
			return num.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
		case 2:
			return array[0].replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,') + "." + array[1];
		default:
			return num;
			break;
		}
	}
});
Global site tag (gtag.js) - Google Analytics