首页 文章

如何在进度条中创建与填充进度div一起移动的div？

提问于
浏览 次
-1

我有一个进度条，其进度是从数据库中计算出来的 . 基本上它知道它在打印作业中走了多远并以百分比形式显示（即10/20页打印为50％）

我想要一个div跟随加载的进度条，彩色部分显示打印任务已经走了多远 . 像这样的东西 .

enter image description here

但是我很难通过进度条正确地使用tab div，特别是当我更改屏幕尺寸时 . 这就是我目前计算边距和头寸的方法：

HTML

<div class="col s4 m4 l5" style="position: relative">
     <div class="left-align">PRINTING</div>
     <div id="talkbubble" style="z-index: 1; position: absolute; top: 0px; margin-left: {{getTabMargin}}%">hello</div>
     <div class="progress progress-dashboard-full statusBars">
          <div class="determinate progress-dashboard-loaded" style="width: {{getprogressWidth}}%"></div>
     </div>
</div>

JS

getprogressWidth: function() {
   return ((progressWidth/100)*100);
},
getTabMargin: function() {
   return (((progressWidth/100)*100)-8);
},

这只是Blaze编写javascript函数的方式，但原理是一样的 . 基本上我所做的是获取进度条的宽度（getprogressWidth），然后减去8％以补偿div选项卡的宽度 . 但是这不起作用，尤其是在调整屏幕大小时 .

有谁能推荐更好的解决方案？

javascript jquery html css meteor-blaze

1 回答

  • 1

    我会用纯css做到这一点：

    <div class="col s4 m4 l5" style="position: relative">
     <div class="left-align">PRINTING</div>
     <div class="progress progress-dashboard-full statusBars">
          <div class="determinate progress-dashboard-loaded" style="position:relative;width:50%">
            <div id="talkbubble" style="position: absolute; top: 0; right: -18px;">hello</div>
          </div>   
     </div>
</div>
    回复于

相关问题