jQuery UI Basics

jQueryUI is a very popular frontend framework. It is a very sleek, intuitive and powerful mobile first front-end framework for faster and easier development. jQueryUI uses HTML, CSS and JavaScript. Using this framework we can create complex web applications. We know jQuery is a powerful JavaScript library. In jQueryUI, UI stands for User Interface. So jQueryUI is a set of plug-ins that add new functionalities to the jQuery core library. In jQueryUI, the set of plug-ins include interface interactions, effects, animations, widgets and themes built on top of the jQuery JavaScript Library.

History

jQueryUI was released in September 2007 by John Resig on jquery.com. The latest release, 1.10.4, requires jQuery 1.6 or later version. jQueryUI is free, open-source software, licensed under the MIT License.

Before beginning we should download jQueryUI, the direct file is available here.

or we can use the direct CDN link.

And use this file in your code:

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Now we can start with jQueryUI.

Let's talk about the draggable method. Draggable is used to make HTML elements draggable.

Syntax: It can be used in the following two forms:

 

• $(selector, context).draggable (options)
• $(selector, context).draggable ("action", [params])

Let's talk about the first one. This method declares that an element can be moved to the HTML page. The options parameter is an object that specifies the behavior of the elements. Here we can provide one or more options at a time using a JavaScript object. If there is more than one option to be provided then we will separate them using a comma, see the following syntax:

$(selector, context).draggable({option1: value1, option2: value2..... });

Options may be: addClasses, appendTo, axis, cancel, connectToSortable, containment, cursor, cursorAt, delay, disabled, distance, grid, handle, helper, iframeFix, opacity, refreshPositions, revery, revertDuration, scope, scroll, scrollSensitivity, scrollSpeed, anap, snapmode, snapTolerance, zIndex and so on.

Let's try as in the following:



The output for this code will be:



Here this <p> HTML element is draggable, you can drag it anywhere in this page as in the following:


We can set the distance, delay and disable options for the draggable() method. The syntax for a selector is given below. You can use this in many methods. Do practice.



Now let's do another example. This example shows how to get a value of any option at any time during execution. In this example we will read the value of the cursor and cursorAt options. In a similar way we can get the value of any other available option.



The output for this will be:



Then after dragging:



In a similar way we can get other values too. Do more practice.

These were the examples of the first form.

Now let's learn more about the second form.

$(selector, context).draggable ("action", [params])

Basically, the actions here are nothing but jQuery methods that we can use in the form of a string.

The actions may be: destroy(), disable(), enable(), option(optionName), option(), option(optionName, value), option(options), widget() and so on.

Let's do some work on draggable with the second form. Here we will make this method disabled and enabled. See the code given below.



The output for this code will be:



Here we can drag only the second option. This is enabled.

This was all about jQueryUI basics. Do more practice to learn More.