jquery-ui 进度条功能示例【测试可用】


Posted in jQuery onJuly 25, 2019

本文实例讲述了jquery-ui 进度条功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>3water.com 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="https://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.css" rel="external nofollow"  media="screen"/>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.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>

运行效果:

jquery-ui 进度条功能示例【测试可用】

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

jquery-ui 进度条功能示例【测试可用】

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery实现放大镜案例
Oct 19 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
jquery插件开发模式实例详解
Jul 20 #jQuery
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
You might like
HTML中嵌入PHP的简单方法
2016/02/16 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python获取本机外网ip的方法
2015/04/15 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
python使用matplotlib绘制热图
2018/11/07 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python3去掉string中的标点符号方法
2019/01/22 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
pandas的排序和排名的具体使用
2019/07/31 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
市场营销调查计划书
2014/05/02 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
校园安全标语
2014/06/07 职场文书
文秘应届生求职信
2014/07/05 职场文书
学校四风对照检查材料
2014/08/28 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers