1、
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
var msgBox = Ext.MessageBox.show({
title:'进度提示',
msg:'',
modal:true,
progress:true,
width:400
});
//滚动条被刷新的次数
var count = 0;
//进度百分比
var percentage = 0;
//进度条信息
var processText = '';
Ext.TaskMgr.start({
run:function(){
count++;
//刷新10次后关闭进度条
if(count>10){
msgBox.hide();
}
//计算进度
percentage = count/10;
//显示内容
processText = '当前进度:'+percentage*100+'%';
//更新进度条
msgBox.updateProgress(percentage,processText,'<font color="red">这是通过动态更新内容形成的进度条</font>');
},
interval:1000 //每秒更新
});
});
</script>
2、
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
var progressBar = new Ext.ProgressBar({
renderTo:'progressbar',
width:400
});
//滚动条被刷新的次数
var count = 0;
//进度百分比
var percentage = 0;
//进度条信息
var processText = '';
Ext.TaskMgr.start({
run:function(){
count++;
//刷新10次后关闭进度条
if(count>10){
progressBar.hide();
}
//计算进度
percentage = count/10;
//显示内容
processText = '<font color="green">'+percentage*100+'%</font>';
//更新进度条
progressBar.updateProgress(percentage,processText);
},
interval:1000 //每秒更新
});
});
</script>
3、
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
var progressBar = new Ext.ProgressBar({
renderTo:'progressbar',
width:400
});
//初始化一个自动更新的进度条
progressBar.wait({
duration:9000,//进度条运作时间的长度,单位是毫秒
interval:1000,//每次更新的间隔周期(默认为1000毫秒)
increment:10,//进度条每次更新的幅度大小(默认为10)。如果进度条达到最后,那么它会回到原点。
scope:this,//回调函数的作用域
fn:function(){ //回调函数
alert("更新完成");
progressBar.hide();
}
});
});
</script>
4、
<style type="text/css">
.progressBar{
border: 0;
}
.progressBar .x-progress-inner{
height: 16px;
background: white;
}
.progressBar .x-progress-bar{
height: 15px;
background: transparent url(images/custom-bar-green.gif) repeat-x 0 0;
border-top:0;
border-bottom:0;
border-right: 0;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
var progressBar = new Ext.ProgressBar({
renderTo:'progressbar',
width:400,
cls:'progressBar'
});
//初始化一个自动更新的进度条
progressBar.wait({
duration:9000,//进度条运作时间的长度,单位是毫秒
interval:1000,//每次更新的间隔周期(默认为1000毫秒)
increment:10,//进度条每次更新的幅度大小(默认为10)。如果进度条达到最后,那么它会回到原点。
scope:this,//回调函数的作用域
fn:function(){ //回调函数
alert("更新完成");
progressBar.hide();
}
});
});
</script>
- 大小: 3.6 KB
- 大小: 934 Bytes
- 大小: 444 Bytes
- 大小: 422 Bytes
分享到:
相关推荐
AntarDev.ProgressBar 文件文件 AntarDev.ProgressBar AntarDev.ProgressBar
方便 ,实用,可现实百分比,可定义百分比
jQuery progressBar - jQuery进度条插件.progressbar.1.2。 PHP版本
jquery.progressbar.2.01进度条显示插件
jquery.progressbar.2.0,最新JS控件
Struts2.0+jquery.progressbar实现上传文件进度条 附带实例源码 uploadJqueryProgress.jsp uploadprogress.jsp 两个上传页面,两种不一样风格的进度条。uploadJqueryProgress.jsp 是在 uploadprogress.jsp 的基础...
API 25 widget.ProgressBar
资源分类:Python库 所属语言:Python 资源全名:eea.progressbar-6.0.zip 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
第八章 Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件 61 一、滚轴控件 Ext.slider 61 二、进度条控件 Ext.ProgressBar 64 三、编辑控件 Ext.Editor 68 第九章 Ext.Panel 面板控件、 Ext...
3.3.1 认识Ext.ProgressBar 3.3.2 手工模式的进度条 3.3.3 自动模式的进度条 3.3.4 自定义样式的进度条样式 3.4 实现工具栏和菜单栏 3.4.1 认识Ext.toolbar.Toolbar 3.4.2 只包含按钮的简单工具栏 3.4.3 包含...
压缩包包含三部分 1。DLL程序集 2。一个包含了一些常用方法演示的测试WEB项目,可以通过VS打开,并查看效果 ...在工具栏中右键单击->"选择项",浏览文件,选择ProgressBar.dll,这样就可以在工具栏中看到进度条控件了
5.3.1 Ext.ProgressBar简介 5.3.2 手工模式的进度条 5.3.3 自动模式的进度条 5.3.4 自定义样式的进度条 5.4 工具栏和菜单栏 5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂...
5.3.1 Ext.ProgressBar简介 5.3.2 手工模式的进度条 5.3.3 自动模式的进度条 5.3.4 自定义样式的进度条 5.4 工具栏和菜单栏 5.4.1 Ext.Toolbar简介 5.4.2 只包含按钮的简单工具栏 5.4.3 包含多种元素的复杂...
简单介绍了progressbar的用法,点击按钮,实现进度的控制
C#进度条ProgressBar实例,简单实用
C#视频之ProgressBar实例(附带源码),湖南第一师范(一萧烟雨)制作
本源码主要是学习SeekBar、ProgressBar用法,拖动条与进度条结合,当拖动拖动条的时候,ProgressBar跟随着变化,普通拖拉条被拉动的处理代码: SeekBar sb=(SeekBar)this.findViewById(R.id.SeekBar01); sb....
style=@android:style/Widget.DeviceDefault.Light.ProgressBar.Large ... 没有显示进度,可作为过场动画。有大、中、小三种大小,默认为中。 1.2 条形进度条 style=@android:style/Widget.ProgressBar.Horizontal ...