<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>progressbar</title>
<style type="text/css">
#divprogressbar{
width:300px;
height:30px;
}
.progress-label{
float:left;
margin-left:40%;
margin-top:3px; }
</style>
<link rel="stylesheet" href="css/jquery-ui-1.10.4.min.css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script> </head>
<body> <div id="divprogressbar"><div class="progress-label">loading...</div></div> <script type="text/javascript">
$(function(){ // var val=0;
$('#divprogressbar').progressbar({value:0});
$('#divprogressbar').progressbar({
value:0,
change:function(){
$(".progress-label").text($("#divprogressbar").progressbar("value")+"%");
},
complete:function(){
$(".progress-label").text("Complete!");
} });
function progress(){
var val= $('#divprogressbar').progressbar("value") || 0;
$('#divprogressbar').progressbar("option","value",val+1);
if(val<99)
{
setTimeout(progress,100);
} } setTimeout(progress,1000); }
);
</script>
</body>
</html>

  

查看文档:http://jqueryui.com/progressbar/

jquery-ui 进度条的更多相关文章

  1. JQuery UI进度条——Progressbar

    1.先引入jquery和jquery-ui的js,例子如下: <link href="JqueryUI/jquery-ui.css" rel="stylesheet ...

  2. JQuery入门——进度条

    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...

  3. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  5. jquery自定义进度条与h5原生进度条

      介绍一款自定义的进度条 <div class="box-nine"> <div class="progress"> <!--一 ...

  6. jquery 圆形进度条

    最近手里面的项目需要完成这个对设备性能的检测显示功能,需要使用到圆形进度条这样的效果,网上找了一圈,有很多相当的插件,找到:circliful 插件,看了他的使用说明比较的方便,于是就下载了它并将自己 ...

  7. html + css + jquery实现简单的进度条实例

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta ...

  8. bootstrap与jQuery结合的动态进度条

    此款进度条实现的功能: 1.利用了bootstrap的进度条组件. a.在最外层的<div>中加入class .progress,在里层<div>加入class .progre ...

  9. struts2:上传多个文件时实现带进度条、进度详细信息的示范

    上一篇文章讲了上传单个文件与上传多个文件(属性驱动)的例子.本例是上传多个文件(属性驱动),并且显示进度条.进度详细信息的示范. 在文件上传选择界面,允许用户增加.删除选择的文件,且只能上传指定类型的 ...

  10. Unity跳转场景进度条制作教程(异步加载)

    Unity跳转场景进度条制作 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

随机推荐

  1. Windows Store App 用户库文件操作

    (1)获取用户库位置 如果想要通过应用程序在用户库中创建文件,首先需要获得用户库中指定的位置,例如图片库.文档库等.这里值得注意的是,在获取用户库的位置之前,必须在Windows应用商店项目的清单文件 ...

  2. Axis2 webservice入门--写个简单的webservice

    上一篇介绍了webservice开发前的准备.下面开始写webservice.如果不了解axis2请看上一篇,如果是新手:建议一边看一边写代码,自己动手完成这个过程. 一.新建一个web项目 二.新建 ...

  3. Eclipse 汉化包

    http://www.eclipse.org/babel/downloads.php 下载地址,具体操作请百度. http://subclipse.tigris.org/update_1.6.x SV ...

  4. [Js]滑动门效果

    描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...

  5. bzoj 2186: [Sdoi2008]沙拉公主的困惑

    #include<cstdio> #include<iostream> #define ll long long #define N 10000009 using namesp ...

  6. 让webapi只接受ajax请求

    为了测试先做一个简单的webapi,直接用新建项目时默认的就可以了.   在浏览器中测试request get,得到结果   然后再项目中新建一个AjaxOnly的类   AjaxOnly继承Acti ...

  7. 神奇的Noip模拟试题一试 2 排队

    2 排队 (lineup.pas/.c/.cpp) [问题描述] 小sin所在的班有n名同学,正准备排成一列纵队,但他们不想按身高从矮到高排,那样太单调,太没个性.他们希望恰好有k对同学是高的在前,矮 ...

  8. SpinEdit

    用code给value赋值会触发 change事件

  9. swift语言开发的一个游戏------熊猫跑酷(KongfuPanda)

    项目地址:https://github.com/jakciehoo/KongfuPanda 欢迎加QQ群:260558552.大家一起交流iOS开发,我们可以一起学习,我很想集结一些志同道合的朋友,一 ...

  10. sqlserver定时备份

    前言:给客户部署好系统以后,如果不加一个定时备份,总感觉心里不放心,所以一定要做定时备份,并且定时备份是很简单的 新建作业--基本信息 新建步骤 ) ),) print @filename , NOF ...