<!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>
Thursday, February 16, 2012
jQuery UI: progressbar
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment