jquery插件制作进度条

用jquery插件制作进度条

一、首先我们需要引入jquery自制的js库和jquery制作制度条用的CSS样式。

<script type="text/javascript"

        src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js">

</script>

      <script type="text/javascript"

      src="${pageContext.request.contextPath}/js/jquery-ui-1.8.18.custom.min.js">

</script>

      <link rel="stylesheet"type="text/css"

      href="${pageContext.request.contextPath}/css/ui-lightness/jquery-ui-1.8.18.custom.css">

二、需要建立一个div。

<div id="progressbar"></div>

三、只需要调用progressbar方法即可，value显示进度条用了这一行的多少。

   <script>

   $(function() {

      $( "#progressbar").progressbar({

        value: 60

      });

   });

   </script>

四、当我们看到很多进度条都是动态的，这一步就是经典了，我们只需要把进度条用黄色占领的值用一个动态的背景图片代替，就Ok了。

<style type="text/css">

   .ui-progressbar-value { background-image: url(./image/pbar-ani.gif); }/*ui-progressbar-value为进度条的值*/

   </style>