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 Validate表单验证插件实现代码
Jun 08 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jQuery常用选择器详解
Jul 17 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
如何基于jQuery实现五角星评分
Sep 02 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
php初始化对象和析构函数的简单实例
2014/03/11 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
Django 视图层(view)的使用
2018/11/09 Python
python文字转语音的实例代码分析
2019/11/12 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
大学生饮食连锁店创业计划书
2014/01/17 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
社区国庆节活动方案
2014/02/05 职场文书
《乡愁》教学反思
2014/02/18 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015年纪委工作总结
2015/05/13 职场文书
小平小道观后感
2015/06/09 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript