Horje
jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you’re building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is a perfect choice. This JavaScript library extends the capabilities of jQuery by offering a carefully prepared collection of pre-built UI widgets and effects. For web developers seeking to elevate user interfaces (UI) beyond static elements, jQuery UI emerges as a powerful.

jQuery UI

Why jQuery UI ?

jQuery UI contains a set of plugins that provide new features to the core jQuery library. It is categorized into four groups i.e. interactions, widgets, effects, utilities. It is an open-source library that contains different animation effects and widgets that help in the development of highly interactive user-friendly web applications. This library needs very less maintenance. It can be used with almost all browsers.

jQuery UI

Download and Install jQuery UI

  • Go to the official documentation ( https://jqueryui.com/ ) of the jQueryUI and click on the Custom Download button to download a customized version of the library. After downloading the zip file, unzip the files and save them in a folder.
  • File Structure: The file structure will look like the following. File Structure
  • Create an HTML file like index.html and add file links inside head section of code.
    <link rel=”stylesheet” href=”jqueryui/jquery-ui.min.css”> <script src=”jqueryui/external/jquery/jquery.js”></script> <script src=”jqueryui/jquery-ui.min.js”></script>

Using CDN Link

Without downloading the jQuery UI files, you can include CDN links inside the head section to run your code.

<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel =”stylesheet”> <script src=”https://code.jquery.com/jquery-1.10.2.js”></script> <script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example: In this example, we will display the date picker on the page using jQuery UI.

HTML 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
        rel="stylesheet">
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
</head>
 
<body>
    <h1>Welcome to GeeksforGeeks</h1>
 
    <p>Date of Birth:
        <input type="text" id="dob">
    </p>
     
    <script>
        $("#dob").datepicker();
    </script>
</body>
 
</html>

Output:

datepicker

jQuery UI Complete References

Interactions

Widgets

Theming Your jQuery UI Experience

Personalize the look and feel of your widgets using themes! Here’s how:

  1. Download a Theme: The jQuery UI website offers a plethora of pre-built themes you can incorporate.
  2. Include the Theme CSS: Reference the downloaded theme’s CSS file within your HTML’s <head> section.
  3. Apply the Theme Class: Add the theme’s class to the root element of your webpage. This applies the theme styles to all your jQuery UI widgets.

    		 


    Reffered: https://www.geeksforgeeks.org

    JQuery

    Related
    jQuery Examples jQuery Examples
    Create Searchable Dropdown Select With jQuery Create Searchable Dropdown Select With jQuery
    Age Range Validator using JQuery Age Range Validator using JQuery
    How to use JSON in Ajax jQuery ? How to use JSON in Ajax jQuery ?
    How to load a JSON object from a file with ajax? How to load a JSON object from a file with ajax?

    Type:
    		 Geek
    Category:
    		 Coding
    Sub Category:
    		 Tutorial
    Uploaded by:
    		 Admin
    Views:
    		 19



     

    Horje