Knowledge Transfer.........: jQuery UI Widget : Progressbar

Wednesday, May 25, 2011

jQuery UI Widget : Progressbar

This widget is used to display the progress of a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default.
This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete.
The following code line is used to place a progress bar inside a element like div :
$("#progressbar").progressbar({ value: 37 }); For options, events ,method and theming click here For options, events ,method and theming click here
EXAMPLE :
progressbar.html

<!DOCTYPE html>

<html>

<head>

<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/jquery/1.4

/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8

/jquery-ui.min.js"></script>



<script>

$(document).ready(function() {

$("#progressbar").progressbar({ value: 37 });

});

</script>

</head>

<body style="font-size:62.5%;">



<div id="progressbar"></div>



</body>

</html>

Output :

Download Source Code

Knowledge Transfer.........

Wednesday, May 25, 2011

jQuery UI Widget : Progressbar

No comments:

Post a Comment