js 异步处理进度条


Posted in Javascript onApril 01, 2010

1.先上图,效果如下:

js 异步处理进度条

2.使用方法

var loader=new Ajaxloader(this._ContentID,{Text:'loading......',Top:50}); 
loader.Show();

3.代码列出:
/* 
处理进度条,异步加载器 
*/ 
var Ajaxloader=new Class(); 
Ajaxloader.prototype= 
{ 
Text:'数据加载中......', 
Parent:null, 
Left:0, 
Top:30, 
Initialize:function(parentid,o) 
{ 
//alert('Init'); 
Extend(this,o); 
if(parentid) 
{ 
this.Parent=$(parentid); 
} 
return this; 
}, 
Show:function() 
{ 
if(this.Parent) 
{ 
var _obj = this.Create(); 
this.Parent.appendChild(_obj); 
} 
}, 
Create:function() 
{ 
var _div=document.createElement('div'); 
var _img=document.createElement('img'); 
_img.src='<%=WebResource("DSKJ.Web.UI.WebControls.Images.ajaxloader.gif")%>'; 
_img.style.cssText='display:block;'; 
var _load=document.createElement('h3'); 
_load.innerText = this.Text; 
_load.style.cssText='margin-top:5px;font-size:13px'; 
_div.appendChild(_img); 
_div.appendChild(_load); 
//设置div样式 
_div.style.cssText='font-size:13px;text-align:center;margin:0 auto;display:block;z-Index:99'; 
_div.style.marginTop=this.Top; 
return _div; 
} 
}

4.结束语
欢迎拍砖
Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
javascript 面向对象 function类
May 13 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
js实现轮播图效果 z-index实现轮播图
Jan 17 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 #Javascript
Cookie 小记
Apr 01 #Javascript
javascript操作cookie的文章(设置,删除cookies)
Apr 01 #Javascript
在模板页面的js使用办法
Apr 01 #Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 #Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 #Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 #Javascript
You might like
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php header功能的使用
2013/10/28 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
浅析Ajax语法
2016/12/05 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python使用knn实现特征向量分类
2018/12/26 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
机修工工作职责
2014/02/21 职场文书
学习型班组申报材料
2014/05/31 职场文书
土地转让协议书
2014/09/27 职场文书
财务检查整改报告
2014/11/06 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
监理中标通知书
2015/04/16 职场文书
家属联谊会致辞
2015/07/31 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript