juery ui 进度条

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<style type="text/css">

#divprogressbar{

width:350px;

height:30px;

}

.progress-label{

float:left;

margin-left:40%;

margin-top:3px;

}

</style>

<script type="text/javascript">

jQuery(function () {

jQuery("#uploadSuccess").hide();

jQuery(‘form#upload‘).ajaxForm(function (data) {

//            jQuery("#uploadSuccess").html(data);

//            jQuery("#uploadSuccess").show();

$(‘#divprogressbar‘).progressbar({value:100});

clearTimeout(t2);

$(".progress-label").text(data);

});

});

//进度条控制

function progressBar(data){

$(‘#divprogressbar‘).progressbar({value:0});

$(‘#divprogressbar‘).progressbar({

value:0,

change:function(){

$(".progress-label").text($("#divprogressbar").progressbar("value")+"%");

},

complete:function(){

$(".progress-label").text(data);

return true;

}

});

function progress(){

var val= $(‘#divprogressbar‘).progressbar("value") || 0;

$(‘#divprogressbar‘).progressbar("option","value",val+1);

if(val<99)

{

t2= setTimeout(progress,100);

}else{

val=0;

t2= setTimeout(progressBar(""),100);

}

}

setTimeout(progress,100);

}

</script>

<body>

<br/>

<div id="divprogressbar"><div class="progress-label"></div></div>

<div id="uploadSuccess">上传中</div>

<form id="upload" onsubmit="progressBar(‘‘)" action="dataservice/db/db_save.jsp?handle=importData&ds_db_id=<%=request.getParameter("ds_db_id")%>&db_table=<%=request.getParameter("db_table")%>" enctype="multipart/form-data" method="post">

<input type="file" id="excel" name="excel">

<input type="submit" value="导入">

<br>

<input type="radio" name="dataType"  value="0" />实际数据<br />

<input type="radio" name="dataType"  value="1" />预测数据<br />

</form>

</body>

</html>

juery ui 进度条,布布扣,bubuko.com

时间: 2024-07-31 14:31:43

juery ui 进度条的相关文章

小小一方士 C# Async\Await 之 上传/下载文件进度条实现原理

关于上传下载文件(图片等),涉及到UI进度条的显示,c#中 System.IProgress提供了相应的api. namespace System { // // 摘要: // 定义进度更新的提供程序. // // 类型参数: // T: // 进度更新值的类型.此类型参数是逆变.即可以使用指定的类型或派生程度更低的类型.有关协变和逆变的详细信息,请参阅 泛型中的协变和逆变. public interface IProgress<in T> { // // 摘要: // 报告进度更新. //

【转】Android UI系列-----时间、日期、Toasts和进度条Dialog

原文网址:http://www.cnblogs.com/xiaoluo501395377/p/3421727.html 您可以通过点击 右下角 的按钮 来对文章内容作出评价, 也可以通过左下方的 关注按钮 来关注我的博客的最新动态. 如果文章内容对您有帮助, 不要忘记点击右下角的 推荐按钮 来支持一下哦 如果您对文章内容有任何疑问, 可以通过评论或发邮件的方式联系我: [email protected] / [email protected] 如果需要转载,请注明出处,谢谢!! 本篇随笔将继续学

jQuery Easy UI ProgressBar(进度条)组件

ProgressBar(进度条)组件,这个还是挺好玩的,我们在自己做点什么的时候经常能用到,比如上传下载文件.导入导出文档啊.载入网页等等. 应用场景很多,使用起来还很简单. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javas

MVC实现有关时间的进度条,使用jQuery ui的progressbar

在电商网站中,有时候通过进度条来直观地显示用户是否到期以及用户当前的状态. 设计这样的一个Model. public class User { public int Id { get; set; } public string Name { get; set; } public int CoopTime { get; set; } public DateTime JoinTime { get; set; } } 以上,合作时长属性CoopTime,和加入时间属性JoinTime是和进度密切相关的

Android UI(四)云通讯录项目之云端更新进度条实现

作者:泥沙砖瓦浆木匠 网站:http://blog.csdn.net/jeffli1993 个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583]http://jq.qq.com/?_wv=1027&k=XVfBTo 一.前言 继续AndroidUI系列,UI其实是个前端活,美感是最终的boss阶段.泥瓦匠的美感也就给你们评论评论哈哈,我等UI写到一定地步.我想写下Android的一系列简单入门.为了巩固提升呗.哈哈.下面介入正题.   

从进度条和alert的出现顺序来了解浏览器 UI 渲染 &amp; JS进程

项目里有一个需求是在上传文件的时候需要显示进度条,那么理所当然的在上传完成后就需要提示用户上传完毕并且更新进度条. 之前的预期表现是,上传完毕后,先更新进度条到100%,再alert出提示,所以代码如下. 1 $('progressBar').text('100%'); 2 $('progressBar bar').css('width', '100%'); 3 alert('上传成功'); 问题一:实际表现为先alert出提示,此时被阻塞的页面显示的进度条没有被更新到100%. 分析原因,浏览

UI UIView进度条,模拟手机充电功能

#import "JRProgres.h" @implementation JRProgres { UIView * _contentView; } - (instancetype)initWithFrame:(CGRect)frame{// 重写构造方法一次创建3个视图,分别为最外层的绿框.子1白底.子2红条 self = [super initWithFrame:frame]; if (self) { //1. 设置边框为绿色 self.backgroundColor = [UIC

Android UI组件进阶(1)——带进度条的按钮

Android UI组件进阶(1)--带进度条的按钮 本节引言: 这个系列是继Android UI组件实例大全后的进阶系列,在该系列中我们将进一步的学习 Android UI组件,建议阅读本系列前线学习下UI组件实例大全系列,掌握基本组件的使用; 当然你也可以直接学习本系列!好了,废话不多说,直接开始第一节吧!本节要演示的是: 带进度条的按钮!相信大家在360手机助手到看到这个东东吧: 本节要实现的就是下方这个点击后显示进度的按钮 效果图: 必备基础: 1.进度条的一些属性: backgroun

swift UI专项训练16 ProgressView进度条

进度条的基类是UIProgressView.参数包括样式.进度.进度颜色.滑块颜色.如图: 比如我们做如下修改: 现在我们的进度条变成了如下的样子: 它的方法很简单,只有一个setProgress,设定进度就好了.