(function($){

/**
* 遮罩插件
* 使用:$('#id').qloading(options);
* 详见:/plugins/_11_qloading/qloading.html
* options:定制选项,默认配置见$.fn.qloading.defaults
*
* hide : 隐藏遮罩,默认为false
* zindex : 遮罩背景的zindex,默认为9000
* bgcolor : 遮罩背景的色值,默认为#fff,也可以使用rgba色值
* imgurl : 遮罩中间的图片地址
* imgwidth : 遮罩中间的图片宽度
* imgheight: 遮罩中间的图片高度
* imgzindex: 遮罩中间的图片zindex,默认为9001
*/
$.fn.qloading = function(opts){
var options = $.extend({}, $.fn.qloading.defaults, opts);

return this.each(function(){
var $el = $(this);

if(options.hide){
if($el.find('.ng-loading').length) $el.find('.ng-loading').hide().remove();
}else{
var top = $el.offset().top;
var left = $el.offset().left;
var height = $el.height();
var width = $el.width();
var imgmargin = '-' + parseInt(options.imgheight/2) + 'px 0 0 -' + parseInt(options.imgwidth/2) + 'px';

$('<div class="ng-loading"><img src="' + options.imgurl + '" /></div>')
.css({
'position' : 'absolute',
'z-index' : options.zindex,
'top' : top,
'left' : left,
'display' : 'none',
'width' : width,
'height' : height,
'background-color' : options.bgcolor
}).appendTo($el).find('img').css({
'position' : 'absolute',
'z-index' : options.imgzindex,
'top' : '50%',
'left' : '50%',
'display' : 'none',
'width:' : options.imgwidth,
'height' : options.imgheight,
'margin' : imgmargin
}).show().end().show();
}
});
};
$.fn.qloading.defaults = {
hide : false,
zindex : 9000,
bgcolor : '#fff',
imgurl : '//img.niuguwang.com/static/img/0/loading.gif',
imgwidth : 64,
imgheight : 64,
imgzindex : 9001
};

})(jQuery);

原地址:http://git.oschina.net/uikoo9/lzqdbnur5h24wo6s8af79.code.git

jquery简单插件写法的更多相关文章

  1. 五子棋项目总结 JavaScript+jQuery(插件写法)+bootstrap(模态框)

    Html部分(界面): 1.五子棋棋盘由canvas完成: 2.两个按钮,样式由bootstrap完成: 3.菜单按钮对应的模态框,可以选择游戏模式:玩家自由对战,和电脑对战,还可以指定谁先执子和哪个 ...

  2. Jquery 自定义插件写法(示例)

    (function ($) { $.SmsHelper = $.SmsHelper || {}; $.extend($.SmsHelper, { //插件具体实现代码 yzmnum: 60, Ajax ...

  3. jquery简单插件到复杂插件(1)--tabs

    写在前面,到了新公司开始转做前段,之前一直写php,一共写了半年,转过来,jq都用不好,但是还是得不断的学习,谁没菜过.从最简单的开始写,最近也在学习些html5的小游戏,加油吧.js原生写的可以说惨 ...

  4. jquery简单插件到复杂插件(3)--顶部导航固定

    那个效果很多,比如hao123的头部 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  5. jquery简单插件到复杂插件(2)--简单手风琴

    手风琴就是展示与隐藏 <div id="dataContent"> <div class="dataLeft fl"> <div ...

  6. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...

  7. sDashboard:简单的,轻量级的 jQuery 仪表板插件

    sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 ​动重新排列. sDashboards 内置渲染 Da ...

  8. jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...

  9. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

随机推荐

  1. AlloyTouch插件

    1.老样子引入js <script src="js/transform.js"></script> <script src="js/allo ...

  2. python2.7 报错(UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 in position 0: ordinal not in range(128))

    报错: 原来用的python3.5版本后来改为2.7出现了这个错误里面的中文无法显示 UnicodeDecodeError: 'ascii' codec can't decode byte 0xe6 ...

  3. nginx负载SignalR

    前几天写了篇聊天室服务器扩展随想,今天有空开始实施第一步, 聊天服务器用SignalR self-host,负载用nginx,当然这只是测试,实际使用可能还需要修改. 第一步,搭好SignalR服务, ...

  4. [MySQL]show index from tb_name命令各列的含义

    show index from table_name 这个命令有助于诊断性能低下的查询,尤其是查询是否使用了可用的索引. 下面介绍下 这个命令显示的结果列的含义: | Table | Non_uniq ...

  5. Java 基础高级2 网络编程

    1.协议的概念:通信双方事先约定好的通信规则 2七层网络通信协议:应用成,表示层,会话层,传输层,网络层,数据链路层 3.TCP/IP协议:点对点通信,三层握手,安全有保证 4.UDP协议;广播协议, ...

  6. Android源码阅读 – Zygote

    @Dlive 本文档: 使用的Android源码版本为:Android-4.4.3_r1 kitkat (源码下载: http://source.android.com/source/index.ht ...

  7. .net项目中上传的图片或者文件太大 无法上传

    最近做项目的时候  用户提出要上传大图片  一张图片有可能十几兆  本来用的第三方的上传控件  有限制图片上传大小的设置 以前设置的是2M  按照用户的要求  以为直接将限制图片上传大小的设置改下就可 ...

  8. 循环获取DataTable

    DataTable ddtt = tq.Table("); string strName = ""; //DataTable ddtt = dataSet.Tables[ ...

  9. 一键启动NameNode和DataNode--shell脚本

    使用shell脚本,一键启动hadoop中的NameNode和DataNode.分为普通版和装逼版.装逼版较普通版多了很多判断和信息提示,当然主要还是为了我联系shell脚本而写的. 如果想实现复用, ...

  10. Adobe illustrator & Photoshop 处理图片

    Adobe illustrator 置入,可以将多张图片放在一张纸 (一个sheet)里面. Adobe photoshop: 新建一个图层,然后置入,将图片导入,然后裁剪,最后另存为就可以得到最后的 ...