Creating Control group Widget
Notes:
jquery ui - Creating Controlgroup Widget:
Controlgroup Widget:
is used to group multiple jQuery UI widgets into a single set
Creating Control group Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Control group 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 Controlgroup widget; we need to create a div element with set of input elements
Note: add class ui-controlgroup-item to all elements in the control group, because only few elements are considered as the control group items. To consider an element as an item of control group we must add ui-controlgroup-item class.
<form name="frmStudDetails" id="frmStudDetails" action="#" method="get">
<div id="controlgroup">
<label for="txtStudName" class="ui-controlgroup-item">Student Name:</label>
<input type="text" name="txtStudName" id="txtStudName" value="" class="ui-controlgroup-item"/>
<label for="slctQual" class="ui-controlgroup-item">Qualification:</label>
<select name="slctQual" id="slctQual" class="ui-controlgroup-item">
<option value="u">UG</option>
<option value="p">PG</option>
</select>
<label for="rdbGender" class="ui-controlgroup-item">Gender:</label>
<label for="rdbMale" class="ui-controlgroup-item">Male</label>
<input type="radio" name="rdbGender" id="rdbMale" value="m" checked class="ui-controlgroup-item"/>
<label for="rdbFemale" class="ui-controlgroup-item">Female</label>
<input type="radio" name="rdbGender" id="rdbFemale" value="f" class="ui-controlgroup-item"/>
<label for="chkHobbies" class="ui-controlgroup-item">Hobbies:</label>
<label for="chkMusic" class="ui-controlgroup-item">Music</label>
<input type="checkbox" name="chkHobbies" id="chkMusic" value="m" class="ui-controlgroup-item"/>
<label for="chkDrawing" class="ui-controlgroup-item">Drawing</label>
<input type="checkbox" name="chkHobbies" id="chkDrawing" value="d" class="ui-controlgroup-item"/>
<label for="dateOfJoining" class="ui-controlgroup-item">Date Of Joining:</label>
<input type="text" name="dateOfJoining" id=" dateOfJoining" value="" class="ui-controlgroup-item"/>
<input type="submit" value="SUBMIT" class="ui-controlgroup-item"/>
</div>
</form>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call controlgroup jQuery UI function on it
<script type="text/javascript">
$("# dateOfJoining").datepicker();
$("#controlgroup").controlgroup( {direction:"vertical"} );
</script>
Interview Questions:
