Juqery遮罩插件,想罩哪就罩哪!

 

一  前言

在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下,

需要的功能如下

  1 可以全屏遮 用于提交数据时

  2  局部遮,用于重复提交,只遮提交按钮,此功能当时在CSDN的登录中看到过,当时觉得还不错

3  遮罩上的提示文字可自己配置,因为操作的业务场景不一样,提示的信息肯定也会不一样

4  遮罩图片可配置,

5 信息提示层大小可配置

大致功能就如上几点,然后就是折腾js了,蹭蹭蹭~~~~ 然后就出来了~ 先上效果

全局遮罩效果 

局部遮罩

二 源码相关

需要了解的知识点大致如下

1 z-index属性

2 position属性

3 浏览器窗口与document 高宽的计算

4 jquery 插件格式

5 css 滤镜效果

不多说了上代码!为了减少引入的文件索性将css直接写在js中了

/**************************
*Desc:提交操作时遮罩
*Argument:type=0 全屏遮 1局部遮
*Author:Zery-Zhang
*Date:2014-09-18
*Version:1.0.0
**************************/
; (function ($) {
$.fn.jqLoading =function(option) {
var defaultVal = {
backgroudColor: "#ECECEC",//背景色
backgroundImage: "../image/loading.gif",//背景图片
text: "玩命加载中....",//文字
width: 150,//宽度
height: 60,//高度
type:0 //0全部遮,1 局部遮 };
var opt = $.extend({}, defaultVal, option); if (opt.type == 0) {
//全屏遮
openLayer();
} else {
//局部遮(当前对象应为需要被遮挡的对象)
openPartialLayer(this);
} //销毁对象
if (option === "destroy") {
closeLayer();
} //设置背景层高
function height () {
var scrollHeight, offsetHeight;
// handle IE 6
if ($.browser.msie && $.browser.version < 7) {
scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
if (scrollHeight < offsetHeight) {
return $(window).height();
} else {
return scrollHeight;
}
// handle "good" browsers
}
else if ($.browser.msie && $.browser.version == 8) {
return $(document).height() - 4;
}
else {
return $(document).height();
}
}; //设置背景层宽
function width() {
var scrollWidth, offsetWidth;
// handle IE
if ($.browser.msie) {
scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
if (scrollWidth < offsetWidth) {
return $(window).width();
} else {
return scrollWidth;
}
// handle "good" browsers
}
else {
return $(document).width();
}
}; /*==========全部遮罩=========*/
function openLayer() {
//背景遮罩层
var layer = $("<div id='layer'></div>");
layer.css({
zIndex:9998,
position: "absolute",
height: height() + "px",
width: width() + "px",
background: "black",
top: 0,
left: 0,
filter: "alpha(opacity=30)",
opacity: 0.3 }); //图片及文字层
var content = $("<div id='content'></div>");
content.css({
textAlign: "left",
position:"absolute",
zIndex: 9999,
height: opt.height + "px",
width: opt.width + "px",
top: "50%",
left: "50%",
verticalAlign: "middle",
background: opt.backgroudColor,
borderRadius:"8px",
fontSize:"13px"
}); content.append("<img style='vertical-align:middle;margin:"+(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>");
$("body").append(layer).append(content);
var top = content.css("top").replace('px','');
var left = content.css("left").replace('px','');
content.css("top",(parseFloat(top)-opt.height/2)).css("left",(parseFloat(left)-opt.width/2)); return this;
} //销毁对象
function closeLayer() {
$("#layer,#content,#partialLayer").remove();
return this;
} /*==========局部遮罩=========*/
function openPartialLayer(obj) { var eheight = $(obj).css("height");//元素带px的高宽度
var ewidth = $(obj).css("width");
var top = $(obj).offset().top; // 元素在文档中位置 滚动条不影响
var left = $(obj).offset().left; var layer = $("<div id='partialLayer'></div>");
layer.css({
style: 'z-index:9998',
position: "absolute",
height: eheight,
width: ewidth,
background: "black",
top: top,
left: left,
filter: "alpha(opacity=60)",
opacity: 0.6,
borderRadius:"3px",
dispaly: "block"
});
$("body").append(layer); return this;
}
}; })(jQuery)

三  总结

  以上代码只为自己练习所用,如果碰巧能被人所用,那纯属巧合~

我个人很享受,由构思到成品 这一过程,并一直努力将自己的一些想法,用代码慢慢实现。

下载地址http://files.cnblogs.com/zery/jqLoding.rar

预告: 表动态增加 插件 

  下一篇将介绍自己在实际项目中用到的表格动态增加,删除,取数据,绑定数据 ,数据校验等 先上个图

  

如果您觉得本文有给您带来一点收获,不妨点个推荐,为我的付出支持一下,谢谢~

如果希望在技术的道路上能有更多的朋友,那就关注下我吧,让我们一起在技术的路上奔跑

 
分类: JavaScript
标签: jquery遮罩遮罩

Juqery遮罩插件的更多相关文章

  1. Jquery遮罩插件,想罩哪就罩哪!

    一  前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下 1 可以全屏遮 用于提交数据时 2 ...

  2. jQuery遮罩插件 jquery.blockUI.js

    Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...

  3. jquery简洁遮罩插件

    /************************** *Desc:提交操作时遮罩 *Argument:type=0 全屏遮 1局部遮 *Author:Zery-Zhang *Date:2014-09 ...

  4. Bootstrap 遮罩插件jquery.mloading

    使用方法 将jquery.mloading.js和jquery.mloading.css引入到页面,调用: $(element).mLoading({ text:"",//加载文字 ...

  5. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  6. jquery简单插件写法

    (function($){ /** * 遮罩插件 * 使用:$('#id').qloading(options); * 详见:/plugins/_11_qloading/qloading.html * ...

  7. unity 常用插件 3

    一.   遮罩插件   Alpha Mask UI Sprites Quads 1.51 介绍:功能感觉很强大的一个遮罩插件,能实现LOGO高光闪动动画,圆形遮罩,透明通道图片遮罩,还真是项目必备. ...

  8. jQuery插件备忘

    jQuery BlockUI Plugin  遮罩插件                                                                          ...

  9. 【VSC】我安装了哪些扩展插件

    Nodejs gitk  ——  版本实时比对 Debugger for Chrome ——  让 vscode 映射 chrome 的 debug功能,静态页面都可以用 vscode 来打断点调试. ...

随机推荐

  1. SQL Server 数据库没有有效全部者的三种解决的方法

    问题:     开发的过程中,操作系统出了问题.决定重装系统.可是没有将SQL Server中的数据库文件分离出来,直接将系统格了.在新系统数据库中附加了数据库文件,一切还算正常.但当打开数据库关系图 ...

  2. Windows台cocos2d-x 3.2下载一个新的项目,创造的过程

    首先,左右cocos2d-x于windows下一个Android建筑环境, 引用一个网友这个博客<cocos2d-x 3.0rc开发指南:Windows下Android环境搭建>. 这里简 ...

  3. (大数据工程师学习路径)第二步 Vim编辑器----高级功能入门

    一.多文件编辑 1.使用vim编辑多个文件 编辑多个文件有两种形式,一种是在进入vim前使用的参数就是多个文件.另一种就是进入vim后再编辑其他的文件. 同时创建两个新文件并编辑 $ vim 1.tx ...

  4. 关于在同一母版页中使用多个CSS文件的解决方案

    原文:关于在同一母版页中使用多个CSS文件的解决方案 以前都用.NET1.1没遇到这问题,现在换了2.0开始学着使用母版,结果就遇到了这个问题,在百度上一搜索才发现有不少人提出这个问题,但没找到好的解 ...

  5. Java存储区域——JVM札记&lt;一个&gt;

    Java当虚拟机数据区域 执行数据区主要包括:方法区.堆.VM栈.本地方法栈.程序计数器. 当中方法区和栈是线程共享的区域,另外三块区域是每一个线程私有的区域.各个数据区的功能简单说明例如以下: 程序 ...

  6. Android在第三方应用程序系统应用尽早开始,杀死自己主动的第三方应用程序,以重新启动

    1.为什么第三方应用程序可能早于System的app启动? Android能够查阅了,这里就不细述了,这里不阐述ROM启动还有bootloader.软件启动的大致流程应该是 启动kernel 执行se ...

  7. 2014ACM/ICPC亚洲区域赛牡丹江站汇总

    球队内线我也总水平,这所学校得到了前所未有的8地方,因为只有两个少年队.因此,我们13并且可以被分配到的地方,因为13和非常大的数目.据领队谁oj在之上a谁去让更多的冠军.我和tyh,sxk,doub ...

  8. Entity Framework 6.1

    Entity Framework 6.1-Code First Code First-代码优先,先创建好领域模型.根据... 2014-04-21 14:56 阅读(6858) 评论(0)   Ent ...

  9. 第12章 代理模式(Proxy Pattern)

    原文   第12章 代理模式(Proxy Pattern) 代理模式 概述: 在软件系统中,有些对象有时候由于跨越网络或者其他的障碍,而不能够或者不想直接访问另一个对象,如果直接访问会给系统带来不必要 ...

  10. SSIS从理论到实战,再到应用(7)----常用的数据类型转换操作

    原文:SSIS从理论到实战,再到应用(7)----常用的数据类型转换操作 上期回顾: SSIS从理论到实战,再到应用(6)----SSIS的自带日志功能 在抽取各种应用的数据时候,经常会遇到数据需要转 ...