Scribd
Upload
130 views

What Is JQuery

JqueryUI is a Javascript library built on jQuery that adds user interface interactions and widgets. It includes plugins for draggable, droppable, resizable, and selectable elements as well as effects, animation, and theming capabilities. JqueryUI provides tools to easily make elements interactive through options like draggable, which allows specifying element dragging behavior, and droppable, which defines drop targets. It offers a consistent API and supports cross-browser compatibility to simplify user interface development.

Uploaded by

arianne agundiz
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
130 views

What Is JQuery

JqueryUI is a Javascript library built on jQuery that adds user interface interactions and widgets. It includes plugins for draggable, droppable, resizable, and selectable elements as well as effects, animation, and theming capabilities. JqueryUI provides tools to easily make elements interactive through options like draggable, which allows specifying element dragging behavior, and droppable, which defines drop targets. It offers a consistent API and supports cross-browser compatibility to simplify user interface development.

Uploaded by

arianne agundiz
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 23

What is JQuery

JqueryUI
JqueryUI is a powerful Javascript
library built on top of jQuery
JavaScript library. UI stands for
User Interface. It is a set of plugins for jQuery that add new
functionalities to the jQuery core
library.

JqueryUI
The set of plug-ins in JqueryUI includes
interface interactions, effects,
animations, widgets, and themes built on
top of jQuery JavaScript Library.
It was released in September 2007,
announced in a blog post by John Resig on
jquery.com. The latest release, 1.10.4,
requires jQuery 1.6 or later version.

Features

Features
Interactions- These are the interactive plugins
like drag, drop, resize and more which give the
user the ability to interact with DOM elements.
Widgets- Using widgets which are jQuery plugins,
you can create user interface elements like
accordian,datepicker etc.
Effects- These are built on the internal jQuery
effects. They contain a full suite of custom
animations and transitions for DOM elements.
Utilities- These are a set of modular tools the
JqueryUI library uses internally.

Benefit of Jquery UI

Cohesive and Consistent APIs.


Comprehensive Browser Support
Open Source and Free to Use
Good Documentation.
Powerful Theming Mechanism.
Stable and Maintenance Friendly.

Jquery UI Interaction
jQueryUI
providesdraggable()method to make
any DOM (DOCUMENT OBJECT
MODEL) element draggable. Once the
element is draggable, you can move
that element by clicking on it with
the mouse and dragging it anywhere
within the viewport.

Syntax
Thedraggable()method can be used
in two forms:
1. $(selector, context).draggable
(options)Method

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

$(selector, context).draggable (options)


Method
Thedraggable (options)method declares
that an HTML element can be moved in the
HTML page. Theoptionsparameter is an
object that specifies the behavior of the
elements involved.
Syntax
$(selector, context).draggable(options);

You can provide one or more options at a


time using Javascript object. If there are
more than one options to be provided then
you will separate them using a comma as
follows:
$(selector, context).draggable({option1:
value1, option2: value2..... });

Following table lists the


differentoptionsthat can
be used with this method:

Option - addClasses
If this option is set to false, it will prevent the uidraggable class from being added in the list of
selected DOM elements. By default its value is true.
Syntax
$(".selector").draggable( { addClasses: false } );
If this option is set to false, it will prevent the uidraggableclass from being added in the list of
selected DOM elements. By default its value is true.

Option - appendTo
Specifies the element in which the draggable
helper should be appended to while dragging. By
default its value is "parent".
Syntax
$(".selector").draggable( { appendTo: "body"} );
Specifies the element in which the draggable
helper should be appended to
while dragging. By default its value is "parent".

Option - axis
This option constrains dragging to either the
horizontal (x) or vertical (y) axis. Possible values:
"x", "y".
Syntax
$(".selector").draggable( { axis: "x" } );
This option constrains dragging to either the
horizontal (x) or vertical (y) axis. Possible
values: "x", "y".

Option - cancel
You can use this option to prevent dragging from
starting on specified elements. By default its value is
"input,textarea, button,select,option"
Syntax
$(".selector").draggable( { cancel: ".title" } );

You can use this option to prevent dragging from


starting on specified elements. By default its value
is "input,textarea, button,select,option".

Option - connectToSortable
You can use this option to specify a list whose
elements are interchangeable. At the end of
placement, the element is part of the list. By default
its value is "false".
Syntax
$(".selector").draggable( { connectToSortable: "#mysortable" } );
You can use this option to specify a list whose
elements are interchangeable. At the end of
placement, the element is part of the list. By default
its value is "false".

Option - containment
Constrains dragging to within the bounds of the
specified element or region. By default its value is
"false".
Syntax
$(".selector").draggable( { containment: "parent" } );

Constrains dragging to within the bounds of the


specified element or region. By default its value is
"false".

Option - cursor
Specifies the cursor CSS property when
the element moves. It represents the
shape of the mouse pointer. By default
its value is "auto". Other possible values
are:
"crosshair" (across)
"default" (an arrow)
"pointer" (hand)
"move" (two arrows cross)
"e-resize" (expand to the right)
"ne-resize" (expand up right)
"nw-resize" (expand up left)
"n-resize" (expand up)

"se-resize" (expand down right)


"sw-resize" (expand down left)
"s-resize" (expand down)
"auto" (default)
"w-resize" (expand left)
"text" (pointer to write text)
"wait" (hourglass)
"help" (help pointer)
Syntax
$(".selector").draggable( { cursor:
"crosshair" } );

Option - cursorAt
Sets the offset of the dragging helper relative to
the mouse cursor. Coordinates can be given as a
hash using a combination of one or two keys: { top,
left, right, bottom }. By default its value is "false".

Syntax
$(".selector").draggable( $
( ".selector" ).draggable({ cursorAt: { left:
5 } }); );

Option - delay
Delay, in milliseconds, after which the
first movement of the mouse is taken into
account. The displacement may begin
after that time. By default its value is
"0".
$(".selector").draggable( { delay:
300 } );

Syntax
$(".selector").draggable( { cursor: "crosshair" } );

Specifies the cursor CSS property when the element


moves. It represents the shape of the mouse pointer.
By default its value is "auto".

Option - cursorAt
Sets the offset of the dragging helper relative to
the mouse cursor. Coordinates can be given as a
hash using a combination of one or two keys: { top,
left, right, bottom }. By default its value is "false".
Syntax
$(".selector").draggable( $
( ".selector" ).draggable({ cursorAt: { left: 5 } }); );
Sets the offset of the dragging helper relative
to the mouse cursor. Coordinates can be given as
a hash using a combination of one or two keys:
{ top, left, right, bottom }. By default its value is
"false". Z

You might also like