JGUI源码：实现简单进度条(19)

Posted zhaogaojian

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JGUI源码：实现简单进度条(19)相关的知识，希望对你有一定的参考价值。

程序效果如下

技术图片

实现进度条动画主要有两种方法：（1）使用缓动，（2）使用Jquery Animate,本文使用第二种方法，先实现代码，后续进行控件封装

<style>
      .jgui-processbar .loading
      {
        background-color: #22B581;
        height: 100%;
        width:0%;
        color:white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>这是进度条演示代码</div>
    <script type="text/javascript">
      $(function() {
        showProcess1();
        showProcess2();
      });
      function showProcess1()
      {
        $(‘#processbar1 .loading‘).animate({‘width‘:‘100%‘},500);
      }
      function showProcess2()
      {
        $(‘#processbar2 .loading‘).animate(
          {
            ‘width‘:‘100%‘},
            {
              step:function(now,fx){
                if(fx.prop=="width"){
                  var pos=Math.round(fx.pos*100);
                  $(‘#processbar2 .loading‘).html(pos+‘%‘);
                }
            },
            duration:1000});
      }
    </script>
    <div class="jgui-processbar" id="processbar1"  style="position:relative;width:320px;height:20px;border: #12A571 1px solid">
     <div class="loading"></div>
    </div>
    <div style="margin:10px">
    </div>
    <div class="jgui-processbar" id="processbar2"  style="position:relative;width:320px;height:20px;border: #12A571 1px solid">
      <div class="loading"></div>
     </div>

需要注意的是，div  loading需要设置高度100%，因为div 默认的高度是auto，如果没有内容的话高度为0.
第一种方法单纯显示动画，第二种方法会更新进度到界面上。

写好后，发现loading宽度比父div宽度要宽，加上relative属性即可解决

 <style>
      .jgui-processbar
      {
        position: relative;
      }
      .jgui-processbar .loading
      {
        background-color: #22B581;
        height: 100%;
        width:0%;
        color:white;
        text-align: center;
        position: relative;
      }
    </style>

 

界面演示：www.jgui.com

 

以上是关于JGUI源码：实现简单进度条(19)的主要内容，如果未能解决你的问题，请参考以下文章

JGUI源码：实现日期控件显示(17)

JGUI源码：实现mask层显示(18)

JGUI源码：Accordion折叠到侧边栏实现

JGUI源码：JS菜单动态绑定

JGUI源码：实现响应式布局(13)

活动到片段方法调用带有进度条的线程