The official home of the Python Programming Language: JQueryUI

‏إظهار الرسائل ذات التسميات JQueryUI. إظهار كافة الرسائل

JqueryUI Position

JqueryUI Position

In this chapter we shall see one of the utility methods of jqueryUi, the position() method. Aposition() method allows you to position an element with respect to another element or mouse event.

jQuery UI extends the .position() method from jQuery core in a way that lets you describe how you want to position an element the same way you would naturally describe it to another person. Instead of working with numbers and math, you work with meaningful words (such as left and right) and relationships.

Syntax

Following is the syntax of the position() method:

.position( options )

Where options is of type Object and provides the information that specifies how the elements of the wrapped set are to be positioned. Following table lists the different options that can be used with this method:

Option

Description

This option specifies the location of the wrapped elements (the ones being re-positioned) to align with the target element or location. By default its value is center.

This option is of type String and specifies the location of the target element against which to align the re-positioned elements. Takes the same values as the my option. By default its value is center.

This is of type Selector or Element or jQuery or Event. It identifies the target element against which the wrapped elements are to be re-positioned, or an Event instance containing mouse coordinates to use as the target location. By default its value is null.

collision

This option is of type String and specifies the rules to be applied when the positioned element extends beyond the window in any direction. By default its value is flip.

using

This option is a function that replaces the internal function that changes the element position. Called for each wrapped element with a single argument that consists of an object hash with the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.

within

This option is a Selector or Element or jQuery element, and allows you to specify which element to use as the bounding box for collision detection. This can come in handy if you need to contain the positioned element within a specific section of your page. By default its value is window.

Example

Following example demontstrates the use ofposition method.

<!doctype html>

<head>

<title>jQuery UI position method Example</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

<style>

.positionDiv {

position: absolute;

width: 75px;

height: 75px;

background: #b9cd6d;

}

#targetElement{

width: 300px;

height: 500px;

padding-top:50px;

}

</style>

$(function() {

// Position the dialogoffscreen to the left, but centered vertically

$( "#position1" ).position({

my: "center",

at: "center",

of: "#targetElement"

});

$( "#position2" ).position({

my: "left top",

at: "left top",

of: "#targetElement"

});

$( "#position3" ).position({

my: "right-10 top+10",

at: "right top",

of: "#targetElement"

});

$( document).mousemove(function( event ) {

$( "#position4" ).position({

my: "left+3 bottom-3",

of: event,

collision: "fit"

});

</script>

</head>

<body>

</div>

</body>

</html>

Let's save above code in an HTML filepositionmethodexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Box 1

Box 2

Box 3

Box 4

In this example we see that:

Box 1 is aligned to center (horizontally and vertically) of the div element.

Box 2is aligned to left top (horizontally and vertically) of the div element.

Box 3is displayed in the top right corner of the window, but leave some padding so that the message stands out more. This is done using the horizontal and vertical values of my or at.

For Box 4, the of value is set as an event object. This is an event associated with a pointer and moves with the mouse event.

JqueryUI Environment Setup

JqueryUI Environment Setup

This chapter will discuss about download and set up of JqueryUI library. We will also briefly study the directory structure and its contents. JqueryUIlibrary can be used in two ways in your web page:

Downloading UI Library from its officialwebiste

Downloading UI Library from CDNs

Download UI Library from its official website

When you open the link http://jqueryui.com/, you will see there are three options to downloadJqueryUI library:

Custom Download - Click on this button to download a customized version of library.

Stable - Click on this button to get the stable and latest version of JqueryUIlibrary.

Legacy - Click on this button to get the previous major release of the JqueryUIlibrary.

Custom Download with Download Builder

Using Download Builder you can create a custom build including only the portions of the library that you need and download this new customized version of JqueryUI, depending on the chosen theme. You will see the screen as below (same page is split in two images):

This is useful for production usage when you would want to use only specific plugin or feature of the JqueryUI library. The directory structure of this version is as shown in following figure:

Uncompressed files are located in thedevelopment-bundle directory. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production.

Stable download

Click on the Stable button, which leads directly to a ZIP file containing the sources, examples, and documentation for latest version ofJqueryUI library. Extract the ZIP file contents to a jqueryui directory.

This version contains all files including all dependencies, a large collection of demos, and even the library’s unit test suite. This version is helpful to getting started.

Legacy download

Click on the Legacy button, which leads directly to a ZIP file of previous major release ofJqueryUI library. This version also contains all files including all dependencies, a large collection of demos, and even the library’s unit test suite. This version is helpful to getting started.

Download UI Library from CDNs

A CDN or Content Delivery Network is a network of servers designed to serve files to users. If you use a CDN link in your web page, it moves the responsibility of hosting files from your own servers to a series of external ones. This also offers an advantage that if the visitor to your webpage has already downloaded a copy ofJqueryUI from the same CDN, it won't have to be re-downloaded.

The jQuery Foundation, Google, and Microsoftall provide CDNs that host jQuery core as well as jQuery UI.

Because a CDN does not require you to host your own version of jQuery and jQuery UI, it is perfect for demos and experimentation.

We are using the CDN versions of the library throughout this tutorial.

Example

Now let us write a simple example usingJqueryUI. Let us create an HTML file, copy the following content to the <head> tag:

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

Details of above code are:

The first line, adds jQuery UI theme (in our case ui-lightness) via CSS. This CSS will make our UI stylish.

Second line, adds the jQuery library, as jQuery UI is built on top of jQuery library.

Third line, adds the jQuery UI library. This enables jQuery UI in your page.

Now let's add some content to <head> tag:

$(function () {

$('#dialogMsg').dialog();

});

</script>

In the <body> add this:

<body>

Hello this is my firstJqueryUI example.

</div>

</form>

</body>

The complete HTML code is as below. Save it asmyfirstexample.html

<!DOCTYPE html>

<head>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

$(function () {

$('#dialogMsg').dialog();

});

</script>

</head>

<body>

Hello this is my firstJqueryUI example.

</div>

</form>

</body>

<html>

JqueryUI Tabs

JqueryUI Tabs

Tabs are sets of logically grouped content that allow us to quickly flip between them to. Tabs allow us to save space like accordions. For tabs to work properly following set of markups needs to used:

Tabs must be in a list either ordered(<ol>) or unordered(<ul>).

Each tab title must be within each <li> and wrapped by anchor (<a>) tag with an hrefattribute.

Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.

jQueryUI provides us tabs () method drastically changes the appearance of HTML elements inside the page. This method traverses (internally in jQuery UI) HTML code and adds new CSS classes to the elements concerned (here, the tabs) to give them the appropriate style.

Syntax

The tabs () method can be used in two forms:

$(selector, context).tabs (options) Method

$(selector, context).tabs ("action", params)Method

$(selector, context).tabs (options) Method

The tabs (options) method declares that an HTML element and its content should be managed as tabs. The options parameter is an object that specifies the appearance and behavior of tabs.

Syntax

$(selector, context).tabs (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).tabs({option1: value1, option2: value2..... });

Following table lists the different options that can be used with this method:

Option

Description

active

This option specifies the current active tab/panel. By default its value is 0.

collapsible

This option set to true, it allows tabs to be deselected. When set to false (the default), clicking on a selected tab does not deselect (it remains selected). By default its value is false.

disabled

This option uses an array to indicate index tabs that are disabled (and therefore cannot be selected). For example, use [0, 1] to disable the first two tabs. By default its value is false.

event

This option is a name of the event that lets users select a new tab. If, for example, this option is set to "mouseover", passing the mouse over a tab will select it. By default its value is "click".

heightStyle

This option controls the height of the tabs widget and each panel. By default its value is "content".

hide

This option specifies how to animate hiding of panel. By default its value is null.

show

This option specifies how to animate showing of panel. By default its value is null.

Following section will show you few working examples of tabs functionality.

Default Functionality

The following example demonstrates a simple example of tabs functionality, passing no parameters to the tabs() method .

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

$(function() {

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

});

</script>

<style>

#tabs-1{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor sit

amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit

voluptatem accusantiumdoloremque laudantium, totam remaperiam,

eaque ipsa quae ab illoinventore veritatis et quasiarchitecto

beatae vitae dicta suntexplicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Try our system

In the above example click on tabs to swap between content.

Use of heightStyle, collapsible and hide

The following example demonstrates the usage of three options (a) heightStyle (b) collapsibleand (c) hide in the tabs function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

$(function() {

$( "#tabs-5" ).tabs({

heightStyle:"fill",

collapsible:true,

hide:"slideUp"

});

</script>

<style>

#tabs-5{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magna

aliqua. Ut enim ad minim veniam, quis nostrudexercitation

ullamco laboris nisi utaliquip ex ea commodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit voluptatem

accusantium doloremquelaudantium, totam rem aperiam, eaqueipsa quae

ab illo inventoreveritatis et quasi architecto beataevitae dicta

sunt explicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Tab 1

Tab 2

Tab 3

Neque porro quisquam est qui dolorem ipsumquia dolor sit amet, consectetur, adipisci velit...

Click the selected tab to toggle its content closed/open. You can also see the animation effect "slideUp" when the tab is closed.

Use of event

The following example demonstrates the usage of three options event in the tabs function ofJqueryUI.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

$(function() {

$( "#tabs-9" ).tabs({

event:"mouseover"

});

</script>

<style>

#tabs-9{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit

voluptatem accusantiumdoloremque laudantium, totam remaperiam,

eaque ipsa quae ab illoinventore veritatis et quasiarchitecto

beatae vitae dicta suntexplicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Try Our System

In the above example toggle the sections open/closed with mouseover the tabs.

$(selector, context).tabs ("action", params) Method

The tabs ("action", params) method allows an action on the tabs (through a JavaScript program), selecting, disabling, adding, or removing a tab. The action is specified as a string in the first argument (e.g., "add" to add a new tab). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).tabs ("action",params);;

Following table lists the different actions that can be used with this method:

Action

Description

destroy

This action destroys the tabs functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.

disable

This action disables all tabs. This method does not accept any arguments.

disable( index )

This action disables the specified tab. Where index is the tab to be disabled.

enable

This action activates all the tabs. This signature does not accept any arguments.

enable( index )

This action activates a specified tab. Where index is the tab to be enabled.

load( index )

This action forces a reload of the indexed tab, ignoring the cache. Where index is the tab to load.

option(optionName )

This action gets the value currently associated with the specified optionName.

option

This action gets an object containing key/value pairs representing the current tabs options hash.

option(optionName, value )

This action sets the value of the tabs option associated with the specified optionName. The argument optionName is name of the option to be set and valueis the value to be set for the option.

option( options )

This action sets one or more options to the tabs.

refresh

This action recomputes the height of the tab panels when any tabs that were added or removed directly in the DOM. Results depend on the content and the heightStyle option.

widget

This action returns the element serving as the tabs widget, annotated with the ui-tabs class name.

Use of action disable()

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() method.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

$(function() {

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

$( "#tabs-13" ).tabs("disable");

});

</script>

<style>

#tabs-13{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamco

laboris nisi ut aliquip exea commodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit

voluptatem accusantiumdoloremque laudantium, totam remaperiam,

eaque ipsa quae ab illoinventore veritatis et quasiarchitecto

beatae vitae dicta suntexplicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Try Our System

Here you can see all the tabs are disabled.

Use of action disable(index)

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable(index) method.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

$(function() {

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

$( "#tabs-17" ).tabs("disable",2);

});

</script>

<style>

#tabs-17{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit voluptatem

accusantium doloremquelaudantium, totam rem aperiam, eaqueipsa quae

ab illo inventoreveritatis et quasi architecto beataevitae dicta

sunt explicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris nisi

ut aliquip ex ea commodoconsequat. </p>

</div>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Try Our System

In the above example you notice that Tab 3 is disabled.

Event Management on tabs elements

In addition to the tabs (options) method we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below:

Event Method

Description

activate(event, ui)

This event is triggered after the tab has been activated (after the completion of animation).

beforeActivate(event,ui)

This event is triggered before a the tab has been activated.

beforeLoad(event, ui)

This event is triggered when a remote tab is about to be loaded, after the beforeActivate event. This event is triggered just before the Ajax request is made.

create(event, ui)

This event is triggered when tabs are created.

load(event, ui)

This event is triggered after a remote tab has been loaded.

Example

The following example demonstrates the event method usage in tabs widgets. This example demonstrates the use of events activate andcreate.

<!doctype html>

<head>

<title>jQuery UI Tabs functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

$(function() {

$( "#tabs-21" ).tabs({

activate: function( event, ui ) {

var result = $( "#result-2" ).empty();

result.append("activated" );

create: function( event, ui ) {

var result = $( "#result-1" ).empty();

result.append("created" );

}

});

</script>

<style>

#tabs-21{font-size: 14px;}

.ui-widget-header {

background:#b9cd6d;

border: 1px solid #b9cd6d;

color: #FFFFFF;

font-weight: bold;

}

.resultarea {

background: #cedc98;

border-top: 1px solid #000000;

border-bottom: 1px solid #000000;

color: #333333;

font-size:14px;

}

</style>

</head>

<body>

<ul>

</ul>

<p>Neque porro quisquamest qui dolorem ipsum quia dolor

sit amet, consectetur,adipisci velit... </p>

</div>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua.

Ut enim ad minim veniam,quis nostrud exercitation ullamcolaboris

nisi ut aliquip ex eacommodo consequat. </p>

</div>

<p>ed ut perspiciatis undeomnis iste natus error sit voluptatem

accusantium doloremquelaudantium, totam rem aperiam, eaqueipsa quae

ab illo inventoreveritatis et quasi architecto beataevitae dicta

sunt explicabo. </p>

<p>Lorem ipsum dolor sitamet, consectetur adipisicing elit,

sed do eiusmod temporincididunt ut labore et dolore magnaaliqua. Ut

enim ad minim veniam, quisnostrud exercitation ullamco laborisnisi

ut aliquip ex ea commodoconsequat. </p>

</div>

</div><br>

</body>

</html>

Let's save above code in an HTML filetabsexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Try Our System

created

Click on the tabs to see a message getting printed below on specific to events.

JqueryUI Toggle Class

JqueryUI Toggle Class

This chapter will discuss the toggleClass()method, which is a useful new class for manipulation. toggleClass() method adds or removes one or more classes from each element in the set of matched elements.

Syntax

Added In Version 1.0 of jQueryUI

The toggleClass() method has its basic syntax as follows:

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

Parameter

Description

className

This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.

switch

This is of type Boolean and if specified, forces the toggleClass()method to add the class if true, or to remove the class if false.

duration

This is of type Number or String and optionally provides one ofslow, normal, fast, or the duration of the effect in milliseconds. If omitted, the animate() method determines the default. Its default value is 400.

easing

The name of the easing function to be passed to the animate() method.

complete

This is a callback method called for each element when the effect is complete for this element.

Added In Version 1.9 of jQueryUI

With version 1.9, this method now supports achildren option, which will also animate descendant elements.

.toggleClass( className [, switch ] [, options ] )

Parameter

Description

className

This is a String and represents the CSS class name, or space-delimited list of class names, to be added, removed, or toggled.

switch

This is of type Boolean and if specified, forces the toggleClass()method to add the class if true, or to remove the class if false.

options

This represents all animation settings. All properties are optional. Possible values are:

duration: A string or number determining how long the animation will run.. Its default value is 400.

easing: A string indicating which easing function to use for the transition. Its default value is swing. Possible values are here.

complete: This is a callback method called for each element when the effect is complete for this element.

children: This is a Boolean and represents whether the animation should additionally be applied to all descendants of the matched elements.

queue: This is of type String/Boolean indicating whether to place the animation in the effects queue.

Examples

The following example demonstrates the use oftoggleClass() method.

<!doctype html>

<head>

<title>jQuery UI Switch Class Example</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

<style>

.class1 {

border-width : 10px;

border-color : grey;

background-color :#cedc98;

color : black;

}

</style>

function toggle ()

{

$("#para").toggleClass("class1", 1000);

}

</script>

</head>

<body>

<button onclick=toggle()> Toggle </button>

<p id="para" style=border-style:solid> Welcome to Tutorials Point </p>

</body>

</html>

Let's save above code in an HTML filetoggleclassexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Welcome to Tutorials Point

Click on the Toggle button to see how the CSS classes are changeed for the text.

JqueryUI Droppable

JqueryUI Droppable

jQueryUI provides droppable() method to make any DOM element droppable at a specified target (a target for draggable elements).

Syntax

The droppable() method can be used in two forms:

$(selector, context).droppable (options)Method

$(selector, context).droppable ("action",params) Method

$(selector, context).droppable (options) Method

The droppable (options) method declares that an HTML element can be used as an element in which you can drop other elements. The optionsparameter is an object that specifies the behavior of the elements involved.

Syntax

$(selector, context).droppable (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).droppable({option1: value1, option2: value2..... });

Following table lists the different options that can be used with this method:

Option

Description

This option is used when you need to control which draggableelements are to be accepted for dropping. By default its value is *.

activeClass

This option is a String representing one or more CSS classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. By default its value is false.

addClasses

This option when set to false will prevent the ui-droppable class from being added to the droppable elements. By default its value istrue.

disabled

This option when set to truedisables the droppable. By default its value is false.

greedy

This option is used when you need to control which draggableelements are to be accepted for dropping on nested droppables. By default its value is false. If this option is set to true, any parentdroppables will not receive the element.

hoverClass

This option is String representing one or more CSS classes to be added to the element of droppable when an accepted element (an element indicated inoptions.accept) moves into it. By default its value is false.

scope

This option is used to restrict the droppable action of draggableelements only to items that have the same options.scope (defined indraggable (options)). By default its value is "default".

tolerance

This option is a String that specifies which mode to use for testing whether a draggable is hovering over a droppable. By default its value is "intersect".

Following section will show you few working examples of drop functionality.

Default Functionality

The following example demonstrates a simple example of droppable functionality, passing no parameters to the droppable() method .

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

<style>

#draggable-1 {

width: 100px; height: 50px; padding: 0.5em; float: left;

margin: 22px 5px 10px 0;

}

#droppable-1 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#draggable-1" ).draggable();

$( "#droppable-1" ).droppable();

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Drag me to my target

Drop here

Use of addClass, disabled and tolerance

The following example demonstrates the usage of three options (a) addClass (b) disabled and(c) tolerance in the drop function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

<style>

#draggable-2 {

width: 100px; height: 50px; padding: 0.5em;

margin: 0px 5px 10px 0;

}

#droppable-2,#droppable-3, #droppable-4,#droppable-5 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#draggable-2" ).draggable();

$( "#droppable-2" ).droppable({

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#droppable-3" ).droppable({

disabled : "true",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#droppable-4" ).droppable({

tolerance: 'touch',

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped with a touch!" );

}

});

$( "#droppable-5" ).droppable({

tolerance: 'fit',

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped only when fully fit on the me!" );

}

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

<p>I'm disabled, you can't drop here!</p>

</div>

<p>Tolerance Touch!</p>

</div>

<p>Tolerance Fit!</p>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the result:

Drag me to my target

Drop here

I'm disabled, you can't drop here!

Tolerance Touch!

Tolerance Fit!

Now drop the element on the "Tolerance Touch!" box (just touch the edge of this box) and see the changes of target element. Now to drop the element on "Tolerance Fit!" target, the draggableelement has to fully overlap the target elementi.e "Tolerance Fit!" target.

Choose elements to be dropped

The following example demonstrates the use of option accept and scope option in the drag function of JqueryUI.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

<style>

.wrap{

display: table-row-group;

}

#japanpeople,#indiapeople, #javatutorial,#springtutorial {

width: 120px; height: 70px; padding: 0.5em; float: left;

margin: 0px 5px 10px 0;

}

#japan,#india,#java,#spring{

width: 140px; height: 100px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#japanpeople" ).draggable();

$( "#indiapeople" ).draggable();

$( "#japan" ).droppable({

accept: "#japanpeople",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#india" ).droppable({

accept: "#indiapeople",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#javatutorial" ).draggable({scope : "java"});

$( "#springtutorial" ).draggable({scope : "spring"});

$( "#java" ).droppable({

scope: "java",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

$( "#spring" ).droppable({

scope: "spring",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

</script>

</head>

<body>

<p>People to be dropped to Japan</p>

</div>

<p>People to be dropped to India</p>

</div>

<p>Japan</p>

</div>

<p>India</p>

</div>

<hr/>

<p>People who want to learn Java</p>

</div>

<p>People who want to learnSpring</p>

</div>

</div>

<p>Spring</p>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output. Now you can play with the output:

People to be dropped to Japan Japan

People to be dropped to India India

People who want to learn Java Java

People who want to learn Spring Spring

Here you can see that you can drop element "People from Japan" on only "Japan" target and element "People from India" on target India.Similary the scope for "People who want to learn Java" is set to target "Java" and "People who want to learn Spring" is set to "Spring target".

Managing appearance

Following example demonstrates the use of options activeClass and hoverClass of JqueryUIclass, which help us manage appearance.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

#draggable-3 {

width: 100px; height: 50px; padding: 0.5em; float: left;

margin: 21px 5px 10px 0;

}

#droppable-6 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

.active {

border-color : blue;

background : grey;

}

.hover {

border-color : red;

background : green;

}

</style>

$(function() {

$( "#draggable-3" ).draggable();

$( "#droppable-6" ).droppable({

activeClass: "active",

hoverClass: "hover",

drop: function( event, ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

}

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Drag me to my target

Drop here

You can notice that on dragging or hovering (over the target) of "Drag me to my target" element, changes the color of target element "Drop here".

$(selector, context).droppable ("action",params) Method

The droppable ("action", params) method can perform an action on droppable elements, such as preventing droppable functionality. The action is specified as a string in the first argument (e.g., "disable" to prevent the drop). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).droppable ("action", params);;

Following table lists the different actions that can be used with this method:

Action

Description

destroy

This action destroys the droppable functionality of an element completely. The elements return to their pre-initstate.

disable

This action disables the droppable operation. The elements are no longer droppable elements. This method does not accept any arguments.

enable

This action reactivate the droppable operation. The elements can again receive a droppable element. This method does not accept any arguments.

option

This action gets an object containing key/value pairs representing the current droppable options hash. This method does not accept any arguments.

option(optionName )

This action gets the value of currently associated droppable element with the specifiedoptionName. This takes a String value as argument.

option(optionName, value )

This action sets the value of the droppable option associated with the specified optionName.

option( options )

This action is sets one or more options for the droppable. The argument options is a map of option-value pairs to be set.

widget

This action returns a jQuery object containing the droppable element. This method does not accept any arguments.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of destroy() method.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

<style>

.draggable-4 {

width: 90px; height: 50px; padding: 0.5em; float: left;

margin: 0px 5px 10px 0;

border: 1px solid red;

background-color:#B9CD6D;

}

.droppable-7 {

width: 100px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

border: 1px solid black;

background-color:#A39480;

}

.droppable.active {

background-color: red;

}

</style>

$(function() {

$('.draggable-4').draggable({ revert: true });

$('.droppable-7').droppable({

hoverClass: 'active',

drop: function(e, ui) {

$(this).html(ui.draggable.remove().html());

$(this).droppable('destroy');

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "i'mdestroyed!" );

}

});

</script>

</head>

<body>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output:

drag drag 2 drag 3

drop here drop here drop here

If you drop "drag1" on any of the elements named "drop here", you will notice that this element gets dropped and this action destroys the droppable functionality of an element completely. You cannot drop "drag2" and "drag3" on this element again.

Event Management on droppable elements

In addition to the droppable (options) method we saw in the previous sections, JqueryUIprovides event methods which gets triggered for a particular event. These event methods are listed below:

Event Method

Description

activate(event,ui)

This event is triggered when the accepted draggableelement starts dragging. This can be useful if you want to make the droppable "light up" when it can be dropped on.

create(event, ui)

This event is triggered when a droppable element is created. Where event is of type Event, and ui is of typeObject.

deactivate(event,ui)

This event is triggered when an accepted draggable stops dragging. Where event is of type Event, and ui is of typeObject.

drop(event, ui)

This action is triggered when an element is dropped on the droppable. This is based on the tolerance option. Whereevent is of type Event, and uiis of type Object.

out(event, ui)

This event is triggered when an accepted draggableelement is dragged out of the droppable. This is based on the tolerance option. Whereevent is of type Event, and uiis of type Object.

over(event, ui)

This event is triggered when an accepted draggableelement is dragged over the droppable. This is based on the tolerance option. Whereevent is of type Event, and uiis of type Object.

Example

The following example demonstrates the event method usage during drop functionality. This example demonstrates the use of events drop,over and out.

<!doctype html>

<head>

<title>jQuery UI Droppable - Default functionality</title>

<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>

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

<style>

#draggable-5 {

width: 100px; height: 50px; padding: 0.5em; float: left;

margin: 22px 5px 10px 0;

}

#droppable-8 {

width: 120px; height: 90px;padding: 0.5em; float: left;

margin: 10px;

}

</style>

$(function() {

$( "#draggable-5" ).draggable();

$("#droppable-8").droppable({

drop: function (event,ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "Dropped!" );

over: function (event,ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "moving in!" );

out: function (event,ui) {

$( this )

.addClass( "ui-state-highlight" )

.find( "p" )

.html( "moving out!" );

}

});

</script>

</head>

<body>

<p>Drag me to my target</p>

</div>

</div>

</body>

</html>

Let's save above code in an HTML filedropexample.htm and open it in a standard browser which supports javascript, you must see the following output:

Drag me to my target

Drop here

Here you will notice how the message in the droppable element changes as you drag the element.