Demo of JQuery progress bar with dynamic value

HTML

<div id="progress_bar"></div> <button id=b1> + </button> <button id=b2> - </button>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#progress_bar" ).progressbar({
  value: 80,
  max:100,
  min:0
});
////////////////
/////////////////
$("#b1").click(function(){
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );
present_value=present_value + 10;
$( "#progress_bar" ).progressbar( "option", "value", present_value );
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );

$("#progress_bar")
    .children('.ui-progressbar-value')
    .html(present_value.toPrecision(3) + '%')
    .css("display", "block");

})
///////////////
////////////////
$("#b2").click(function(){
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );
present_value=present_value - 10;
$( "#progress_bar" ).progressbar( "option", "value", present_value );
var present_value = $( "#progress_bar" ).progressbar( "option", "value" );

$("#progress_bar")
    .children('.ui-progressbar-value')
    .html(present_value.toPrecision(3) + '%')
    .css("display", "block");
})
///////////////
})
</script>


plus2net.com



Post your comments , suggestion , error , requirements etc here .







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer