JQueryUI - Day1

What is jQuery UI?



jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. UI stands for user-interface and the jQuery UI library provides a lot of user interface enhancements for your web site. Whether we are building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. jQuery uses HTML, CSS and JavaScript. It is sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

jQuery UI component and functionality is divided into four major categories.

Interactions:

JQuery UI provides a set of mouse-based interactions as building blocks for rich interfaces and complex widgets. jQuery UI provide the following interactions:  Draggable , Droppable, Resizable, Selectable, Sortable.

Widgets:

Widgets are feature-rich, stateful plugins that have a full life-cycle, along with methods and events. jQuery UI supports various types of widgets, some useful widgets are: Accordion, Autocomplete, Progressbar, Slider, Spinner, etc.

Effects:

JQuery UI adds quite a bit of functionality on top of jQuery's built-in effects. jQuery UI adds support for animating colors and class transitions, as well as providing several additional easings. jQuery UI provides rich effects that are Color Animation, Toggle Class, Drop, Fade, Flod, Highlight effects, etc.

Utilities:

These are a set of modular tools the JqueryUI library uses internally. jQuery UI provides position utilities to set an element's position relative to another element's position (alignment).

Features of jQuery UI:

Now we consider some reasons why we should use jQuery UI .

Require Single Library:

If you are already using the jQuery library then there is no need to bring another library. We can take advantage of all the widgets and interaction tools that jQuery UI supports without having to maintain and learn another library.

Efficient Documentation:

In jQuery each function and component have a full explanation and an example plus source code. jQuery library is always up to date and provide excellent documentation.

Open Source and Free to Use:

jQuery UI library are open source and free to use. A user can make changes in sources code according to his/her requirements.

Support Theming Mechanism:

jQuery supports theming mechanism which provide a great look to any website. jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs.

jQuery UI Environment Setup:

Now we discuss how to setup an environment for the jQuery UI. We have two ways to setup the environment,

1. Downloading jQuery UI libraries from CDNs.
2. Download jQuery UI libraries from official website.

Now we consider both methods to setup an environment.

Using libraries from CDNs:

A CDN (content delivery network) is a setup of servers that provide files and data to a user. We can use a CDN link in our web page. This method have some advantages that responsibilities are moved from our server to CDN server. If the user to our webpage has already downloaded a copy of JQuery UI from the same CDN, it won't have to be re-downloaded.

We can use any CDN as per our choice.

Google:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>

Microsoft:

<linkrel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js">
</script>

Download jQuery UI libraries from official website:

We can download jQuery UI library from official website of jQuery. Follow the below steps to download the jQuery UI libraries.

Step 1: Go to official website of jQuery. You can use this link.



Here you can see three options ( “Custom Download”, “Stable” ,”Legacy”). Stable download contain latest version and legacy contain previous major release of JQueryUI library. You can click on any button and download the libraries but I suggest you to download jQuery UI libraries from “Custom Download” option.

Step 2: Choose which component you need

The download builder shows the list of all components, you can select the component that you required and uncheck all further components.



Step 3: Select the theme



After selection of component now select the theme that you required and after selecting the theme now click on “download” button.

After successful download of jQuery UI libraries now extract the folder and put this folder into your project. Now take an example to test the jQuery UI libraries that we downloaded.

So put the following content in head section.

<linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
<scriptsrc="jquery-ui-1.11.4.custom/external/jquery/jquery.js">
    </script>
    <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui.js">
        </script>
     <linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
  <linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />

Copy the following code in body,

<divid="Div1" style="width:600px;height:300px;background-color:#57A58A;font-size:large">
    <h1>Test jQuery UI Libraries</h1>
    <inputtype="text" id="text1" />
    </div>

In head section add this code:

<script>
    $(document).ready(function()
    {
        $("#text1").datepicker();
    })
</script>

Complete html code

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">
    <headrunat="server">
        <title>jQuery UI</title>
        <linkhref="jquery-ui-1.11.4.custom/jquery-ui.css" rel="stylesheet" />
        <scriptsrc="jquery-ui-1.11.4.custom/external/jquery/jquery.js">
            </script>
            <scriptsrc="jquery-ui-1.11.4.custom/jquery-ui.js">
                </script>
                <linkhref="jquery-ui-1.11.4.custom/jquery-ui.structure.css" rel="stylesheet" />
                <linkhref="jquery-ui-1.11.4.custom/jquery-ui.theme.css" rel="stylesheet" />
                <script>
                    $(document).ready(function()
                    {
                        $("#text1").datepicker();
                    })
             </script>
             </head>

        <body>
           <formid="form1" runat="server">
           <divid="Div1" style="width:600px;height:300px;background-color:#57A58A;font-size:large">
           <h1>Test jQuery UI Libraries</h1>
           <inputtype="text" id="text1" />
            </div>
            </form>
         </body>
   </html>

When we open above page in browser and click on text box then we will find the following output.



Above output show that jQuery UI library has been successfully implemented.

This article describe basic introduction to jQueryUI. In the next article we will start learning jQueryUI.

Thanks to read the article.