Scribd
Upload
10 views

UI widgets

Uploaded by

gauharjahansd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

UI widgets

Uploaded by

gauharjahansd
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

In jjQuery, UI widgets are interactive, pre-built user interface components provided by the jQuery UI library.

jQuery UI extends the


core jQuery library with additional features for building rich, dynamic interfaces. These widgets are ready-made, customizable
components that can be easily integrated into web pages, and they help speed up development and improve the user experience.

Here’s an overview of the most common jQuery UI widgets and their usage:

1. Accordion Widget
The Accordion widget is used to display collapsible content panels in a stacked layout. Only one panel is expanded at a time.

<script>

$(function() {

$("#accordion").accordion();

});

</script>

</script>

2. Datepicker Widget
The Datepicker widget is used to create an interactive calendar that allows users to select a date from a popup calendar.

<input type="text" id="datepicker">

<script>

$(function() {

$("#datepicker").datepicker();

});

</script>

3. Spinner Widget
The Spinner widget provides a numeric input field with buttons to increase or decrease the value. It is useful for selecting numbers
within a range.

Example:
<input id="spinner" name="value" value="0">
<script>

$(function() {

$("#spinner").spinner();

});

</script>

4. Tabs Widget
The Tabs widget allows you to create tabbed navigation where each tab displays different content when selected. It is commonly
used to organize content on a page.

Example:
<div id="tabs">

<ul>

<li><a href="#tabs-1">Tab 1</a></li>

<li><a href="#tabs-2">Tab 2</a></li>

<li><a href="#tabs-3">Tab 3</a></li>

</ul>

<div id="tabs-1">

<p>Content for Tab 1.</p>

</div>

<div id="tabs-2">

<p>Content for Tab 2.</p>

</div>

<div id="tabs-3">

<p>Content for Tab 3.</p>

</div>

</div>
<script>

$(function() {

$("#tabs").tabs();

});

</script>

5. Progressbar Widget
The Progressbar widget allows you to create a visual progress indicator that shows how far a process has completed. It is often
used in file uploads or long-running processes.

Example:
<div id="progressbar"></div>

<script>

$(function() {

$("#progressbar").progressbar({

value: 20 // Indicates that the progress is at 20%

});

});

</script>

6. Slider Widget
The Slider widget creates an interactive range slider that allows the user to select a value within a specific range. You can use it for
things like adjusting volume, price range, etc.

Example:
<div id="slider"></div>

<script>

$(function() {
$("#slider").slider({

range: "min", // Set to 'min' for a single handle slider

value: 37,

min: 0,

max: 100,

slide: function(event, ui) {

$("#amount").val(ui.value);

});

});

</script>

7. Tooltip Widget
The Tooltip widget is used to display additional information when a user hovers over an element. It can show small messages or
descriptions.

Example:
<button title="Click me for a surprise!">Hover over me!</button>

<script>

$(function() {

$(document).tooltip(); // Automatically enables tooltips for elements with a title attribute

});

</script>

8. Selectable Widget
The Selectable widget makes a set of elements selectable by clicking or dragging, and it is often used in list boxes or grids.

<ul id="selectable">

<li>Item 1</li>
<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

<script>

$(function() {

$("#selectable").selectable();

});

</script>

How to Use jQuery UI Widgets


To use jQuery UI widgets, you need to include both the jQuery library and the jQuery UI library (which includes CSS for styling).

<!-- jQuery -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- jQuery UI CSS -->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- jQuery UI -->

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

You might also like