分段进度条（jQuery UI）

我试图将jQueryUIProgressBar划分为多个部分

有人知道我会怎么做吗

示例：（2-视觉设计：03）

---

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

这是我正在开发的一个原型

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; }

<!-- Options -->
<div> <!-- Maximum -->
    <label> Maximum ProgressBar Value </label>
    <input id="max" type="text" value="100" />
</div>
<div> <!-- Initial Value -->
    <label> Initial Value </label>
    <input id="val" type="text" value="43" />
</div>
<div> <!-- Width -->
    <label> ProgressBar Width </label>
    <input id="width" type="text" value="304" />
</div>
<div> <!-- Height -->
    <label> ProgressBar Height </label>
    <input id="height" type="text" value="30" />
</div>
<div> <!-- Multiply -->
    <label> Segmented ProgressBar </label>
    <input id="seg" type="text" value="4" />
</div>
<!-- Create ProgressBar by given options -->
<div>
    <input type="button" value="Create" />
</div>
<!-- ProgressBar Container -->
<div class="progressContainer"> </div>
<!-- Action Buttons -->
<div>
    <input type="button" value="Start" /> <input type="button" value="Stop" /> <input type="button" value="Reset" />
</div>

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<seg; i++) {
        // Create segmented progressbars
        $(".progressContainer").append(
            '<div class="progress' + i + '"></div>');
        // 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<bars; i++) {
            init = Math.abs(init - size);
            $(".progress" + i).progressbar({ value: size });
        }
        // fill the value left to the last bar
        $(".progress" + i).progressbar({ value: init });
    }
    // Now get the hell out of here!
}

function inc() {
    // Define required values
    var max = parseInt($("input#max").val(),10),
        seg = parseInt($("input#seg").val(),10),
        val = parseInt($("input#val").val(),10);
    // Get size for each progressbar
    var size = max / seg;
    // Get initial value
    var init = val;
    var next = val + 1;
    // If progress is at max then reset it
    if (init >= max) {
        init = 1;
        next = 1;
        for (i=0;i<seg;i++) {
            $(".progress" + i).progressbar({ value: 0 });
        }
    }
    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<bars; i++) {
            init = Math.abs(init - size);
            $(".progress" + i).progressbar({ value: size });
        }
        // fill the value left to the last bar
        // +1 here is just for making bar look fullfilled
        $(".progress" + i).progressbar({ value: init + 1});
    }
    // Next value
    $("input#val").val(next);
    // Loop
    tmr = setTimeout(inc, 1000);
    // Now get the hell out of here!
}

// Start Function
function start() {
    // Set's interval to timer and starts
    tmr = setTimeout(inc, 1000);
    // Now get the hell out of here!
}

// Stop Function
function stop() {
    // Stops the timer
    clearTimeout(tmr);
    // Now get the hell out of here!
}

// Reset Function
function reset() {
    var seg =  parseInt($("input#seg").val(),10);
    // For segmented bars
    $("input#val").val(0);
    // Get initial value
    for(i=0; i<seg; i++) {
        $(".progress" + i).progressbar({ value: 0 });
    }
    // Now get the hell out of here!
}

// Validate Function
function validate(element) {
    var obj = $(element);
    if(!/[0-9]$/.test(obj.val())) {
        // Invalid
        obj.css('box-shadow', '0px 0px 8px #FAC3C3');
        if(!obj.next().hasClass('error'))
        { obj.after('<span class="error error-keyup-1">Please use numbers only</span>'); }
    } 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!
});

HTML：

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; }

<!-- Options -->
<div> <!-- Maximum -->
    <label> Maximum ProgressBar Value </label>
    <input id="max" type="text" value="100" />
</div>
<div> <!-- Initial Value -->
    <label> Initial Value </label>
    <input id="val" type="text" value="43" />
</div>
<div> <!-- Width -->
    <label> ProgressBar Width </label>
    <input id="width" type="text" value="304" />
</div>
<div> <!-- Height -->
    <label> ProgressBar Height </label>
    <input id="height" type="text" value="30" />
</div>
<div> <!-- Multiply -->
    <label> Segmented ProgressBar </label>
    <input id="seg" type="text" value="4" />
</div>
<!-- Create ProgressBar by given options -->
<div>
    <input type="button" value="Create" />
</div>
<!-- ProgressBar Container -->
<div class="progressContainer"> </div>
<!-- Action Buttons -->
<div>
    <input type="button" value="Start" /> <input type="button" value="Stop" /> <input type="button" value="Reset" />
</div>

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<seg; i++) {
        // Create segmented progressbars
        $(".progressContainer").append(
            '<div class="progress' + i + '"></div>');
        // 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<bars; i++) {
            init = Math.abs(init - size);
            $(".progress" + i).progressbar({ value: size });
        }
        // fill the value left to the last bar
        $(".progress" + i).progressbar({ value: init });
    }
    // Now get the hell out of here!
}

function inc() {
    // Define required values
    var max = parseInt($("input#max").val(),10),
        seg = parseInt($("input#seg").val(),10),
        val = parseInt($("input#val").val(),10);
    // Get size for each progressbar
    var size = max / seg;
    // Get initial value
    var init = val;
    var next = val + 1;
    // If progress is at max then reset it
    if (init >= max) {
        init = 1;
        next = 1;
        for (i=0;i<seg;i++) {
            $(".progress" + i).progressbar({ value: 0 });
        }
    }
    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<bars; i++) {
            init = Math.abs(init - size);
            $(".progress" + i).progressbar({ value: size });
        }
        // fill the value left to the last bar
        // +1 here is just for making bar look fullfilled
        $(".progress" + i).progressbar({ value: init + 1});
    }
    // Next value
    $("input#val").val(next);
    // Loop
    tmr = setTimeout(inc, 1000);
    // Now get the hell out of here!
}

// Start Function
function start() {
    // Set's interval to timer and starts
    tmr = setTimeout(inc, 1000);
    // Now get the hell out of here!
}

// Stop Function
function stop() {
    // Stops the timer
    clearTimeout(tmr);
    // Now get the hell out of here!
}

// Reset Function
function reset() {
    var seg =  parseInt($("input#seg").val(),10);
    // For segmented bars
    $("input#val").val(0);
    // Get initial value
    for(i=0; i<seg; i++) {
        $(".progress" + i).progressbar({ value: 0 });
    }
    // Now get the hell out of here!
}

// Validate Function
function validate(element) {
    var obj = $(element);
    if(!/[0-9]$/.test(obj.val())) {
        // Invalid
        obj.css('box-shadow', '0px 0px 8px #FAC3C3');
        if(!obj.next().hasClass('error'))
        { obj.after('<span class="error error-keyup-1">Please use numbers only</span>'); }
    } 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!
});

最大进度条值
初始值
进度条宽度
进度条高度
分段进度条

jQuery：

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; }

<!-- Options -->
<div> <!-- Maximum -->
    <label> Maximum ProgressBar Value </label>
    <input id="max" type="text" value="100" />
</div>
<div> <!-- Initial Value -->
    <label> Initial Value </label>
    <input id="val" type="text" value="43" />
</div>
<div> <!-- Width -->
    <label> ProgressBar Width </label>
    <input id="width" type="text" value="304" />
</div>
<div> <!-- Height -->
    <label> ProgressBar Height </label>
    <input id="height" type="text" value="30" />
</div>
<div> <!-- Multiply -->
    <label> Segmented ProgressBar </label>
    <input id="seg" type="text" value="4" />
</div>
<!-- Create ProgressBar by given options -->
<div>
    <input type="button" value="Create" />
</div>
<!-- ProgressBar Container -->
<div class="progressContainer"> </div>
<!-- Action Buttons -->
<div>
    <input type="button" value="Start" /> <input type="button" value="Stop" /> <input type="button" value="Reset" />
</div>

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<seg; i++) {
        // Create segmented progressbars
        $(".progressContainer").append(
            '<div class="progress' + i + '"></div>');
        // 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<bars; i++) {
            init = Math.abs(init - size);
            $(".progress" + i).progressbar({ value: size });
        }
        // fill the value left to the last bar
        $(".progress" + i).progressbar({ value: init });
    }
    // Now get the hell out of here!
}

function inc() {
    // Define required values
    var max = parseInt($("input#max").val(),10),
        seg = parseInt($("input#seg").val(),10),
        val = parseInt($("input#val").val(),10);
    // Get size for each progressbar
    var size = max / seg;
    // Get initial value
    var init = val;
    var next = val + 1;
    // If progress is at max then reset it
    if (init >= max) {
        init = 1;
        next = 1;
        for (i=0;i<seg;i++) {
            $(".progress" + i).progressbar({ value: 0 });
        }
    }
    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<bars; i++) {
            init = Math.abs(init - size);
            $(".progress" + i).progressbar({ value: size });
        }
        // fill the value left to the last bar
        // +1 here is just for making bar look fullfilled
        $(".progress" + i).progressbar({ value: init + 1});
    }
    // Next value
    $("input#val").val(next);
    // Loop
    tmr = setTimeout(inc, 1000);
    // Now get the hell out of here!
}

// Start Function
function start() {
    // Set's interval to timer and starts
    tmr = setTimeout(inc, 1000);
    // Now get the hell out of here!
}

// Stop Function
function stop() {
    // Stops the timer
    clearTimeout(tmr);
    // Now get the hell out of here!
}

// Reset Function
function reset() {
    var seg =  parseInt($("input#seg").val(),10);
    // For segmented bars
    $("input#val").val(0);
    // Get initial value
    for(i=0; i<seg; i++) {
        $(".progress" + i).progressbar({ value: 0 });
    }
    // Now get the hell out of here!
}

// Validate Function
function validate(element) {
    var obj = $(element);
    if(!/[0-9]$/.test(obj.val())) {
        // Invalid
        obj.css('box-shadow', '0px 0px 8px #FAC3C3');
        if(!obj.next().hasClass('error'))
        { obj.after('<span class="error error-keyup-1">Please use numbers only</span>'); }
    } 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!
});

var i；//定义一个全局计数器
var tmr；//定义计时器
//创建函数
函数create（）{
var max=parseInt（$（“输入#max”）.val（），10），
val=parseInt（$（“input#val”）.val（），10），
seg=parseInt（$（“输入#seg”）.val（），10），
宽度=parseInt（$（“输入宽度”）.val（），10），
高度=parseInt（$（“输入高度”）.val（），10）；
$（“.progressContainer”）.empty（）.height（高度）.width（宽度）；
//获取每个进度条的大小
变量大小=最大值/分段；
//获取每个进度条的宽度
//-2用于进度条的左/右边框
//-1表示保证金权利
//=-3倍宽度，适合精确位置
宽度=（宽度/间隔）-3；
用于（i=0；i尺寸）{
//否则计算多少条
//即将生效
可变杆=数学楼层（初始/尺寸）；
对于（i=0；i=max）{
init=1；
next=1；
用于（i=0；i尺寸）{
//否则计算多少条
//即将生效
可变杆=数学楼层（初始/尺寸）；
对于（i=0；iBriliant！这是我一直在寻找的。非常感谢Berker Yüceer。谢谢！@user1619342我进一步改进了它。请查看。