jQuery UI Tutorials and Guide

JqueryUI Accordion Example

November 8, 2014 by Krishna Srinivasan Leave a Comment

The jQueryUI provides collapsible widget called accordion is a view of hierarchy so that only the roots of each branch are visible. It is widely used to manage large content and navigation lists on the website. We can easily create collapsing division within a webpage which is used to build accordion navigation, content boxes etc. It is jQueryUI based collapsible content panels, displays the information in a limited amount of space which is broken into logical sections and looks like tabs.

The accordion widget contains series of containers, all of which are closed except for one. Each container includes heading which opens the container and display the content. When we click on the heading, its content is displayed. When we click on the other heading, the current content will hide and new content will be shown.

also read:

JQuery Keydown, Keypress and Keyup

JQUery Setting Drop Down Value

JQuery prepend() and prependTo()

The accordion method can be used in the following forms:

$(selector, context). accordion (options)
$(selector, context). accordion(“actions”, [params])

The following example demonstrates simple accordion technique:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#myaccordion").accordion();
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
[/code]

The above script uses accordion widget which is collapsible content holder and broken into sections, much like tabs.
The accordion method uses ID selector “#myaccordion”, defines different content sections which will be activated and displays the content when user clicks on the particular section.

Run JQueryUI Simple Accordion Demo

Accordion Widget Options

The accordion method contains following options:

Option	Description	Default Value
active	It specifies currently opened content tab.	0
animate	It indicates how to animate the panels.	{ }
collapsible	It allows to collapse the panel by clicking on it when it is set to true.	false
disabled	It disables the accordion when it is set to true i.e. it stops collapsable operation.	false
event	It selects an accordion header to activate the particular panel.	click
header	It specifies the header element for the accordion element.	> li > :first-child,> :not(li):even
heightStyle	It specifies height of the accordion and panel.	auto
icons	It specifies the icons for the headers.	{ “header”: “ui-icon-triangle-l-e”, “activeHeader”: “ui-icon-triangle-l-s”}

The following example demonstrates usage of header, collapsible and active options:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#myaccordion").accordion({
header: ‘h2’,
collapsible: true,
active: false,
});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
[/code]

The script makes use of accordion options i.e. header, collapsible and active and accordion widget uses ID selector “#myaccordion”, to perform actions of above specified options.
The header option specifies selector for header element to override the default pattern. In the script, the widget referring to header “h2” for identifying the header elements.
The collapsible option allows collapsing the active section by clicking on it when it is set to true.
The active option indicates the index of the menu when the panel is currently open.

Run JQueryUI Accordion Options Demo

The following example demonstrates usage of heightStyle and event options:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#myaccordion").accordion({
heightStyle: "content",
event: "mouseover"
});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Simple Accordion Example</h2>
<div id="myaccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.
</div>
</div>
</body>
</html>
[/code]

The above program contains accordion widget options such as heightStyle and event.
The heightStyle option controls the height of the accordion and each panel. Here, we have set value of the heightStyle to content, where each panel will be as tall as its content.
The event option specifies the event used to select an accordion header. When we mouse over on the particular element, it will show the contents, present in it.

Run JQueryUI Accordion Options Demo1

Accordion Widget Methods

The following table shows some of the methods which are used with accordion widget:

Method	Description
destroy()	It removes the accordion functionality completely.
disable()	This method disables the collapsible operation i.e. it disables the all content panels.
enable()	This method enables the accordion operation i.e. it reactivates the all menus.
options()	It returns the options property. It sets accordion operation with specified option name.
refresh	It adds or removes the headers and panels in the DOM and it does not accept any arguments.
widget()	It defines the accordion widget element with jQuery object.

The following example demonstrates usage of enable and disable methods:

$("#enable").click(function() {
$("#myAccordion").accordion("enable");
});

$("#disable").click(function() {
$("#myAccordion").accordion("disable");
});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Using Accordion Methods</h2>
<div id="myAccordion">
<h2>Heading One</h2>
<div>
HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
</div>
<h2>Heading Two</h2>
<div>
JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
</div>
<h2>Heading Three</h2>
<div>
CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements. External Style Sheets can save a lot of work.External Style Sheets are stored in CSS files.
</div>
</div><br>
<button id="enable">Enable the Accordion!</button>
<button id="disable">Disable the Accordion!</button>
</body>
</html>
[/code]

The program uses the accordion methods called, enable() and disable().
The enable method enables the accordion element i.e. it reactivate all the menus.
We add click handler for the enable button by using the line “$(“#enable”).click(function())” and enable the accordion by using the line “$(“#myAccordion”).accordion(“enable”);”.
Like enable, we add click handler for the disable button by using the line “$(“#disable”).click(function())” and disable the accordion by using the line “$(“#myAccordion”).accordion(“disable”);” .
Turn the specified element into an accordion by using the ID selector “#myAccordion” within the accordion method as shown in the script.

Run JQueryUI Accordion Methods Demo

Accordion Widget Events

The following table shows events which are used with accordion widget:

Event	Description
activate(event, ui)	This event fires when the accordion operation starts and triggers after the activation of a panel.
create(event, ui)	It fires when an accordion is created.
beforeActivate(event, ui)	This event fires before the activation of a panel.

The following example shows usage of activate and beforeActivate events:

[code lang=”xml”]
<!doctype html>
<head>
<title>Example of Accordion</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
$("#myAccordion").accordion({
collapsible: true,
active: true,
activate: function (event, ui) { alert("activate"); },
beforeActivate: function (event, ui) { alert("before activate"); }
});
});
</script>
<body>
<h2>Using Accordion Events</h2>
<ul>
<div id="myAccordion">
<li>
<h2>First Heading</h3>
<div>
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
</li>
<li>
<h2>Second Heading</h2>
<div>
<ul>
<li>C</li>
<li>D</li>
</ul>
</div>
</li>
</div>
</ul>
</body>
</html>
[/code]

The script uses accordion events such as activate and beforeActivate events.
The activate event triggers when a menu is activated. It fires after animation completes. It is not fired for the initial panel when the accordion widget is created. When a panel activates, it displays the message through alert box as specified in the script.
The beforeActivate event fires before a panel is activated. It will display the message through alert box saying “before activate”, when we click the panel at the initial stage.
Turn the specified element into an accordion by using the ID selector “#myAccordion” within the accordion method as shown in the script.

Run JQueryUI Accordion Events Demo

JQueryUI Droppable Widget Example

November 8, 2014 by Krishna Srinivasan Leave a Comment

The jQueryUI Droppable plugin triggers when an accepted draggable is dropped ‘over’ this droppable. The interaction of droppable depends on draggable element. In general we can say that, target region for draggable element is droppable. We can create target on the page for dropping draggable elements.

also read:

JQuery Keydown, Keypress and Keyup

JQUery Setting Drop Down Value

JQuery prepend() and prependTo()

The droppable widget can be used in two forms:

$(selector, context).droppable (options)
$(selector, context).droppable (“action”, params)

The following is a simple example of droppable widget:

Run JQueryUI Simple Droppable Demo

Droppable Widget Options

The droppable widget contains following options:

Option	Description	Default Value
accept	It specifies which draggable elements accepted for the droppable region.	*
activeClass	It specifies the CSS style for the droppable, when an accepted element is being dragged.	false
addClasses	The ui-droppable class could be prevent from being added, when it is set to false.	true
disabled	It indicates droppable element can be disable by setting it to true.	false
greedy	It will prevent event propagation on nested droppables as element is dropped when it is set to true.	false
hoverClass	It specifies one or more CSS styles will be added to droppable element, while element is being hovered on droppable region.	false
scope	It groups the sets of draggable and droppable elements to the items which have the same options. scope i.e. the draggable value can be accepted as droppable value.	default
tolerance	It is used for testing whether draggable is hovering over a droppable.	intersect

The following is an example:

The above example uses some of the options such as activeClass, hoverClass, accept and tolerance.
When we run the script, if we drag the element over a droppable element, the background color and border color of the droppable element will get change when mouse hovered over the droppable.
We are using CSS styles to make more effective result on the webpage; we are using ID selectors for drag and drop elements and class selectors for hover and active options.
The greedy option will receive the element, when an element is dropped on droppable element.

Run JQueryUI Droppable Options Demo

Droppable Widget Methods

The following table shows some of the methods which are used with droppable widget:

Method	Description
destroy()	It removes the droppable functionality .
disable()	This method disables the drop action.
enable()	This method enables the drop action.
instance()	It creates the droppable instance object.
options()	It returns the options property. It sets droppable option with specified option name.
widget()	It defines droppable element object.

The following example demonstrates usage of methods:

The above example makes use of method destroy which remove the droppable functionality and return the element back to its pre-init state.
The CSS styles are used to make more effective the result should be displayed on the web page.

Run JQueryUI Droppable Methods Demo

Droppable Widget Events

The following table shows events which are used with droppable widget:

Event	Description
activate(event, ui)	This event fires when the acceptable element starts dragging.
create(event, ui)	It fires when a droppable element is created.
deactivate(event, ui)	It fires when a draggable element stops dragging.
drop(event, ui)	It fires when the draggable element is dropped on the droppable.
out(event, ui)	It fires when draggable element is dragged out of the droppable.
over(event, ui)	It fires when draggable element is dragged over the droppable.

The following example demonstrates usage of events:

The script uses events such as drop which activate when element is dropped on the element.
The out event indicates that dragged element is dragged out of the droppable.
The over event indicates that dragged element is dragged over the droppable.

Run JQueryUI Droppable Events Demo

JQueryUI Resizable Widget

November 8, 2014 by Krishna Srinivasan Leave a Comment

The jQueryUI provides property called resizable() method which specifies whether element can be resizable or not by the user. The resizable plugin makes selected elements resizable by using icon which is at the bottom right of the element to resize.

also read:

JQuery Keydown, Keypress and Keyup

JQUery Setting Drop Down Value

JQuery prepend() and prependTo()

The resizable method can be used in the following forms:

$(selector, context).resizable(options)
$(selector, context). resizable (“actions”, [params])

The following is a simple example of resizable widget:

JQuery Simple Resizable Demo

Resizable Widget Options

The resizable widget contains some options which are shown in the following table:

Option	Description	Default Value
alsoResize	It is used to resize the multiple elements with resizable element simultaneously.	false
animate	It enables the final size after resizing when the mouse button is released.	false
animateDuration	It determines duration of the resizing effect in milliseconds and used only when it is set to true.	slow
animateEasing	It indicates which easing should be applied when using the animate option.	swing
aspectRatio	It determines whether to keep height and width ratio for the element.	false
autoHide	It hides the icon or handles, when user is not hovering over the element.	false
cancel	It stops resizing on specified elements.	input, textarea, button, select, option
containment	It resizes the specified element within bounds of the region.	false
delay	It specifies the delay time in milliseconds when the resizing begins.	0
disabled	It disables the resizing of elements when it is set to true i.e. it stops resizing the elements.	false
distance	It determines the displacement when resizing starts in the form of pixels	1
ghost	It is a semi-transparent helper element, is shown for resizing when it set to true.	false
grid	It snaps the resizing elements to grid system with x and y pixels in the form of [x,y].	false
handles	The handle which starts resizing of elements.	e, s, se
helper	It provides helper element for resizing element and adds proxy element during the drag of resize handle.	false
maxHeight	It defines maximum height the element should be resized.	null
maxWidth	It defines maximum width the element should be resized.	null
minHeight	It defines minimum height the element is allowed to resize.	10
minWidth	It defines minimum width the element is allowed to resize.	10

The following example demonstrates usage of animate, helper, ghost and autoHide options in the jQueryUI resize function:

The above script makes use of resizable options such as animate, helper, ghost and autoHide.
The animate option enables the final size after resizing when the mouse button is released.
The helper option provides helper element for resizing element and adds proxy element during the drag of resize handle. Here, helper element gives green color border while resizing the element.
The ghost option displays semi-transparent helper element which will be shown while resizing the element.
The autoHide option hides the icon, when user is not hovering over the element. When we hover on the element, we could see the icon at bottom of right corner through which we can resize the element.
All the above options use different ID selector within the div element and provides different CSS styles using these ID selectors as shown in the above script.

JQuery Resizable Options Demo

The following example demonstrates usage of containment, minHeight and minWidth options:

The above script uses some of the resizable options such as containment, minHeight and minWidth.
The containment option which resizes the specified element within bounds of the region.
The minHeight and minWidth options define minimum height and minimum width, which specifies the element, should be resized with given values.

JQuery Resizable Options Demo1

The following example demonstrates usage of alsoResize option:

The script uses resizable option called alsoResize, which resize synchronously one or more elements with resizable elements.
The function uses two ID selectors’ #resizeMe1 and #resizeMe1 within the div element. The alsoResize options resize the other element by using the ID #resizeMe2 and define different CSS styles using these two ID’s as shown in the script.

JQuery Resizable Options Demo2

Resizable Widget Methods

The following table shows some of the methods which are used with resizable widget:

Method	Description
destroy()	It removes the resizable functionality .
disable()	This method disables the resizable action.
enable()	This method enables the resizable action.
instance()	It creates the resizable instance object. If there is no instance, then it returns undefined.
options()	It returns the options property. It sets resizable option with specified option name.
widget()	It defines resizable element with jQuery object.

The following example demonstrates usage of disable, enable and destroy methods:

The script uses some of the resizable methods such as disable, enable and destroy.
The disable method disables the functionality of an element. We can’t do perform any operations on disabled element.
To make element enable, use the method named as enable where we can able to resize the element.
The destroy method destroys the resizable functionality completely. It does not allow performing any actions on the element.

JQuery Resizable Methods Demo

Resizable Widget Events

The following table shows events which are used with resizable widget:

Event	Description
create(event, ui)	It fires when resizable element is created.
resize(event, ui)	It fires during the resize, when the resize handler is dragged.
start(event, ui)	It fires when resize operation starts.
stop(event, ui)	It fires when resize operation ends.

The following example demonstrates usage of start, resize and stop events:

The above script makes use of resizable events namely start, resize and stop events.
The start event triggers when resizable operation starts. When resize operation starts, the text message will get display saying “’Resizing Started’.
The stop event fires when resizable operation ends. When operation ends, the text message will get display as “Resizing Stopped” as specified in the script above.
The resize event fires when the handler of resizable element is dragged.

JQuery Resizable Events Demo

JqueryUI Sortable Example

November 8, 2014 by Krishna Srinivasan Leave a Comment

The sortable is a flexible, sorting plugin for jQueryUI which allows rearranging the elements into a meaningful order so that we can analyze it more effectively. It enables sorting of elements by using drag and drop functionality to place the new element within the list and other elements will adjust to fit. The sortable event also enables, sorting of the elements vertically or horizontally using the mouse in a list.

also read:

JQuery Keydown, Keypress and Keyup

JQUery Setting Drop Down Value

JQuery prepend() and prependTo()

The sortable method can be used in the following forms:

$(selector, context). sortable (options)
$(selector, context). sortable (“actions”, [params])

The following example demonstrates simple sortable technique:

The above script makes use of sortable() method to reorder the elements in a list by using the ID selector “#sortMe.
The elements are defined within unordered list with class “.myList” defined within the li tag. The class uses different CSS styles to display the elements more effectively on the webpage.

Run JQueryUI Simple Sortable Demo

Sortable Widget Options

The sortable method contains following options:

Option	Description	Default Value
appendTo	It appends the specified element that moves with the mouse during the drag.	parent
axis	It defines the axis which the dragged elements moves on the values such as horizontal or vertical axis.	false
cancel	It is used to cancel the sorting operation on the specified element.	input, textarea, button, select, option
connectWith	It connects the one list with the other list for user interaction and it is also known as one-way relationship.	false
containment	It sorts the specified element within bounds of the region.	false
cursor	It specifies the cursor when an element moves.	auto
cursorAt	It specifies the offset to the mouse pointer.	false
delay	It specifies the delay time in milliseconds when the movement of mouse is taken into account .	0
disabled	It disables the sorting of elements when it is set to true i.e. it stops sorting operation.	false
distance	It determines the displacement, the mouse must be moved before the sorting starts in the form of pixels.	1
dropOnEmpty	The elements can’t be dropped on empty connect sortable if it is set to false.	true
forceHelperSize	It tells the helper to have a size, when it is set to true.	false
forcePlaceholderSize	When an element is moved, it defines the size of the placeholder when it is set to true.	false
grid	It sorts the elements to grid system with x and y pixels in the form of [x,y].	false
handle	The handle that start the sorting operation.	original
opacity	It provides opacity of the element when sorting.	false
revert	It reverts the element back to its original position after completion of sorting.	false
scroll	It enables the scrolling functionality and it scrolls the element, when it is coming to an edge.	true
scrollSensitivity	It defines the scrolling functionality indicating how many pixels the mouse must exit the visible area to start scrolling.	20
scrollSpeed	It displays the scrolling speed.	20
Tolerance	It defines whether the element is being moved is hovering or not on the another element.	intersect
zIndex	It initialize the Z-index for the helper while being sorted.	1000

The following example demonstrates usage of containment option:

The above script uses containment option which indicates an element within which the displacement takes place.
The option uses ID selector “#element1” to make elements sortable. All the elements are displayed within the div element by using ID selector “#container” and containment option uses this ID selector to display the result by using CSS styles.

Run JQueryUI Sortable Options Demo

The following example shows usage of connectWith and dropOnEmpty options:

[code lang=”xml”]
<!DOCTYPE html>
<head>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
#mysort1, #mysort2,#mysort3 {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
float:left
}
#mysort1 li, #mysort2 li, #mysort3 li {
margin: 2px;
padding: 0.4em;
padding-left: 3em;
font-size: 20px;
height: 20px;
}
.mylist {
background-color: orange;
border: 2px solid green;
}
</style>
<script>
$(function() {
$( "#mysort1, #mysort2" ).sortable({
connectWith: "#mysort1, #mysort2"
});
$( "#mysort3").sortable({
connectWith: "#mysort2",
dropOnEmpty: false
});
});
</script>
<title>JQueryUI Example</title>
</head>
<body>
<h2>Using connectWith and dropOnEmpty Options</h2>
<ul id="mysort1">
<h3>Table 1</h3>
<li class="mylist">A</li>
<li class="mylist">B</li>
<li class="mylist">C</li>
<li class="mylist">D</li>
</ul>
<ul id="mysort2">
<h3>Table 2</h3>
<li class="mylist">E</li>
<li class="mylist">F</li>
<li class="mylist">G</li>
<li class="mylist">H</li>
</ul>
<ul id="mysort3">
<h3>Table 3</h3>
<li class="mylist">I</li>
<li class="mylist">J</li>
<li class="mylist">K</li>
<li class="mylist">L</li>
</ul>
</body>
</html>
[/code]

The script makes use of sortable options such as connectWith and dropOnEmpty.
The connectWith option identifies another sortable element which allows elements from the one list to be moved to other list.
In the script we could see, Table 1 and Table 2 are connecting each other by using the line connectWith: “#mysort1, #mysort2” . We could move elements from Table1 to Table2 only as mentioned in the previous line.
The dropOnEmpty option cannot drop the elements on an empty connect sortable, because it is set to false in the script. The Table3 elements are can’t be moved to Table1, because we are connecting Table3 with Table2 as shown in the script.

Run JQueryUI Sortable Options Demo1

The below example demonstrates usage of delay and distance options:

The above script uses options such as delay and distance .
The delay option defines the delay in milliseconds after which the first movement of the mouse is taken into account. In the script we have defined as “delay: 500”, meaning that, we can able to sort the elements after 500milliseconds.
The distance option defines the number of pixels that the mouse must be moved before the sorting starts. In the script we have used “distance: 30”, meaning that, it sorts the elements after the distance of 30px.

Run JQueryUI Sortable Options Demo2

Sortable Widget Methods

The following table shows some of the methods which are used with sortable widget:

Method	Description
destroy()	It removes the sortability functionality .
cancel()	It cancels the current sortable functionality .
disable()	This method disables the sortable operation.
enable()	This method enables the sortable operation.
options()	It returns the options property. It sets sortable operation with specified option name.
refresh	It refreshes the position and size of the sortable elements and it does not accept any arguments.
toArray	It returns the array of item id’s into the sorted order.
serialize	It defines serialized query string into a form submittable string.
widget()	It defines sortable element with jQuery object.

The following example demonstrates usage of enable and destroy methods:

The script makes use of sortable methods such as enable and destroy.
The enable method enable the sortability functionality on sortable elements in the list or set.
The destroy method removes the sortability functionality completely. It will return the element back to its pre-init state.

Run JQueryUI Sortable Methods Demo

Sortable Widget Events

The following table shows events which are used with sortable widget:

Event	Description
activate(event, ui)	This event fires when the sorting operation starts on the acceptable elements.
create(event, ui)	It fires when a sortable element is created.
deactivate(event, ui)	It fires when a draggable element stops sorting.
change(event, ui)	It fires when the sorted element changes the position.
recieve(event, ui)	It fires when a sort item receives element from the other list.
out(event, ui)	It fires when sortable element is moved out of the sorting operation.
over(event, ui)	It fires when sortable element is sorted into the sortable list.
start(event, ui)	It fires when sortable operation starts.
stop(event, ui)	It fires when sortable operation ends.
sort(event, ui)	It fires during sort operation.
update(event, ui)	It fires when user stops sorting operation and the position of the element has been changed.

The following example demonstrates usage of start and stop events:

.highlight {
border: 2px solid red;
font-weight: bold;
font-size: 40px;
background-color: lightblue;
}
</style>
<script>
$(function () {
$("#element1").sortable({
start: function (event, ui) {
ui.item.toggleClass("highlight");
},
stop: function (event, ui) {
ui.item.toggleClass("highlight");
}
});
});
</script>
<div id="container" style="float:left;width:300px;border:1px solid red;height:250px">
<ul id="element1">
<li class="mylist">A</li>
<li class="mylist">B</li>
<li class="mylist">C</li>
<li class="mylist">D</li>
<li class="mylist">E</li>
<li class="mylist">F</li>
<li class="mylist">G</li>
<li class="mylist">H</li>
<li class="mylist">I</li>
<li class="mylist">J</li>
<li class="mylist">K</li>
<li class="mylist">L</li>
</ul>
</div>
</body>
</html>
[/code]

The script uses sortable events called start and stop.
The start event triggers when a sort operation starts.
The stop event occurs when a sort operation ends.
We have used class called highlight which toggles when we click on the element and element will be display with red color border and light blue background color.

Run JQueryUI Sortable Events Demo

JqueryUI Autocomplete Widget

August 4, 2014 by Krishna Srinivasan Leave a Comment

The Autocomplete is important part of the modern rich web interface. The jQueryUI Autocomplete widget is a functionality which enables users to find and select from a list of values as they type. It offers suggestions related to the search item in a text input field. For autocomplete mechanism, data can be static source and we need to just fetch data from the remote database. It makes it pretty easy to setup and provides a smooth experience to users. It works against pre populated list which can receive input can be associated with predefined entries.

The autocomplete widget acts like a dropdown, it starts to search predefined list of entries as user types a value in the text field for a match. As we enter more characters, list of the further entries will be displayed until the proper field is selected and we can easily filter down the list to better matches.

also read:

JQuery Keydown, Keypress and Keyup

JQUery Setting Drop Down Value

JQuery prepend() and prependTo()

The accordion method can be used in the following forms:

$(selector, context). button (options)
$(selector, context). button(“actions”, [params])

The following example demonstrates simple autocomplete widget functionality:

The above script uses autocomplete mechanism to provide a list of suggestions for the beginning of the word as user types in the text box.
We have used variable called “myList” which contains set of words and display like a dropdown with set of words.
The “source: myList” line indicates the source name which tells the widget, where to get the suggestions for the autocomplete menu from.
When we run the script, the autocomplete event fires by using the ID selector “#myval” and refers the source location “myList” to display the list of suggestions for the beginning of the word as user types in the text box.

Run JQueryUI Simple Autocomplete Demo

Autocomplete Widget Options

The autocomplete widget contains following options:

Option	Description	Default Value
appendTo	It determines which element should be appended to the menu.	null
autoFocus	It determines if it is set to true, first item in the list will be given focus when the list is displayed.	false
delay	It displays the time in milliseconds between keystroke and matching value.	300
disabled	It disables the autocomplete when it is set to true i.e. it stops autocomplete operation.	false
minLength	It specifies the number of characters to be entered before search for suggestions is performed.	1
position	It determines the position of suggestions menu, which will appear to the input element with which it is associated.	{ my: “left top”,”at:”left bottom”, collision: “none” }
source	It tells the widget, where to get the suggestions for the autocomplete menu from.	none; must be specified

The following example demonstrates usage of minLength, delay and source options:

The script uses different types of autocomplete options such as minLength, delay and source.
The minLength option specifies the minimum number of characters need to be entered before a search for suggestions is performed. We have defined minimum length of 2 characters, which display the list of suggestions after entering two characters.
The delay determines the time between keystroke and start of a search. Here, we have specified 800 milliseconds of time to wait before trying to obtain the matching values.
The source option defines data to use, which tells the widget, where to get the suggestions for the autocomplete menu from. Here, source name is “myList”, which contains set of words, which should be display as list of suggestions when user types in the text box.
The autocomplete event fires by using the ID selector “#myval” and uses above mentioned options to perform specified task.

Run JQueryUI Autocomplete Options Demo

The following example shows usage of autoFocus option:

The program uses a autocomplete option, called as autofocus.
The autoFocus option determines whether or not the first item in the list will be given focus when the list is displayed.
When we run the script, user enters the text and first item is given focus in the suggestion list, because its value is set to true. If it is set to false, the first item will not be given the focus.

Run JQueryUI Autocomplete Options Demo1

Autocomplete Widget Methods

The following table shows some of the methods which are used with autocomplete widget:

Method	Description
destroy()	It removes the autocomplete functionality completely.
disable()	This method disables the activity of the autocomplete mechanism.
enable()	This method enables the activity of the autocomplete mechanism.
options()	It returns the options property. It represents the autocomplete options values.
close	It closes the autocomplete menu and hides list of suggestions from this menu.
search	It fires a search event between the string value and data source .
widget()	It defines the button widget element with jQuery object.

The following example explains usage of autocomplete search method:

The script makes use of autocomplete search method which fires a search event between the string value and data source .
The script searches for item which starts with “j” in the list of word set by using the ID selector “#myval” which selects the items from the source “myList”.

Run JQueryUI Autocomplete Methods Demo

Autocomplete Widget Events

The following table shows events which are used with autocomplete widget:

Event	Description
change(event, ui)	This event fires when the input element is changed.
create(event, ui)	It fires when a autocomplete is created.
close(event, ui)	It fires when the autocomplete widget closes the menu.
focus(event, ui)	It fires when focus is moved on the item .
open(event, ui)	It indicates that the autocomplete event is about to open the suggestion menu.
response(event, ui)	It fires after a search completes, before the menu is shown.
search(event, ui)	It fires after the minLength and delay are met.
select(event, ui)	It fires when a value is selected from the menu.

The following example demonstrates usage of autocomplete select and focus events:

The script uses autocomplete events such as select and focus.
The select event triggers when a value is selected form the menu.
The focus event fires whenever menu options receives the focus.
We have used three types of options i.e. value, label and desc for storing the values.
When we run the script, we enter the word to select from the suggestion list.For instance, if we write as html in the text box, the description of the selected item will be displayed outside the text box.
The .data( “ui-autocomplete” )._renderItem = function( ul, item ) line uses _renderItem extension point of autocomplete which controls the creation of each option in the widget’s menu. It creates new element, appends it to the menu and return it.

Run JQueryUI Autocomplete Events Demo

Create Buttons using jQuery UI

November 17, 2013 by Manisha Patil Leave a Comment

In this tutorial we will see how to create stylized buttons using the jQuery UI library. In reality 100% of the systems we develop, whether desktop, mobile or web, there are situations where it is required to submit data by the user. And to submit these data or even to perform a simple action like opening a new window, the most common practice is to use buttons.

When we need this type of element (button) on web pages, usually we are resorted to traditional tags <button> and <input>, but these have always the same standard look and which the user is often sick of. Seeking to improve the look of the buttons, we can apply styles with CSS and Javascript effects with, which ensures a considerable improvement in the application interface. In these cases we change the background color, borders, font, and sometimes insert small images on the buttons, facilitating the identification of the function of the same.

Navigation Features in Foundation Framework

Introduction to Foundation 3 Framework

In this tutorial we will see how to stylize buttons in simple and practical manner, using the jQuery UI library, which is based on jQuery combined with efficient cascading style sheets. With it, we will see that even links (tags <a>) can become stylized buttons.

Definition from jQuery UI Team:

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 the perfect choice.

Importing the jQuery UI library

To use the features of this powerful library, you only need to import three files in the HTML document:

the jQuery library (Javascript file)
the actual jQuery UI (Javascript file)
and the stylesheet jquery UI (CSS file)

Add the following tags under the header of the HTML page.

Listing 1: Import the jQuery UI

[code lang=”html”]
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"> </ script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"> </ script>
[/code]

It is essential that the jQuery script is referenced before the script of jQuery UI, because the second depends on the syntax of the first to run.

Basic Buttons using jQuery UI

In the first example we will see how to get the buttons on the most basic way possible, what can be done with a call to the function button() from the element you want to style. In the following case, we use the button tags, and anchor input to create the buttons.

Listing 2: Creating basic buttons using jQuery UI

[code lang=”html”]
<!doctype html>
<html
<head>
<meta charset="utf-8" />
<title>Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$("input[type=submit], a, button").button();
});
</script>
</head>
<body>
<button>Button Tag </button>
<input type="submit" value="Input Tag(submit)" />
<a href="#">Anchor Tag (a)</a>
</body>
</html>
[/code]

As we can see, the syntax is quite simple. First use jQuery to select the three elements from the tag names and then call the function button, responsible for shaping element. The result of this code, when saved in a html file extension and open the browser, is the following.

Figure 1: Basic buttons

Groups of Buttons

Often we have several buttons whose functions are related somehow. In such cases, you may want to group them in order to make it clear that they are similar in some way. For these cases there is Buttonset function () which when applied to a div tag containing buttons, makes a “bar” of tools, grouping the items. When using the function Buttonset, the call to the function button for the individual buttons no longer needed, they are automatically stylized, as we shall see in the following example.

Listing 3: Created group of buttons

If necessary, you can also use links and inputs and these would also be formatted. The result is shown in the following figure.

Figure 2: Buttons grouped

Checkboxes and Radios

With jQuery UI it is also possible to stylize input from checkbox and radio types so that they are similar to buttons, avoiding some of the visual pattern. Reaffirming the simplicity of use that library, formatting checkboxes and radio is made in exactly the same way as for common buttons.

In the following example we have checkboxes and radios, clustered and non-clustered, marked and unmarked, to illustrate the general operation of the button functions and Buttonset for these elements.

Listing 4: Creating checkboxes and radios

[code lang=”html”]
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$(".Checking").button();
$("#bar").buttonset();
});
</script>
</head>
<body>
<h1>Checkboxes</h1>
<input type="checkbox" class="check" checked="ckecked" id="chk1"/><label for="chk1">Marked</label>
<input type="checkbox" class="check" id="chk2"/><label for="chk2">Unchecked</label>
<h1>Radios</h1>
<div id="barra">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Option 1</label>
<input type="radio" id="radio2" name="radio"/><label for="radio2">Option 2</label>
<input type="radio" id="radio3" name="radio" checked="checked" /><label for="radio3">Option 3</label>
</div>
</body>
</html>
[/code]

Figure 3: Checkboxes and radios stylized

As it turns out, the look is much more appealing than the standard.

Summary

You can also add icons to the buttons and create submenus (split buttons),. This tutorial aims to give an overview of the element jQuery UI Button. For more information about this feature, a suggestion is to visit the jQuery UI page and read the official documentation of the library at the address JqueryUI .