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导航条固定定位效果实例代码
May 26 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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 curl 获取https请求的2种方法
2015/04/27 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
JavaScript 无符号右移运算符
2009/04/17 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
Python中的filter()函数的用法
2015/04/27 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Python pymongo模块用法示例
2018/03/31 Python
python执行精确的小数计算方法
2019/01/21 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
商铺消防安全责任书
2014/07/29 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
JavaScript流程控制(循环)
2021/12/06 Javascript
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL