【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;
}
}
});
|