jqueryui 进度条使用

浏览数：31 / 时间：2015年06月09日

 1  <title></title>
 2     <script src="../Js/NewJs_CFJ/jquery.js" type="text/javascript"></script>
 3     <link href="../Js/NewJs_CFJ/jquery.ui.progressbar.css" rel="stylesheet" type="text/css" />
 4     <link href="../Js/NewJs_CFJ/jquery-ui.theme.css" rel="stylesheet" type="text/css" />
 5   
 6     <script src="../Js/NewJs_CFJ/jquery-ui.js" type="text/javascript"></script>
 7    
 8    <style type="text/css">
 9   
10   .ui-progressbar {
11     position: relative;
12   }
13   .progress-label {
14     position: absolute;
15      text-align:center;
16     font-weight: bold;
17     text-shadow: 1px 1px 0 #fff;
18  }
19  </style>
20     <script type="text/javascript">
21 
22      function addValue(value){
23          var pro = $("#divProgerssbar");
24          var proLabel = $(".progress-label"); //进度条里面文字
25         
26          var temp = 100;
27          if (Number(value) > 100) {
28              temp = Number(value);
29        }
30        pro.progressbar({
31            value: Number(value),  
32            max: temp
33 
34        });
35        proLabel.text(pro.progressbar("value") + "%");
36       
37    
38     }
39     $(function () {
40         addValue(0);
41 
42               $("#ss").click(function () {
43                   addValue(46);
44               });
45               $("#vv").click(function () {
46                   addValue(234.5);
47               });
48         });
49       
50     </script>
51 </head>
52 <body>
53     <form id="form1" runat="server">
54     <input type="button" value="sdf" id="ss" />
55      <input type="button" value="sdf" id="vv" />
56     <div id="divProgerssbar" style=" width:400px" >
57         <div class="progress-label"  style=" width:400px" >
58         </div>
59     </div>
60     </form>
61 </body>
62 </html>