jQuery UI Control Group Tutorial | Control Group Widget in jQuery UI - jQuery UI Tutorial 19

Notes for You:: jQuery UI Control Group Widget.
- is used to group multiple jQuery UI widgets into a single unit.

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﹥


Note:
- replace ﹤ less-than symbol.
- replace ﹥ greater-than symbol.

=========================================

Follow the link for next video:
jQueryUI Tutorial 20 - jQueryUI Effect Method
https://youtu.be/ttZYRxAK3Tc

Follow the link for previous video:
jQuery UI Tutorial 18 - jQuery UI Button Tutorial
https://youtu.be/iAQrPfPhbV8

=========================================

#chidrestechtutorials #jqueryui #jqueryuitutorial