Introduction to jQueryUI
jQueryUI is a popular JavaScript library that provides abstractions for low-level interaction and animations, advanced effects, and high-level, themeable widgets. It is built on top of the jQuery library and is widely used for creating highly interactive web applications.
Key Features and APIs of jQueryUI
jQueryUI offers dozens of APIs which can significantly enhance the user’s web experience. Below, we will explore some of these APIs with examples:
Draggable
The draggable API allows elements to be moved using the mouse. It is straightforward to use:
$(function() {
$("#draggable").draggable();
});
Droppable
The droppable API works in conjunction with draggable to create targets for draggable elements:
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
}
});
});
Drop here
Sortable
The sortable API enables sorting of a list of items:
$(function() {
$("#sortable").sortable();
});
- Item 1
- Item 2
- Item 3
Accordion
The accordion API is used to create accordion menus:
$(function() {
$("#accordion").accordion();
});
Section 1
Content 1
Section 2
Content 2
Datepicker
The datepicker API adds a calendar picker to input fields:
$(function() {
$("#datepicker").datepicker();
});
App Example Using jQueryUI
Let’s create a small web application that uses several jQueryUI APIs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQueryUI App</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function(event, ui) {
$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
}
});
$( "#sortable" ).sortable();
$( "#accordion" ).accordion();
$( "#datepicker" ).datepicker();
});
</script>
<style>
#draggable { width: 100px; height: 100px; background: red; }
#droppable { width: 150px; height: 150px; background: blue; }
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 5px; padding: 5px; height: 1.5em; }
</style>
</head>
<body>
<div id="draggable">Drag me!</div>
<div id="droppable"><p>Drop here</p></div>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</ul>
<div id="accordion">
<h3>Section 1</h3>
<div><p>Content 1</p></div>
<h3>Section 2</h3>
<div><p>Content 2</p></div>
</div>
<input type="text" id="datepicker">
</body>
</html>
This example integrates draggable, droppable, sortable, accordion, and datepicker functionalities to demonstrate the versatility of jQueryUI in a web application.
Hash: 7e5e373493125db12f09e687f6975688e2d062fcc72426ad4d73378e706d029d
