Creating Selectmenu Widget
Notes:
jQuery UI - Creating Selectmenu Widget:
Select menu Widget:
extends the functionality of the select tag available in HTML
Select menu widget converts the HTML select tag into a theme able and customizable control
Creating Select menu Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Selectmenu 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 select menu widget; we need to create select tag with list of options
<h3>Marital status</h3>
<select id="selectmenu">
<option value="s">Single</option>
<option value="m">Married</option>
<option value="d">Divorced</option>
<option value="w">Widow</option>
</select>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call selectmenu jQuery UI function on it
<script type="text/javascript">
$("#selectmenu").selectmenu();
</script>
Interview Questions:
