Introduction to JQuery UI Widgets with Example

JQuery UI Widgets Example

We understood that JQuery UI has a collection of user interface widgets, effects, interactions, and themes, especially meant to enhance of our website. So, In this article, we will see the introduction to jquery UI widgets with example.

What are jQuery UI widgets?

JQuery UI widgets are user interface controls. It helps us to create theme-able and appealing widgets with fully functional keyboard and mouse interactions.

Widget names

  • Accordion widget: Collapsible and expandable sections
  • Tabs widget: Tab-based section similar to an accordion
  • Date picker widget: A popup or an inline calendar
  • Progress bar widget: The current status of a process in percentage
  • Slider widget: Slider with handles to get a range of numeric values
  • Spinner widget: Spinner to get numeric values
  • Autocomplete widget: A textbox with suggestions dropdown list
  • Select menu widget: Selection list
  • Menu widget: Navigation menu
  • Button widget: Buttons
  • Checkbox radio widget : Checkbox and radio buttons
  • Control group widget: Group of related input fields
  • Dialog widget: Overlay dialog box
  • Tooltip widget: Mouse over the tooltip

Example code for date picker

<html>
<head>
<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>

</head>
<body>
<div id="datepicker"></div>
<script type="text/javascript">
$("#datepicker").datepicker();

</script>
</body>
</html>

Output:

jquery ui widgets example

  1. In the above code, we have linked the jquery UI using <script> tag.
  2. Then we create a <div> in the body with idname “datepicker“.
  3. In <script>, we select the ID and call the datepicker widget method using the dot operator.
  4. See the above output, datepicker box is displayed.
  5. Similarly, you can create any widgets by calling the method name.

Leave a Reply