Thursday, February 16, 2012

jQuery UI: progressbar

jQuery UI: progressbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile-Web-App: jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$("document").ready(function(){
$("#myProgressBar").progressbar(
{
value: 50
});

$("#ProgressInc").click(function()
{
var newvalue = $('#myProgressBar').progressbar("value") + 1;
$("#myProgressBar" ).progressbar(
{ value: newvalue }
);
});

$("#ProgressDec").click(function()
{
var newvalue = $('#myProgressBar').progressbar("value") - 1;
$("#myProgressBar" ).progressbar(
{ value: newvalue }
);
});
});

</script>

</head>
<body>

<div id="myProgressBar"></div>
<Label id="ProgressValue"></Label>
<button id="ProgressInc">Progress++</button>
<button id="ProgressDec">Progress--</button>

</body>
</html>

No comments:

Post a Comment