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 相关文章推荐
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
详解ES6中的let命令
2020/04/05 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
python中正则的使用指南
2016/12/04 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
电气技术员岗位职责
2013/11/19 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
简易版租房协议书范本
2014/10/13 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
Java 数组的使用
2022/05/11 Java/Android