Widgets in jQuery
Rich, interactive, and consistent online front ends may be easily created with the help of jQuery UI, a potent addition to the core jQuery toolkit. For common web scripting activities, it offers a uniform API and streamlines intricate user interface (UI) behaviours. The core of jQuery UI is a set of widgets, which are solid, pre-made UI components that look and work like desktop program components. These widgets in jQuery are easy to understand and use because they are quite flexible and give JavaScript programmers a uniform API.
Getting Started with jQuery UI
Downloading and integrating jQuery UI into your web project is typical. Downloading a custom package from the jQuery UI website with a theme may contain widgets in jQuery, interactions, and effects you want to use. Just like the main widgets in jQuery library is included in your HTML text, the jQuery UI JavaScript and CSS files are referenced once they have been downloaded.
Key Widgets in jQuery
jQuery UI provides a range of widgets, each with a unique function to improve user interaction:
Button Widget: This widget turns ordinary HTML buttons, input elements, or even anchor links into interactive, aesthetically pleasing buttons with rollover states and appealing style. It improves the functionality of basic web pages and makes page elements easier to utilise.
Dialog Widget: The Dialogue widget makes it possible to create fully customisable pop-up windows that are either modal or non-modal. Frequently superimposed on the content of the main page, these dialogues can show forms, messages, or material.
Datepicker Widget:When a user interacts with a date input field, a miniature pop-up calendar is displayed as part of this popular form upgrade. This enables users to quickly choose a date from a visual calendar instead than entering it in many formats.
Accordion Widget: Content panels can be folded using the accordion widget. It displays a list of parts or links that grow and contract when clicked, making it ideal for arranging large blocks of information or navigation.
Slider Widget: This new form element for range selection is akin to an HTML5 range input but has improved functionality and wider browser compatibility. It can be used using arrow keys or by dragging a handle.
Code Example:
The fundamental setup and initialisation of four essential widgets in jQuery are shown in this one short code example.
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Mini Demo</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
</head>
<body style="font-family:Arial; padding:20px;">
<h1>jQuery UI Widgets Example</h1>
<button id="openDialog">Open Dialog</button>
<div id="dialog" title="Welcome!" style="display:none;">
<p>Hello from jQuery UI Dialog!</p>
</div>
<p><input id="datepicker" placeholder="Pick a date"></p>
<div id="accordion" style="width:250px;">
<h3>One</h3><div><p>Content 1</p></div>
<h3>Two</h3><div><p>Content 2</p></div>
</div>
<p>Value: <span id="slider-value">50</span></p>
<div id="slider" style="width:200px;"></div>
<script>
$(function() {
$("#openDialog").button().click(() => $("#dialog").dialog("open"));
$("#dialog").dialog({ autoOpen: false, modal: true, buttons: { OK: function() { $(this).dialog("close"); } } });
$("#datepicker").datepicker();
$("#accordion").accordion({ collapsible: true });
$("#slider").slider({
value: 50, min: 0, max: 100,
slide: (e, ui) => $("#slider-value").text(ui.value)
});
});
</script>
</body>
</html>Output:
jQuery UI Widgets Example
Pick a date
One
Two
Content 2
Value: 50
Explanation of the Code
The fundamental components that jQuery UI will improve in this example are provided by the HTML structure. CDN links for the core jQuery library and jQuery UI library (JavaScript and CSS files) are included in the <head> section to load critical functionality and default style The $(document).ready() function loads HTML and creates the DOM before jQuery code is invoked to avoid mistakes.
Button Widget: Using $(“#myButton”).button(), $(“#myLinkButton”).button(); transforms <button> and <a> elements into jQuery UI buttons. To make these items look consistent with the selected theme, jQuery UI automatically applies style.
Dialog Widget: A dialogue widget is created from a div with the ID dialog-message. autoOpen: false prevents it from appearing as the page loads, and modal: true ensures it takes over the screen and must be rejected. When clicked, the buttons option’s “Ok” button ends the dialogue. An independent button (openDialog) is configured to initiate the dialogue through a click event.
Datepicker Widget: $(“#datepicker”-creates a date selection field from an input type=”text”> with the ID datepicker.datepicker(). To improve usability, extra options have been introduced, such as showOtherMonths, selectOtherMonths, changeMonth, and changeYear, which enable month and year navigation straight from the calendar interface.
Accordion Widget: A div that has several pairs of h3 (headers) and div (content panels) is initialised as an accordion using $(“#accordion-container”) to create an accordion widget.accordion();. heightStyle: “content” causes each panel to change height to match its content, and collapsable: true enables all sections to shut at once.
Slider Widget: $(“#slider-range” creates a range slider from a div with the ID slider-range.slider(). The range: “min” option generates a slider with a track that is filled to the minimum value and a handle that may be dragged. A span element (slider-value) is updated via the slide event callback to show the slider’s current value in real time.
Customization with ThemeRoller
With its Theme Framework and ThemeRoller tool, jQuery UI has some of the most attractive features. Developers can rapidly and simply design highly customised, professional-looking user interface elements using ThemeRoller, an interactive theme engine that runs on the web. To ensure that all UI elements have the same look, you may choose from a predefined theme or alter different elements like colours, fonts, borders, and even the roundness of widget corners. In order to achieve lightweight design, this powerful theming system heavily utilises CSS3 capabilities.
The work and complexity required to create complex web interfaces can be greatly decreased by developers by utilising widgets in jQuery. You can concentrate on application logic instead of complex cross-browser UI implementation details because to their consistent API, choices, and theming, which make them an indispensable tool for quick web development.
Conclusion
In summary, jQuery UI is a robust and intuitive addition to the main widgets in jQuery library that gives programmers access to a standardised and adaptable collection of user interface elements that greatly improve online applications’ usability and interactivity. It makes it easier to create complicated interface behaviours while maintaining cross-browser compatibility with its pre-built widgets in jQuery, which include buttons, dialogues, datepickers, accordions, and sliders.
Developers may now easily style these widgets in jQuery to meet the design specifications of any project the introduction of tools like ThemeRoller. jQuery UI is a crucial toolkit for quick, maintainable, and expert web development since it eliminates the need to write custom UI logic and deal with browser incompatibilities by hand, freeing developers to concentrate more on application functionality.