jQuery UI Widgets

Contact Us or call 1-877-932-8228
jQuery UI Widgets

Widgets

jQuery UI offers a set of powerful widgets that enable complex functionality with minimal coding, and allow precise customization with more work. All of the widgets are amenable to jQuery UI's theming, displaying according to one of the stock themes or your custom theme, as you decide.

jQuery UI Widgets
Widget Explanation Code
Accordion Collapsible content panels for displaying information in small space $('#acc').accordion()
Autocomplete Select from a pre-populated list of values as user types in field $('#tags').autocomplete({ source: aTags })
Button Enhance standard form elements as themeable buttons with hover and active styles $('a').button()
Datepicker Select a date from a popup calendar $('#dp').datepicker()
Dialog Open content in an interactive overlay $('#dlg').dialog()
Menu Themeable menu with mouse and keyboard interactions $('#mnu').menu()
Progressbar Display status of a determinate or indeterminate process $('#pgbar').progressbar({ value: 41 })
Slider Drag handle to select numeric value $('#slide').slider()
Spinner Enhance a text input for entering numeric values, with up/down buttons and arrow-key handling $('#sp').spinner()
Tabs Tabbed content area with multiple panels, each associated with a header in a list $('#tbs').tabs()
Tooltip Customizable, themeable tooltips to replace native tooltips $(document).tooltip()

From accordion panels for displaying large volumes of content more efficiently to themeable buttons to sliders and spinners to tabs and tooltips, jQuery UI offers a wide range of useful widgets. Check out the jQuery UI website for full details; we will review a few of the more common (and more useful) widgets via an example.

Open the file jqy-mobile-ui/Demos/jquery-ui-widgets.html in a browser and in a code editor to view the source. This demo shows an accordion on the left: users can click a title to toggle desired content open, closing the other panes. The middle of the demo shows an example of autocomplete: try typing a number ("one", "two", "three", "four", or "five") to watch the suggestions change to match your input. The right of the demo displays a datepicker, allowing users to click from a popup month calendar to choose a date.

jQuery UI Widgets

Code Sample:

jqy-mobile-ui/Demos/jquery-ui-widgets.html
---- C O D E   O M I T T E D ----

		$(document).ready(function() {
			$('#acc').accordion();
			 var mylist = [
					"one",
					"two",
					"three",
					"four",
					"five"
				];
				$('#search').autocomplete({
					source: mylist
				});
				$('#dp').datepicker();
		});
	</script>
	<style>
		#acc {
			width:32%;
			margin-right:1%;
			float:left;
		}
		#autocompletecontainer {
			width:32%;
			margin-right:1%;
			float:left;
		}
		#datepickercontainer {
			width:32%;
			float:left;
		}
	</style>
</head>
<body>
<div id="acc">
	<h3>Item 1</h3>
	<div>
		<p>content 1 content 1 content 1</p>
	</div>
	<h3>Item 2</h3>
	<div>
		<p>content 2 content 2 content 2</p>
	</div>
	<h3>Item 3</h3>
	<div>
		<p>content 3 content 3 content 3</p>
	</div>
</div>
<div id="autocompletecontainer">
	<label for="search">Start typing (try "o" or "t"):</label> <input type="text" name="search" id="search">
</div>
<div id="datepickercontainer">
	<label for="dp">Select date:</label> <input type="text" name="dp" id="dp">
</div>
</body>
</html>

jQuery UI accordions are marked up as a container div, with the id of the container element referenced in the call to accordion() - in our case, $('#acc').accordion(). h3's form the clickable titles. The div following the h3 contain the content that is toggled open/closed; this div can contain any valid HTML.

At its most basic, jQuery UI's autocomplete connects a JavaScript array to an input element and offers suggestion as the user types; in our case, the array myList (["one", "two", "three", "four", "five"]) serves as the list of suggestions connected to the field with id #acc.

We often use autocomplete in much more complex ways, drawing the list of suggestions from a same-site or external JSON feed via Ajax, hand-tooling the format or display of data, performing actions when the user selects an item, etc. See the jQuery UI website for a good list of examples and API details.

jQuery UI's datepicker widget is a convenient tool for adding a popup calendar. In our example, $('#dp').datepicker() adds the functionality to the input of id #dp. The widget offers a range of customizations; see the jQuery UI website for details on how to format and control the display of dates, handle events, localize the calendar, and other options.

More on Autocomplete

Autocomplete is such a useful tool that it deserves a bit more discussion. The autocomplete widget can derive the set of suggestions from a simple JavaScript array, a JavaScript array of hashes (objects), or an external JSON datasource. Additionally, we have complete control over the interaction, sending the user to a new page (for example) when a suggested item is selected from the drop-down list. Consider the following example:

var items = [
	{
		label: "jquery",
		url: "jquery.php"
	},
	{
		label: "jquery-ui",
		url: "jquery-ui.php"
	},
	{
		label: "sizzlejs",
		url: "sizzle.php"
	}
];
$('#search').autocomplete({
	source: items,
	select: function( event, ui ) {
		window.location.href = ui.item.url;
	}
});

We create a three-element array (items) of hashes and use it as the source for our autocomplete. Autocomplete's select event allows us to specify what happens when the user selects one of the suggested values; in this case, we redirect them to a new page, drawing the value from the url field of the chosen item.

Next