码迷,mamicode.com
首页 > Web开发 > 详细

jqueryui 进度条使用

时间:2014-10-29 14:45:13      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   os   ar   使用   java   

bubuko.com,布布扣
 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>
View Code

bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣

jqueryui 进度条使用

标签:style   blog   http   io   color   os   ar   使用   java   

原文地址:http://www.cnblogs.com/DDSkay/p/4059374.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!