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 相关文章推荐
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
详解javascript new的运行机制
Jan 26 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
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
分享下页面关键字抓取components.arrow.com站点代码
2014/01/30 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
了解ESlint和其相关操作小结
2018/05/21 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python数据类型详解(二)列表
2016/05/08 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
中间件的定义
2016/08/09 面试题
战友聚会主持词
2014/04/02 职场文书
服务行业演讲稿
2014/09/02 职场文书
捐款感谢信
2015/01/20 职场文书
教师节领导致辞
2015/07/29 职场文书
汉语拼音教学反思
2016/02/22 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python