jquery简单插件写法
(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简单插件写法的更多相关文章
- 五子棋项目总结 JavaScript+jQuery(插件写法)+bootstrap(模态框)
Html部分(界面): 1.五子棋棋盘由canvas完成: 2.两个按钮,样式由bootstrap完成: 3.菜单按钮对应的模态框,可以选择游戏模式:玩家自由对战,和电脑对战,还可以指定谁先执子和哪个 ...
- Jquery 自定义插件写法(示例)
(function ($) { $.SmsHelper = $.SmsHelper || {}; $.extend($.SmsHelper, { //插件具体实现代码 yzmnum: 60, Ajax ...
- jquery简单插件到复杂插件(1)--tabs
写在前面,到了新公司开始转做前段,之前一直写php,一共写了半年,转过来,jq都用不好,但是还是得不断的学习,谁没菜过.从最简单的开始写,最近也在学习些html5的小游戏,加油吧.js原生写的可以说惨 ...
- jquery简单插件到复杂插件(3)--顶部导航固定
那个效果很多,比如hao123的头部 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- jquery简单插件到复杂插件(2)--简单手风琴
手风琴就是展示与隐藏 <div id="dataContent"> <div class="dataLeft fl"> <div ...
- [转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
- sDashboard:简单的,轻量级的 jQuery 仪表板插件
sDashboard 是一个轻量的仪表板 jQuery 插件,转换一个对象数组到仪表板.数组中的每个对象将被呈现为一个仪表板组件,可以通过左右拖 动重新排列. sDashboards 内置渲染 Da ...
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.引入依赖js <script src=& ...
- Jquery插件写法及extentd函数
JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...
随机推荐
- js 对数据转换成数据容量单位
function bytesToSize(value) { alert(value); alert('value'); debugger; if (value === 0) return '0 B'; ...
- 全部leetcode题目解答(不含带锁)
(记忆线:当时一刷完是1-205. 二刷88道.下次更新记得标记不能bug-free的原因.) 88-------------Perfect Squares(完美平方数.给一个整数,求出用平方数来 ...
- Activity系列讲解---Activity运行时的屏幕方向,全屏,窗体模式的设置
Android内置了方向感应器的支持.Android会根据所处的方向自动在竖屏与横屏间切换.但是有的应用程序只能在横/竖屏时运行,比如某些游戏,此时我们要锁定该Activity运行时的屏幕方向,< ...
- a标签填充父容器
body>div>a{Join} div{ width:150px; height:35px; } a{ display:block; line-height:35px; height:3 ...
- Gson解析纯Json数组
[ { "type": "123", "value": 123 }, { "type": "234" ...
- 配置VMware虚拟机用绕过校园网达到无线上网配置方法
因为平时要用到Vmware这样的工具上虚拟机上网, 但是本人是学生狗,学生狗在学校就要面对大学毒瘤软件--锐捷,而锐捷是不允许有虚拟网卡的存在的,所以上网只能用wifi上.之前试了很久,反正是怎么开都 ...
- eclipse工具常用快捷键总结
1. ctrl + shift + r 可以根据类名快速找到你所需要的类名称 2. ctrl + shift + i debug的时候可以查看代码的值 3. ctrl + shift + f ...
- WPF 如何绘制不规则按钮,并且有效点击范围也是不规则的
最近在做一个东西,如地图,点击地图上的某一区域,这一区域需要填充成其他颜色.区域是不规则的,而且点击该区域的任一点,都能够变色.普通的按钮只是简单的加载一幅图肯定是不行的.查了很多资料,终于把它搞定了 ...
- oracle undo回滚段详解
1.Undo是干嘛用的? 在介绍undo之前先说一下另外一个东西 transaction ,翻译成交易或事务.我们在进行一个事务的过程中需要申请许多资源,一个复杂的事务也需要很多步来完成.那么一个 ...
- 再见,OI
你好,NOIP 2015年9月1日 正式成为了福建省莆田一中的一名高一成员 后来学校搞了选修 大家都很激动 因为自己的兴趣和特长能够得到发挥了(或者说能逃课或者看好多电影) 发现选修提供的选项中有好几 ...