如何使用Twitter引导程序和jquery制作Hipmunk风格的进度条

Question

令我惊讶的是，我没有看到太多。

引导文档提供了许多显示进度条的选项，但没有实际使其执行某些操作的说明。

我正在编写一个单页 Web 应用程序，理想情况下，它会在切换到页面的隐藏部分之前使用进度条过渡。

以下是简化的 html：

.HTML

<div id="part1">
    <p>Sample App</p>
        <button class="analyze btn btn-primary">Analyze</button>
</div>
<div id="part2">
    <!-- Some html goes here -->
</div>

.CSS

#part2 {
   display: none;
}

Jquery

$(".analyze").click(function() {
    $("#part1").hide();
    $("#part2").show();
});

这很简单。 我想做的是制作一个进度条，该进度条动态填充在 $（".analyze"）.click 上，并且需要固定的时间才能完成，然后使用引导进度条 #part2 可见。

与hipmunk或许多其他航空公司聚合器网站所做的非常相似。

理想情况下，这在大多数浏览器上兼容并使用jquery，因为这是我用来为我的应用程序制作大部分UI的方法。

Answer 1

你可以

利用JavaScript函数setInterval一遍又一遍地重复运行一个函数。因此，这是在给定时间内更改某物宽度的简单方法。

.HTML

<div id="instance" class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    <span class="sr-only">0% Complete</span>
  </div>
</div>
<div class="show-on-done hidden">here is some other stuff</div>

JavaScript：

function fakeProgress(container, durationInMs, onDone) {
    var intervalInMS = 200;
    var doneDelay = intervalInMS * 2;
    var bar = container.find('.progress-bar');
    var srOnly = bar.find('.sr-only');
    var percent = 0;
    var interval = setInterval(function updateBar() {
        percent += 100 * (intervalInMS/durationInMs);
        bar.css({width: percent + '%'});
        bar['aria-valuenow'] = percent;
        srOnly.text(percent + '% Complete');
        if (percent >= 100) {
            clearInterval(interval);
            setTimeout(function() {
                if (typeof onDone === 'function') {
                    onDone();
                }
            }, doneDelay);
        }
    }, intervalInMS);
}

然后用这个 JavaScript 调用它：

var duration = 1000;  // in milliseconds
function onDone() {
    $('.show-on-done').removeClass('hidden');
}
fakeProgress($('#instance'), duration, onDone);

JSFiddle： https://jsfiddle.net/6ht5umxz/3/