<div id="progress_bar1"></div>
<button id=b2> - </button> <button id=b1> + </button>
<br><br>
<div id="progress_bar2"></div>
<script>
$(document).ready(function() {
//////////////////////////
$( "#progress_bar1" ).progressbar({
value: 60,
max:200,
min:0
});
////////////////
$( "#progress_bar2" ).progressbar({
value: 30,
max:100,
min:0
});
/////////////////
$("#b1").click(function(){
var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );
present_value1=present_value1 + 10;
$( "#progress_bar1" ).progressbar( "option", "value", present_value1 );
var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );
var present_value2=present_value1/2;
$( "#progress_bar2" ).progressbar( "option", "value", present_value2 );
var present_value2 = $( "#progress_bar2" ).progressbar( "option", "value" );
$("#progress_bar1")
.children('.ui-progressbar-value')
.html(present_value1.toPrecision(3) + '%')
.css("display", "block");
$("#progress_bar2")
.children('.ui-progressbar-value')
.html(present_value2.toPrecision(3) + '%')
.css("display", "block");
})
///////////////
////////////////
$("#b2").click(function(){
var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );
present_value1=present_value1 - 10;
$( "#progress_bar1" ).progressbar( "option", "value", present_value1 );
var present_value1 = $( "#progress_bar1" ).progressbar( "option", "value" );
var present_value2=present_value1/2;
$( "#progress_bar2" ).progressbar( "option", "value", present_value2 );
var present_value2 = $( "#progress_bar2" ).progressbar( "option", "value" );
$("#progress_bar1")
.children('.ui-progressbar-value')
.html(present_value1.toPrecision(3) + '%')
.css("display", "block");
$("#progress_bar2")
.children('.ui-progressbar-value')
.html(present_value2.toPrecision(3) + '%')
.css("display", "block");
})
///////////////
})
</script
Most Popular JQuery Scripts | |
1 | Two dependant list boxes |
2 | Calendar with Date Selection |
3 | Data change by Slider |
4 | Show & Hide element |