分段进度条（jQuery UI）

我正在尝试将jQuery UI进度条分成几个部分。

有人知道我会怎么做吗？

示例：（2 – 视觉设计：03 http://wiki.jqueryui.com/w/page/12138028/Progressbar ）

（我目前正在使用背景图片，但这不实用。）

这是我正在研究的原型……

CSS ： 

div { margin:10px 10px 0px 10px; height:24px; } div.progressContainer { clear:both; display:block; } label { float:left; width:200px; display:block; } input { float:left; width:100px; text-align:center; display:inline; } input[type=button] { margin-right:1.5px; }

HTML ：

jQuery ： 

 var i; // Define a global counter var tmr; // Define timer // Create Function function create() { var max = parseInt($("input#max").val(),10), val = parseInt($("input#val").val(),10), seg = parseInt($("input#seg").val(),10), width = parseInt($("input#width").val(),10), height = parseInt($("input#height").val(),10); $(".progressContainer").empty().height(height).width(width); // Get size for each progressbar var size = max / seg; // Get width for each progressbar // -2 for left/right borders of progressbars // -1 for margin-right // = -3px each of their width to fit exact location width = (width / seg) - 3; for(i=0; i
'); // Add their size $(".progress" + i).progressbar({ max: size, value: 0 }).css({ margin: '0 1px 0 0', width: width, height: height, float:'left' }); } // Get initial value var init = val; if (init < size) { // if smaller than size // than only 1 bar gonna get filled $(".progress0").progressbar({ value: init }); } else if (init > size) { // else calgulate how many bars // gonna be effected var bars = Math.floor(init / size); for(i=0; i= max) { init = 1; next = 1; for (i=0;i size) { // else calgulate how many bars // gonna be effected var bars = Math.floor(init / size); for(i=0; iPlease use numbers only'); } } else { // Valid obj.css('box-shadow', '0px 0px 8px lightgreen'); if(obj.next().hasClass('error')) { obj.next().remove(); } } // Now get the hell out of here! } // Document Ready $(document).ready(function(){ // Validate Inputs $("input[type=text]").each(function() { $(this).keyup(function(){ validate(this); $(this).focusout(function() { $(this).css('box-shadow', '0px 0px 0px #ffffff'); }); }); }); // Action Buttons $("input[type=button]").each(function() { // alert($(this).val()); $(this).click(function(){ if ($(this).val() == "Create") { create(); } if ($(this).val() == "Start") { start(); } if ($(this).val() == "Stop") { stop(); } if ($(this).val() == "Reset") { reset(); } }); }); // Now get the hell out of here! });

jsfiddle ： http ： //jsfiddle.net/BerkerYuceer/QZMMx/

Interesting Posts

使用RadioButton单击扩展PrimeFaces中的Accordion面板

Parsley.js – 更改错误容器

jQuery：如何阻止AJAX函数转义用于POST数据的JSON字符串

在cakePHP中调用ajax时使用action url的最佳实践

CSS解析器/抽象符？ 如何将样式表转换为对象

在默认PDF查看器中禁用/隐藏iframe中的下载按钮

django jquery $ .get to $ .post

如何跟踪用户是否关闭标签并向他显示研究窗口？

两个具有相同函数名的jquery插件之间的冲突

Javascript / Jquery：根据Radio框选择显示隐藏的div