Creating Progress bar Widget
Notes:
jQuery UI - Progress bar Widget :
Progress bar Widget: represents the current status of a process / task in percentage
Creating Progress bar Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Progress bar Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
3. Code the structure of the widget (i.e. HTML or markup):
To create a progressbar widget; we need to create a an empty div element
<div id="progressbar"> </div>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call progressbar jQuery UI function on it, and pass the value in percentage.
<script type="text/javascript">
$("#progressbar").progressbar({value:50});
</script>
Example Code:
<div id="container">
<div id="htmlHeading">HTML</div>
<div id="htmlProgressbar"></div>
<div id="cssHeading">CSS</div>
<div id="cssProgressbar"></div>
</div>
<script type="text/javascript">
$("#container").css({"backgroundColor":"lightblue","padding":"5%"});
$("#htmlProgressbar").progressbar({value:90});
$("#cssProgressbar").progressbar({value:70});
</script>
Interview Questions:
