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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 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
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
使用angular写一个hello world
2015/01/23 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
python中如何写类
2020/06/29 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
爱游人:Travelliker
2017/09/05 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
Jdbc数据访问技术面试题
2012/03/30 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
导师鉴定意见
2015/06/05 职场文书
生死牛玉儒观后感
2015/06/11 职场文书
车位出租协议书范本
2016/03/19 职场文书
Nginx Rewrite使用场景及配置方法解析
2021/04/01 Servers
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
vue router 动态路由清除方式
2022/05/25 Vue.js