自己寫的 Loading JS插件
本文為原創文章,轉載請注明出處,謝謝。
/**
* @author samkin.yang
* @version 1.0
*/
var $_yxj = new SamkinLoading();
(function($){
if($){
$.fn.extend({
showLoading : function(){
$_yxj.showLoading($(this).attr("id"));
},
hideLoading : function(){
$_yxj.hideLoading($(this).attr("id"));
}
});
}
})(jQuery);
function DomInfo(i,t,l,w,h){
this.id = i;
this.offsetTop = t;
this.offsetLeft = l;
this.width = w;
this.height = h;
};
function SamkinLoading(){
this.iconUrlPrix = "";
this.loading = function(domId){
};
this.getLoadingDivInfo = function(domId) {
var dom = document.getElementById(domId);
var t=dom.offsetTop;
var l=dom.offsetLeft;
var domHeight = dom.clientHeight;
var domWidth = dom.clientWidth;
while(dom=dom.offsetParent){
t+=dom.offsetTop;
l+=dom.offsetLeft;
}
return new DomInfo(domId,t,l,domWidth,domHeight);
};
this.createDiv = function(domId){
var domInfo = this.getLoadingDivInfo(domId);
var bottomDiv;// = document.createElement("div");
bottomDiv = document.getElementById("loadingDiv_" + domId);
if(!bottomDiv) {
bottomDiv = document.createElement("div");
bottomDiv.setAttribute("id", "loadingDiv_"+domInfo.id);
var topDiv = document.createElement("div");
topDiv.className = "samkin-loading-top-div";
bottomDiv.appendChild(topDiv);
document.body.appendChild(bottomDiv);
}
// newNode.style.filter =
// "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
// newNode.style.filter = "Alpha(Opacity=50, FinishOpacity=100, Style=1,
// StartX=0, StartY=0, FinishX=100, FinishY=140)";
bottomDiv.style.top = domInfo.offsetTop + "px";
bottomDiv.style.left = domInfo.offsetLeft + "px";
bottomDiv.style.width = domInfo.width + "px";
bottomDiv.style.height = domInfo.height + "px";
bottomDiv.setAttribute("class", "samkin-loading-bottom-div");
bottomDiv.className = "samkin-loading-bottom-div";
bottomDiv.style.display = document.getElementById(domInfo.id).style.display;
// bottomDiv.style.backgroundImage = "url('" + this.iconUrlPrix
// +"/images/star.gif')";
/*
* if(this.isIE()){ //bottomDiv.style.filter =
* "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
* //bottomDiv.style.filter = "Alpha(Opacity=50, FinishOpacity=100,
* Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140)";
* bottomDiv.style.filter = "Alpha(Opacity=20)"; } else {
* bottomDiv.style.opacity = "0.2"; }
*/
};
this.isIE = function() {
if(document.body.addEventListener) // W3C
{
return false;
}
else if(document.body.attachEvent) // IE
{
return true;
}
};
this.showLoading = function(domId){
/*
* var dom = document.getElementById("loadingDiv_" + domId); if(dom) {
* dom.style.display = "block"; } else { var domInfo =
* this.getLoadingDivInfo(domId); this.createDiv(domInfo); }
*/
this.createDiv(domId);
};
this.hideLoading = function(domId){
var dom = document.getElementById("loadingDiv_" + domId);
if(dom) {
dom.style.display = "none";
}
};
this.createLoadingObj = function(domId){
return
};
this.test = function(domId){
this.showLoading(domId);
};
};
使用方法,
如果在引入了jQuery環境下,可以這樣使用:
顯示遮罩層:$("#id").showLoading();
去除遮罩層:$("#id").hideLoading();
如果沒有引入jQuery的時候可以這樣用:
顯示遮罩層:$_yxj.showLoading('id');
去除遮罩層:$_yxj.hideLoading('id');
@CHARSET "BIG5";
.samkin-loading-bottom-div {
position: absolute;
width: 100px;
height: 60px;
background-color: black;
overflow: hidden;
display: block;
opacity:0.8;/* w3c */
filter:alpha(opacity=80);/* ie */
}
.samkin-loading-top-div {
clear:both;
width:100%;
height:100%;
background: url('images/two-circle.gif') white no-repeat center;
}
自己寫的 Loading JS插件的更多相关文章
- H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多
前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- js插件---Amaze UI dialog如何使用
js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...
- js插件---layer.js使用体验是怎样
js插件---layer.js使用体验是怎样 一.总结 一句话总结:只有jquery和js,没有css,使用各种弹出层掉用各种函数特别方便,特别简单,特别好用. 引入只需要引入这两个,css都不需要, ...
- js插件---jqGrid插件如何使用
js插件---jqGrid插件如何使用 一.总结 一句话总结:jqdrid还是依赖加js初始化的方式,很多时候插件的问题一般都是引入的css和js的问题,jqgrid里面遇到的问题就是下载包有一些js ...
- amazeui学习笔记--js插件(UI增强2)--按钮交互Button
amazeui学习笔记--js插件(UI增强2)--按钮交互Button 一.总结 1.按钮loading状态: <button type="button" class=&q ...
- 【jQuery小实例】js 插件 查看图片
---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...
- 【PC端】jQuery+PHP实现浏览更多内容(jquery.more.js插件)
参数说明: 'amount' : '10', //每次显示记录数 'address' : 'comments.php', //请求后台的地址 'format' : 'json', //数据传输格式 ' ...
- chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法[bubuko.com]
chart.js插件生成折线图时数据普遍较大时Y轴数据不从0开始的解决办法,原文:http://bubuko.com/infodetail-328671.html 默认情况下如下图 Y轴并不是从0开始 ...
随机推荐
- java四种创建对象的方法
1.用new语句创建对象,这是最常见的创建对象的方法. 2.运用反射手段,调用java.lang.Class或者java.lang.reflect.Constructor类的newInstance ...
- Spring boot将配置属性注入到bean类中
一.@ConfigurationProperties注解的使用 看配置文件,我的是yaml格式的配置: // file application.yml my: servers: - dev.bar.c ...
- 运行出现 Multiple dex files define Landroid/support/annotation/AnimRes 解决方法
1. 拷贝google-play-services_lib/libs/目录下的android-support-v4.jar到xxxr/libs/下 2. 工程进行如下设置:
- SET NOCOUNT (Transact-SQL)
阻止在结果集中返回显示受 Transact-SQL 语句或存储过程影响的行计数的消息. 语法 SET NOCOUNT { ON | OFF } 注释 当 SET NOCOUNT 为 ON 时,不返回 ...
- 使用Windows驱动的虚拟打印机,打印Excel表格无表格线问题解决(2)
测试: 经前天的测试,最终还是没有明显的定夺到底是驱动的问题,还是打印机的问题.但是按照可能性来排查,最明显的一点就是其他测试环境不变的情况下增加一张图片,就可以打印出表格线,我始终觉得这里是突破点, ...
- shell如何将文件上传至ftp
#!/bin/bash ip=$ port=$ user=$ /usr/bin/lftp -p $port $ip <<EOF user $user $pwd set ftp:ssl-au ...
- E - Just a Hook - hdu 1698(区间覆盖)
某个英雄有这样一个金属长棍,这个金属棍有很多相同长度的短棍组成,大概最多有10w节,现在这个人有一种魔法,他可以把一段区间的金属棍改变成别的物质,例如金银或者铜, 现在他会有一些操作在这个金属棍上,他 ...
- js打开新的链接下载文件
var p =params.join("&"); var a = document.createElement('a'); a.href = 'report/exportp ...
- Android SHA1与Package获取方式
获取应用包名 打开Android 应用工程的 AndroidManifest.xml配置文件,package 属性所对应的内容为应用包名. 如下图所示,红框中的内容: 获取 Sha1 值 开发模式(d ...
- IIS rewrite映射规则语法格式
IIS rewrite映射规则语法格式,特殊符号:&请用& amp;代替,否则异常. <configuration> <system.webServer> &l ...