Tag: 进度条

jQuery Slider – 进度条: 类似于：带有进度条的Jquery滑块我有这个滑块和进度条，但我希望进度条与“上一个”和“下一个”按钮同步。因此，当您单击“下一步”时，进度条将从头开始。 http://jsfiddle.net/aidenguinnip/8rJws/ $(window).load(function(){ var currentIndex = 0;// store current pane index displayed var ePanes = $(‘#slider .panel’), // store panes collection time = 3000, bar = $(‘.progress_bar’); function showPane(index){// generic showPane // hide current pane ePanes.eq(currentIndex).stop(true, true).fadeOut(); // set current index : check in panes collection length currentIndex = index; if(currentIndex = […]

在长ajax查询上更新进度条的模式: 这就是我所拥有的：一个Node.js函数，执行长（2-10秒）计算（db +外部API调用）。我使用async.auto()来组织我的调用的依赖项 HTML视图页面上的一个很好的可视化进度条调用查询的getJSON函数（参见下面的代码）现在，我只是更新计时器上的进度条。但我希望它更准确。我已经将服务器端function打破了5个里程碑（即每次外部呼叫成功完成后），我想将该进度信息发送给客户端。但是，一旦你res.send(progress)你完成了响应，就不能再发送它了。我显然需要一个不同的模式，我有一些想法： 2 ajax调用，一个轮询进度，第二个得到结果一次调用被调用5次，直到服务器端function消失完全不同的东西（也许长轮询，websockets，？）问题是：我想知道推荐的模式是什么，以及如何在服务器端和客户端实现它。示例代码或样本链接非常感谢！而且，一如既往，谢谢你的时间！这里包含我到目前为止的代码（具有明显的function遗漏）。回答这个问题并不是绝对必要的，但我在这里提供一些背景。客户 var searchFunction = function() { var user = $(“#searchTerm”).val(); $.getJSON(“/search/” + user, function(data) { console.log(data); ko.applyBindings(new MyViewModel(data)); }); $(“#content”).hide(); progressBar(5); $(“#progress_bar”).show(); setTimeout(function() { progressBar(25); }, 1000); setTimeout(function() { progressBar(50); }, 2000); setTimeout(function() { […]

需要知道jQuery UI Widget是否已应用于DOM对象: 我正在使用jQuery并与jQuery UI进行一些交互，我需要获取选项。但是，有可能jQuery UI函数尚未应用于DOM对象。当我访问一个选项时，我现在收到一个JavaScript错误。我有一个DOM对象，它附带了进度条（ http://docs.jquery.com/UI/Progressbar ）（也许）。在另一个线程中，我正在尝试使用domObj.progressbar(“option”, “value”)访问这些选项。如何确定domObj是否附加了progressbar ？

分段进度条（jQuery UI）: 我正在尝试将jQuery UI进度条分成几个部分。有人知道我会怎么做吗？示例：（2 – 视觉设计：03 http://wiki.jqueryui.com/w/page/12138028/Progressbar ）（我目前正在使用背景图片，但这不实用。）

AJAX以渐进的方式读取数据，而不仅仅是在完成时: 我想为我的ajax调用创建一个进度条。为此，我可以使我的服务器端脚本返回其进度状态。所以我需要javascript来阅读这个进度级别并显示它。是可能还是我走错了路？

进度条摆动效果: 摆动垂直进度条我学习了如何在本课题中使用横条构建一个整洁，动态大小的垂直进度条。现在，我想让它变得有趣！酒吧的摆动function应该：取4个参数： element ， height ， speed和random 使用可自定义的随机因子摆动element高度百分比跟踪元素的真实高度，它可以随时改变！使用一个事件（在小提琴中，我提供一个输入和按钮）将真实高度设置为一个新值，并设置为该高度的动画。我正在寻找最简单的答案。请解释你是如何做到的，这样我们JS新手就可以学习技巧！在最佳答案上发布+50的赏金。奖金：根据条形的真实高度更改条形图的背景颜色值。红色为0％，黄色为50％，绿色为100％; 如果你的function也这样做，我会在你的答案中加上+100 Bounty。模板小提琴我的进步我问这个问题，因为我还不知道该怎么做。但是，我将从目前为止所学到的内容中尝试一下，并在此处发布我的进度。

页面加载时显示进度轮: 当用户等待时，我需要一个进度轮来显示很多数据库和第三方cURL查询。进度轮应该立即显示，还是应该在页面模板（但不是内容）加载后显示？我应该显示进度轮，直到页面的HTML / javascript完成加载，或PHP完成加载？如果你能用原始代码展示大多数人如何做到这一点，那就太好了。我正在使用jQuery，这是一个PHP站点。

jQuery进度计时器栏: 我在jQuery中有一个进度计时器栏 – 这是一个例子http://jsfiddle.net/6h74c/ 如果我有时间值（以毫秒为单位）（600000 = 10分钟，300000 = 5分钟等），如何在该段时间内增加条形图？在jsfiddle链接中，我正在尝试将进度条设置为增加835000ms。但是，setTimeout（）决定了条形图增加的频率，它也是基于宽度百分比，这似乎不准确 – 我应该这样做吗？ function updateProgress(percentage) { $(‘#pbar_innerdiv’).css(“width”, percentage + “%”); // probably not ideal $(‘#pbar_innertext’).text(percentage + “%”); } function animateUpdate() { perc++; updateProgress(perc); if(perc < 835000) { timer = setTimeout(animateUpdate, 50); // probably not ideal either? } }

如何在Bootstrap 3中为进度条设置动画？: 我试图动画Bootstrap进度条，但我不知道该怎么做。我得到了宽度的值，但是console.log(bar_width); 以px返回宽度但不返回% ，如inline style=”width:90% 。我用代码重新创建了一个bootply： BootStrap Progress Bar HTML： HTML/CSS Photography CMS JavaScript/jQuery Photoshop jQuery的： // Skills Progress Bar $(function() { $(‘.progress-bar’).each(function() { var bar_width = $(this).css(‘width’); // returns the css width value var bar_value = $(this).attr(‘aria-valuenow’); console.log(bar_width); console.log(bar_value); $(this).animate({ value: bar_width }, { duration: 2000, easing: ‘easeOutCirc’ }); }); });

Bootstrap进度条，渐变颜色在活动宽度上按比例显示: 我需要制作一个Bootstrap进度条，它由渐变颜色填充（让我们说红色到绿色）。我的CSS目前看起来像这样： .progress-lf { position: relative; height: 31px; background-color: rgba(51, 51, 51, 0.4) } .progress-lf span { position: absolute; display: block; font-weight: bold; color: #d2d2d2; width: 100%; top:6px; } .progress-lf .gradient { background-color: transparent; background-image: -ms-linear-gradient(left, #E34747 0%, #5FB365 100%); background-image: -moz-linear-gradient(left, #E34747 0%, #5FB365 100%); background-image: -o-linear-gradient(left, #E34747 0%, #5FB365 100%); background-image: -webkit-gradient(linear, left […]