Jquery bar value manipulation
How can I check the value of a progress bar in jQuery? Let's say that I click a button and it goes up to 50%, and if I click the 25% button, I would like to get an alert that says "You can't get past 50%."
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="../test/pics/bbti.png" />
<title>Bing Bang Theory</title>
<link rel="stylesheet" type="text/css" href="../test/css/style2.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<h1>bbt</h1>
<!--progress bar start-->
<div id="progressbar"></div>
<br />
<button onclick="set25()">Set to 25%</button>
<button onclick="set50()">Set to 50%</button>
<button onclick="set75()">Set to 75%</button>
<button onclick="set100()">Set to 100%</button>
<script>
$(function() {
$("#progressbar").progressbar({
value: 0
});
});
// Set progressbar to 25%
function set25() {
//somewhere here is the code about if statement.
$("#progressbar").progressbar("option", "value", 25);
}
// Set progressbar to 50%
function set50() {
$("#progressbar").progressbar("option", "value", 50);
}
// Set progressbar to 75%
function set75() {
$("#progressbar").progressbar("option", "value", 75);
}
// Set progressbar to 100%
function set100() {
$("#progressbar").progressbar("option", "value", 100);
}
</script>
<!--progress bar stops-->
</body>
</html>
Can you help me solve this problem? Thank.
+3
source to share
2 answers
One single function can be used to perform operations. And you can avoid inline JS, which can be a maintenance nightmare.
$(function () {
$("#progressbar").progressbar({
value: 0
});
$('button[data-value]').on('click',function() {
var pbar = $('#progressbar'),
value = $(this).data('value'),
curValue = pbar.progressbar('value');
if( value < curValue ) {
alert("You can't go under " + curValue +"%!");
} else {
pbar.progressbar( 'value', value );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="progressbar"></div>
<br />
<button data-value="25">Set to 25%</button>
<button data-value="50">Set to 50%</button>
<button data-value="75">Set to 75%</button>
<button data-value="100">Set to 100%</button>
0
source to share
Instead of having multiple functions like set25, set50 ... has one function and sends values to it. Something like that
function set(progressBarValue){}
And call it like this
<button onclick="set(25)">Set to 25%</button>
<button onclick="set(50)">Set to 50%</button>
<button onclick="set(75)">Set to 75%</button>
<button onclick="set(100)">Set to 100%</button>
To get the current value of the progress bar you can do this
$("#progressbar").progressbar("option", "value");
In general, it should look something like this.
var myprogressbar;
$(document).ready(function () {
myprogressbar = $("#progressbar").progressbar({
value: 0
});
});
function set(val) {
var currVal = myprogressbar.progressbar("option", "value");
if(currVal > val){
alert('Cannot go lower');
return;
}
myprogressbar.progressbar("option", "value", val);
}
Here is a demo http://jsfiddle.net/dhirajbodicherla/NAs3V/381/
+1
source to share