zoukankan      html  css  js  c++  java
  • jquery-ui 进度条

       

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf8" />
    <title>progressbar</title>
    <style type="text/css">
       #divprogressbar{
       	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/

           

         

  • 相关阅读:
    Linux Commands
    sizeof操作符的使用详解
    在Vim中使用cscope
    MySQL学习笔记
    Online judge for leetcode
    使用Vim,让你工作效率更高
    Ext JS笔记
    安装J2EE开发环境
    这些都是什么啊
    QrCode二维码的实现原理
  • 原文地址:https://www.cnblogs.com/xshang/p/3757406.html
Copyright © 2011-2022 走看看