jqueryui quick guide - tutorialspoint · 2018. 1. 8. · second line, adds the jquery library, as...

http://www.tutorialspoint.com/jqueryui/jqueryui_quick_guide.htm Copyright © tutorialspoint.com

JQUERYUI - QUICK GUIDEJQUERYUI - QUICK GUIDE

JQUERYUI OVERVIEWJQUERYUI OVERVIEWJqueryUI is a powerful Javascript library built on top of jQuery JavaScript library. UI stands for UserInterface. It is a set of plug-ins for jQuery that add new functionalities to the jQuery core library.

The set of plug-ins in JqueryUI includes interface interactions, effects, animations, widgets, andthemes built on top of jQuery JavaScript Library.

It was released in September 2007, announced in a blog post by John Resig on jquery.com. Thelatest release, 1.10.4, requires jQuery 1.6 or later version.

jQuery UI is a free, open source software, licensed under the MIT License.

FeaturesJqueryUI is categorized into four groups, interactions, widgets, effects, utilities. These will bediscussed in detail in the subsequent chapters. The structure of the library is as shown in the imagebelow:

Interactions - These are the interactive plugins like drag, drop, resize and more which givethe user the ability to interact with DOM elements.

Widgets- Using widgets which are jQuery plugins, you can create user interface elementslike accordian,datepicker etc.

Effects - These are built on the internal jQuery effects. They contain a full suite of customanimations and transitions for DOM elements.

Utilities - These are a set of modular tools the JqueryUI library uses internally.

Benefits of JqueryUICohesive and Consistent APIs.

Comprehensive Browser Support

Open Source and Free to Use

http://www.tutorialspoint.com/jqueryui/jqueryui_quick_guide.htm

Good Documentation.

Powerful Theming Mechanism.

Stable and Maintenance Friendly.

JQUERYUI ENVIRONMENT SETUPJQUERYUI ENVIRONMENT SETUPThis chapter will discuss about download and set up of JqueryUI library. We will also briefly studythe directory structure and its contents. JqueryUI library can be used in two ways in your web page:

Downloading UI Library from its official webiste

Downloading UI Library from CDNs

Download UI Library from its official webisteWhen 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 JqueryUI library.

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

Custom Download with Download BuilderUsing Download Builder you can create a custom build including only the portions of the librarythat you need and download this new customized version of JqueryUI, depending on the chosentheme. You will see the screen as below samepageissplitintwoimages:

/jqueryui/jqueryui_quick_guide#download_officialwebsite/jqueryui/jqueryui_quick_guide#download_cdnhttp://jqueryui.com/

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

Uncompressed files are located in the development-bundle directory. The uncompressed file isbest used during development or debugging; the compressed file saves bandwidth and improvesperformance in production.

Stable downloadClick on the Stable button, which leads directly to a ZIP file containing the sources, examples, anddocumentation for latest version of JqueryUI library. Extract the ZIP file contents to a jqueryuidirectory.

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 downloadClick on the Legacy button, which leads directly to a ZIP file of previous major release of JqueryUIlibrary. 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 CDNsA CDN or Content Delivery Network is a network of servers designed to serve files to users. If youuse a CDN link in your web page, it moves the responsibility of hosting files from your own serversto a series of external ones. This also offers an advantage that if the visitor to your webpage hasalready downloaded a copy of JqueryUI from the same CDN, it won't have to be re-downloaded.

The jQuery Foundation, Google, and Microsoft all provide CDNs that host jQuery core as well asjQuery UI.

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

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

ExampleNow let us write a simple example using JqueryUI. Let us create an HTML file, copy the followingcontent to the tag:

Details of above code are:

The first line, adds jQuery UI theme (in our case ui-lightness) via CSS. This CSS will make ourUI 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 tag:

$(function () { $('#dialogMsg').dialog(); });

In the add this:

Hello this is my first JqueryUI example.

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

http://code.jquery.com/https://developers.google.com/speed/libraries/devguidehttp://www.asp.net/ajaxlibrary/cdn.ashx

$(function () { $('#dialogMsg').dialog(); });

Hello this is my first JqueryUI example.

Open the above page in your browser and a screen as below would be seen:

JQUERYUI DRAGGABLEJQUERYUI DRAGGABLEjQueryUI provides draggable method to make any DOM element draggable. Once the element isdraggable, you can move that element by clicking on it with the mouse and dragging it anywherewithin the viewport.

SyntaxThe draggable method can be used in two forms:

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

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

$(selector, context).draggable (options) MethodThe draggable options method declares that an HTML element can be moved in the HTML page.The options parameter 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 oneoptions to be provided then you will separate them using a comma as follows:

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

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

Option Description

addClasses

/jqueryui/jqueryui_quick_guide#draggable_options/jqueryui/jqueryui_quick_guide#draggable_methods#option_addClasses

addClassesIf this option is set to false, it will prevent the ui-draggable class frombeing added in the list of selected DOM elements. By default its value istrue.

appendToSpecifies the element in which the draggable helper should be appendedto while dragging. By default its value is "parent".

axisThis option constrains dragging to either the horizontal x or vertical y axis.Possible values: "x", "y".

cancelYou can use this option to prevent dragging from starting on specifiedelements. By default its value is "input,textarea, button,select,option".

connectToSortableYou can use this option to specify a list whose elements areinterchangeable. At the end of placement, the element is part of the list.By default its value is "false".

containmentConstrains dragging to within the bounds of the specified element orregion. By default its value is "false".

cursorSpecifies the cursor CSS property when the element moves. It representsthe shape of the mouse pointer. By default its value is "auto".

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

delayDelay, in milliseconds, after which the first movement of the mouse istaken into account. The displacement may begin after that time. Bydefault its value is "0".

disabledWhen set to true, disables the ability to move items. Items cannot bemoved until this function is enabled using the draggable ("enable"instruction). By default its value is "false".

distanceNumber of pixels that the mouse must be moved before the displacementis taken into account. By default its value is "1".

gridSnaps the dragging helper to a grid, every x and y pixels. The array mustbe of the form [ x, y ]. By default its value is "false".

handleIf specified, restricts dragging from starting unless the mousedown occurson the specified elements. By default its value is "false".

#option_appendTo#option_axis#option_cancel#option_connectToSortable#option_containment#option_cursor#option_cursorAt#option_delay#option_disabled#option_distance#option_grid#option_handle

helperAllows for a helper element to be used for dragging display. By default itsvalue is "original".

iframeFixPrevent iframes from capturing the mousemove events during a drag. Bydefault its value is "false".

opacityOpacity of the element moved when moving. By default its value is "false".

refreshPositionsIf set to true, all droppable positions are calculated on every mousemove.By default its value is "false".

revertIndicates whether the element is moved back to its original position at theend of the move. By default its value is "false".

revertDurationDuration of displacement in milliseconds after which the element returnsto its original position see options.revert. By default its value is "500".

scopeUsed to group sets of draggable and droppable items, in addition todroppable's accept option. By default its value is "default".

scrollWhen set to true the default, the display will scroll if the item is movedoutside the viewable area of the window. By default its value is "true".

scrollSensitivityIndicates how many pixels the mouse must exit the window to causescrolling of the display. By default its value is "20".

scrollSpeedIndicates the scrolling speed of the display once scrolling begins. Bydefault its value is "20".

snapAdjusts the display of the item being moved on other elements which areflown. By default its value is "false".

snapModeSpecifies how the adjustment should be made between the movedelement and those indicated in options.snap. By default its value is "both".

snapToleranceMaximum number of pixels in the difference in position necessary toestablish the adjustment. By default its value is "20".

stackControls the z-index of the set of elements that match the selector, alwaysbrings the currently dragged item to the front. Very useful in things likewindow managers. By default its value is "false".

#option_helper#option_iframeFix#option_opacity#option_refreshPositions#option_revert#option_revertDuration#option_scope#option_scroll#option_scrollSensitivity#option_scrollSpeed#option_snap#option_snapMode#option_snapTolerance#option_stack

zIndexZ-index for the helper while being dragged. By default its value is "false".

$(selector, context).draggable ("action", [params]) MethodThe draggable action, params method can perform an action on the movable elements, such as toprevent displacement. The action is specified as a string in the first argument and optionally, oneor more params can be provided based on the given action.

Basically, Here actions are nothing but they are jQuery methods which we can use inthe form of string.

Syntax

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

The following table lists the actions for this method:

Action Description

destroyRemove drag functionality completely. The elements are nolonger movable. This will return the element back to its pre-initstate.

disableDisable drag functionality. Elements cannot be moved until thenext call to the draggable"enable" method.

enableReactivates drag management. The elements can be movedagain.

optionoptionNameGets the value currently associated with the specifiedoptionName. Where optionName is name of the option to get andis of type String.

optionGets an object containing key/value pairs representing the currentdraggable options hash.

optionoptionName, valueSets the value of the draggable option associated with thespecified optionName. Where optionName is the name of theoption to set and value is the value to set for the option.

optionoptionsSets one or more options for the draggable. Where options is amap of option-value pairs to set.

widgetReturns a jQuery object containing the draggable element.

#option_zIndex#action_destroy#action_disable#action_enable#action_optionName#action_option#action_optionNameValue#action_options#action_widget

Event Management on the moved elementsIn addition to the draggable options method we saw in the previous sections, JqueryUI providesevent methods as which gets triggered for a particular event. These event methods are listedbelow:

Event Method Description

createevent, uiTriggered when the draggable is created. Where event is of type Event, andui is of type Object.

dragevent, uiTriggered while the mouse is moved during the dragging. Where event is oftype Event, and ui is of type Object like helper, position, offset.

startevent, uiTriggered when dragging starts. Where event is of type Event, and ui is oftype Object like helper, position, offset.

stopevent, uiTriggered when dragging stops. Where event is of type Event, and ui is oftype Object like helper, position, offset.

JQUERYUI DROPPABLEJQUERYUI DROPPABLEjQueryUI provides droppable method to make any DOM element droppable at a specified target atarget for draggable elements.

SyntaxThe droppable method can be used in two forms:

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

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

$(selector, context).droppable (options) MethodThe droppable options method declares that an HTML element can be used as an element inwhich you can drop other elements. The options parameter is an object that specifies the behaviorof the elements involved.

Syntax

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


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


#event_create#event_drag#event_start#event_stop/jqueryui/jqueryui_quick_guide#droppable_options/jqueryui/jqueryui_quick_guide#droppable_methods

Option Description

accept This option is used when you need to control which draggable elements are to beaccepted for dropping. By default its value is *.

activeClassThis option is a String representing one or more CSS classes to be added to thedroppable element when an accepted element (one of those indicated inoptions.accept) is being dragged. By default its value is false.

addClassesThis option when set to false will prevent the ui-droppable class from being addedto the droppable elements. By default its value is true.

disabledThis option when set to true disables the droppable. By default its value is false.

greedyThis option is used when you need to control which draggable elements are to beaccepted for dropping on nested droppables. By default its value is false. If thisoption is set to true, any parent droppables will not receive the element.

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

scopeThis option is used to restrict the droppable action of draggable elements only toitems that have the same options.scope defined in draggable (options). By defaultits value is "default".

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

$(selector, context).droppable ("action", params) MethodThe droppable "action", params method can perform an action on droppable elements, such aspreventing 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

destroyThis action destroys the droppable functionality of an elementcompletely. The elements return to their pre-init state.

disableThis action disables the droppable operation. The elements are

#option_accept#option_activeClass#option_addClasses#option_disabled#option_greedy#option_hoverClass#option_scope#option_tolerance#action_destroy#action_disable

no longer droppable elements. This method does not accept anyarguments.

enableThis action reactivate the droppable operation. The elements canagain receive a droppable element. This method does not acceptany arguments.

option This action gets an object containing key/value pairsrepresenting the current droppable options hash. This methoddoes not accept any arguments.

option optionNameThis action gets the value of currently associated droppableelement with the specified optionName. This takes a String valueas argument.

option optionName, valueThis action sets the value of the droppable option associated withthe specified optionName.

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

widgetThis action returns a jQuery object containing the droppableelement. This method does not accept any arguments.

Event Management on droppable elementsIn addition to the droppable options method we saw in the previous sections, JqueryUI providesevent methods which gets triggered for a particular event. These event methods are listed below:


activateevent, uiThis event is triggered when the accepted draggable element startsdragging. This can be useful if you want to make the droppable "lightup" when it can be dropped on.

createevent, uiThis event is triggered when a droppable element is created. Whereevent is of type Event, and ui is of type Object.

deactivateevent, uiThis event is triggered when an accepted draggable stops dragging.Where event is of type Event, and ui is of type Object.

dropevent, uiThis action is triggered when an element is dropped on the droppable.This is based on the tolerance option. Where event is of type Event, andui is of type Object.

outevent, uiThis event is triggered when an accepted draggable element is

#action_enable#action_option#action_option_optionname#action_optionnamevalue#action_options#action_widget#event_activate#event_create#event_deactivate#event_drop#event_out

dragged out of the droppable. This is based on the tolerance option.Where event is of type Event, and ui is of type Object.

overevent, uiThis event is triggered when an accepted draggable element isdragged over the droppable. This is based on the tolerance option.Where event is of type Event, and ui is of type Object.

JQUERYUI RESIZABLEJQUERYUI RESIZABLEjQueryUI provides resizable method to resize any DOM element. This method simplifies the resizingof element which otherwise takes time and lot of coding in HTML. The resizable method displaysan icon in the bottom right of the item to resize.

SyntaxThe resizable method can be used in two forms:

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

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

$(selector, context).resizable (options) MethodThe resizable options method declares that an HTML element can be resized. The optionsparameter is an object that specifies the behavior of the elements involved when resizing.

Syntax

$(selector, context).resizable (options);

You can provide one or more options at a time of using Javascript object. If there are more thanone options to be provided then you will separate them using a comma as follows:

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


Option Description

alsoResizeThis option is of type Selector, jQuery , or any DOM Element. It representselements that also resize when resizing the original object. By default itsvalue is false.

animateThis option when set to true is used to enable a visual effect during resizingwhen the mouse button is released. The default value is false no effect.

animateDurationThis option is used to set the duration in milliseconds of the resizing effect.This option is used only when animate option is true. By default its value is"slow".

animateEasingThis option is used to specify which easing to apply when using the animateoption. By default its value is "swing".

#event_over/jqueryui/jqueryui_quick_guide#resizable_options/jqueryui/jqueryui_quick_guide#resizable_methods

aspectRatioThis option is used to indicate whether to keep the aspect height and widthratio for the item. By default its value is false.

autoHideThis option is used to hide the magnification icon or handles, except whenthe mouse is over the item. By default its value is false.

cancelThis option is used to prevent resizing on specified elements. By default itsvalue is input,textarea,button,select,option.

containmentThis option is used restrict the resizing of elements within a specifiedelement or region. By default its value is false.

delayThis option is used to set tolerance or delay in milliseconds. Resizing ordisplacement will begin thereafter. By default its value is 0.

disabledThis option disables the resizing mechanism when set to true. The mouse nolonger resizes elements, until the mechanism is enabled, using the resizable"enable". By default its value is false.

distanceWith this option, the resizing starts only when the mouse moves adistancepixels. By default its value is 1 pixel. This can help preventunintended resizing when clicking on an element.

ghostThis option when set to true, a semi-transparent helper element is shown forresizing. This ghost item will be deleted when the mouse is released. Bydefault its value is false.

gridThis option is of type Array [x, y], indicating the number of pixels that theelement expands horizontally and vertically during movement of the mouse.By default its value is false.

handlesThis option is a character string indicating which sides or angles of theelement can be resized. By default its values are e, s, se.

helperThis option is used to add a CSS class to style the element to be resized.When the element is resized a new element is created, which is theone that is scaled ui-resizable-helper class. Once the resize is complete, theoriginal element is sized and the element disappears. By default itsvalue is false.

maxHeightThis option is used to set the maximum height the resizable should beallowed to resize to. By default its value is null.

maxWidth

maxWidthThis option is used to set the maximum width the resizable should beallowed to resize to. By default its value is null.

minHeightThis option is used to set the minimum height the resizable should beallowed to resize to. By default its value is 10.

minWidthThis option is used to set the minimum width the resizable should be allowedto resize to. By default its value is 10.

$(selector, context).resizable ("action", params) MethodThe resizable "action", params method can perform an action on resizable elements, such asallowing or preventing resizing functionality. The action is specified as a string in the firstargument e.g., "disable" to prevent the resize. Check out the actions that can be passed, in thefollowing table.

Syntax

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


Action Description

destroyThis action destroys the resizable functionality of an elementcompletely. This will return the element back to its pre-init state.

disableThis action disables the resizing functionality of an element. Thismethod does not accept any arguments.

enableThis action enables the resizing functionality of an element. Thismethod does not accept any arguments.

option optionNameThis action retrieves the value of the specified optionName. Thisoption corresponds to one of those used with resizable options.

optionGets an object containing key/value pairs representing thecurrent resizable options hash. This does not accept anyarguments.

optionoptionName, valueThis action sets the value of the resizable option with thespecified optionName. This option corresponds to one of thoseused with resizable options.

option optionsThis action sets one or more options for the resizable.

widgetThis action returns a jQuery object containing the resizableelement. This method does not accept any arguments.

Event Management on resizable elementsIn addition to the resizable options method we saw in the previous sections, JqueryUI providesevent methods which gets triggered for a particular event. These event methods are listed below:


createevent, uiThis event is triggered when the resizable element is created.

resizeevent, uiThis event is triggered when the handler of resizable element isdragged.

startevent, uiThis event is triggered at the start of a resize operation.

stopevent, uiThis event is triggered at the end of a resize operation.

JQUERYUI SELECTABLEJQUERYUI SELECTABLEjQueryUI provides selectable method to select DOM element individually or in a group. With thismethod elements can be selected by dragging a box sometimes called a lasso with the mouseover the elements. Also, elements can be selected by clicking or dragging while holding theCtrl/Meta key, allowing for multiple non-contiguous selections.

SyntaxThe selectable method can be used in two forms:

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

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

$(selector, context).selectable (options) MethodThe selectable options method declares that an HTML element contains selectable items. Theoptions parameter is an object that specifies the behavior of the elements involved whenselecting.

Syntax

$(selector, context).selectable (options);


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


/jqueryui/jqueryui_quick_guide#selectable_options/jqueryui/jqueryui_quick_guide#selectable_methods

Option Description

appendToThis option is tells which element the selection helper the lasso should beappended to. By default its value is body.

autoRefreshThis option if set to true, the position and size of each selectable item iscomputed at the beginning of a select operation. By default its value is true.

cancelThis option forbids selecting if you start selection of elements. By default its valueis input,textarea,button,select,option.

delayThis option is used to set time in milliseconds and defines when the selectingshould start. This can be used to prevent unwanted selections. By default itsvalue is 0.

disabledThis option when set to true, disables the selection mechanism. Users cannotselect the elements until the mechanism is restored using the selectable"enable" instruction. By default its value is false.

distanceThis option is the distance in pixels the mouse must move to consider theselection in progress. This is useful, for example, to prevent simple clicks frombeing interpreted as a group selection. By default its value is 0.

filterThis option is a selector indicating which elements can be part of the selection.By default its value is *.

toleranceThis option specifies which mode to use for testing whether the selection helperthe lasso should select an item. By default its value is touch.

$(selector, context).selectable ("action", params) MethodThe selectable "action", params method can perform an action on selectable elements, such aspreventing selectable functionality. The action is specified as a string in the first argument e.g.,"disable" to stop the selection. Check out the actions that can be passed, in the following table.

Syntax

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


Action Description

destroyThis action removes the selectable functionality of an elementcompletely. The elements return to their pre-init state.

#option_appendTo#option_autoRefresh#option_cancel#option_delay#option_disabled#option_distance#option_filter#option_tolerance#action_destroy

disableThis action deactivates the selectable functionality of anelement. This method does not accept any arguments.

enableThis action enables the selectable functionality of an element.This method does not accept any arguments.

option optionNameThis action gets the value currently associated with the specifiedoptionName.

optionThis action gets an object containing key/value pairsrepresenting the current selectable options hash.

option optionName, valueThis action sets the value of the selectable option associated withthe specified optionName. The argument optionName is name ofthe option to be set and value is the value to be set for the option.

option optionsThis action is sets one or more options for the selectable. Theargument options is a map of option-value pairs to be set.

refreshThis action causes the size and position of the selectableelements to be refreshed. Used mostly when the autoRefreshoption is disabled (set to false). This method does not accept anyarguments.

widgetThis action returns a jQuery object containing the selectableelement. This method does not accept any arguments.

Event Management on selectable elementsIn addition to the selectable options method we saw in the previous sections, JqueryUI providesevent methods which gets triggered for a particular event. These event methods are listed below:


createevent, uiThis event is triggered when the selectable element is created. Whereevent is of type Event, and ui is of type Object.

selectedevent, uiThis event is triggered for each element that becomes selected. Whereevent is of type Event, and ui is of type Object.

selectingevent, uiThis event is triggered for each selectable element that’s about to getselected. Where event is of type Event, and ui is of type Object.

startevent, ui

#action_disable#action_enable#action_optionname#action_option#action_optionname_value#action_options#action_refresh#action_widget#event_create#event_selected#event_selecting#event_start

startevent, uiThis event is triggered at the beginning of the select operation. Whereevent is of type Event, and ui is of type Object.

stopevent, uiThis event is triggered at the end of the select operation. Where eventis of type Event, and ui is of type Object.

unselectedevent, uiThis event is triggered at the end of the select operation for eachelement that becomes unselected. Where event is of type Event, and uiis of type Object.

unselectingevent, uiThis event is triggered during select operation for each selectedelement that’s about to become unselected. Where event is of typeEvent, and ui is of type Object.

JQUERYUI SORTABLEJQUERYUI SORTABLEjQueryUI provides sortable method to reorder elements in list or grid using the mouse. Thismethod performs sortability action based upon an operation string passed as the first parameter.

SyntaxThe sortable method can be used in two forms:

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

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

$(selector, context).sortable (options) MethodThe sortable options method declares that an HTML element contains interchangeable elements.The options parameter is an object that specifies the behavior of the elements involved duringreordering.

Syntax

$(selector, context).sortable(options);


Option Description

appendToThis option specifies the element in which the new element created withoptions.helper will be inserted during the time of the move/drag. Bydefault its value is parent.

axisThis option indicates an axis of movement "x" is horizontal, "y" isvertical. By default its value is false.

cancelThis option is used to prevent sorting of elements by clicking on any ofthe selector elements. By default its value is"input,textarea,button,select,option".

#event_stop#event_unselected#event_unselecting/jqueryui/jqueryui_quick_guide#sortable_options/jqueryui/jqueryui_quick_guide#sortable_methods#option_appendTo#option_axis#option_cancel

connectWithThis option is a Selector that identifies another sortable element thatcan accept items from this sortable. This allows items from one list to bemoved to other lists, a frequent and useful user interaction. If omitted,no other element is connected. This is a one-way relationship. By defaultits value is false.

containmentThis option indicates an element within which the displacement takesplace. The element will be represented by a selector only the first itemin the list will be considered, a DOM element, or the string "parent"parent element or "window" HTML page.

cursorSpecifies the cursor CSS property when the element moves. Itrepresents the shape of the mouse pointer. By default its value is "auto".

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

delayDelay, in milliseconds, after which the first movement of the mouse istaken into account. The displacement may begin after that time. Bydefault its value is "0".

disabledThis option if set to true, disables the sortable functionality. By default itsvalue is false.

distanceNumber of pixels that the mouse must be moved before the sortingstarts. If specified, sorting will not start until after mouse is draggedbeyond distance. By default its value is "1".

dropOnEmptyThis option if set to false, then items from this sortable can't be droppedon an empty connect sortable. By default its value is true.

forceHelperSizeIf this option if set to true forces the helper to have a size. By default itsvalue is false.

forcePlaceholderSizeThis option when set to true, takes into account the size of theplaceholder when an item is moved. This option is only useful ifoptions.placeholder is initialized. By default its value is false.

gridThis option is an Array [x, y] indicating the number of pixels that thesorting element moves horizontally and vertically during displacementof the mouse. By default its value is false.

handleIf specified, restricts sort from starting unless the mousedown occurs on

#option_connectWith#option_containment#option_cursor#option_cursorAt#option_delay#option_disabled#option_distance#option_dropOnEmpty#option_forceHelperSize#option_forcePlaceholderSize#option_grid#option_handle

the specified elements. By default its value is false.

helperAllows for a helper element to be used for dragging display. By defaultits value is original.

itemsThis option specifies which items inside the DOM element to be sorted.By default its value is > *.

opacityThis option is used to define the opacity of the helper while sorting. Bydefault its value is false.

placeholderThis option is used to class name that gets applied to the otherwisewhite space.By default its value is false.

revertThis option decides whether the sortable items should revert to theirnew positions using a smooth animation. By default its value is false.

scrollThis option is used to enable scrolling. If set to true the page scrollswhen coming to an edge. By default its value is true.

scrollSensitivityThis option indicates how many pixels the mouse must exit the visiblearea to cause scrolling. By default its value is 20. This option is usedonly with options.scroll set to true.

scrollSpeedThis option indicates the scrolling speed of the display once the scrollingbegins. By default its value is 20.

toleranceThis option is a String that specifies which mode to use for testingwhether the item being moved is hovering over another item. By defaultits value is "intersect".

zIndexThis option represents z-index for element/helper while being sorted. Bydefault its value is 1000.

$(selector, context).sortable ("action", [params]) MethodThe sortable action, params method can perform an action on the sortable elements, such as toprevent displacement. The action is specified as a string in the first argument and optionally, oneor more params can be provided based on the given action.

Basically, here actions are nothing but they are jQuery methods which we can use inthe form of string.

#option_helper#option_items#option_opacity#option_placeholder#option_revert#option_scroll#option_scrollSensitivity#option_scrollSpeed#option_tolerance#option_zIndex

Syntax

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


Action Description

cancelThis action cancels the current sort operation. This is most usefulwithin handlers for the sort receive and sort stop events. Thismethod does not accept any arguments.

destroyThis action removes the sortability functionality completely. Thiswill return the element back to its pre-init state. This method doesnot accept any arguments.

disableThis action disables the sortability of any sortable elements in thewrapped set. The sortability of the elements isn’t removed andcan be restored by calling the enable variant of this method. Thismethod does not accept any arguments.

enableRe-enables sortability on any sortable elements in the wrappedset whose sortability has been disabled. Note that this methodwon’t add sortability to any non-sortable elements. This methoddoes not accept any arguments.

option optionNameThis action gets the value currently associated with the specifiedoptionName. Where optionName is the name of the option to get.

optionGets an object containing key/value pairs representing thecurrent sortable options hash.. This method does not accept anyarguments.

option optionName, valueThis action sets the value of the sortable option associated withthe specified optionName. Where optionName is the name of theoption to set and value is the value to set for the option.

option optionsSets one or more options for the sortable. Where options is amap of option-value pairs to set.

refreshThis action refreshes the list of items if necessary. This methoddoes not accept any arguments. Calling this method will causenew items added to the sortable to be recognized.

toArray optionsThis method returns an array of the id values of the sortableelements in sorted order. This method takes Options asparameter, to customize the serialization or sorted order.

#action_cancel#action_destroy#action_disable#action_enable#action_optionName#action_option#action_optionName_value#action_options#action_refresh#action_toArray

serialize optionsThis method returns a serialized query string submittable via Ajaxformed from the sortable.

refreshPositionsThis method is used mostly internally to refresh the cachedinformation of the sortable. This method does not accept anyarguments.

widgetThis method returns a jQuery object containing the sortableelement. This method does not accept any arguments.

Event Management on the sortable elementsIn addition to the sortable options method we saw in the previous sections, JqueryUI provides eventmethods as which gets triggered for a particular event. These event methods are listed below:


activateevent, uiThis event is triggered on the sortable when a sort operation starts onconnected sortable.

beforeStopevent, uiThis event is triggered when the sort operation is about to end, with thehelper and placeholder element reference still valid.

changeevent, uiThis event is triggered when the sorted element changes positionwithin the DOM.

createevent, uiThis event is triggered when the sortable is created.

deactivateevent, uiThis event is triggered when a connected sort stops, propagated to theconnected sortable.

outevent, uiThis event is triggered when the sort item is moved away from aconnected list.

overevent, uiThis event is triggered when a sort item moves into a connected list.

receiveevent, uiThis event is triggered when a connected list has received a sort itemfrom another list.

removeevent, uiThis event is triggered when the sort item is removed from a connectedlist and is dragged into another.

#action_serialize#action_refreshPositions#action_widget#event_activate#event_beforeStop#event_change#event_create#event_deactivate#event_out#event_over#event_receive#event_remove

sortevent, uiThis event is repeatedly triggered for mousemove events during a sortoperation.

startevent, uiThis event is triggered when a sort operation starts.

stopevent, uiThis event is triggered when a sort operation has concluded.

updateevent, uiThis event is triggered when a sort operation stops and the position ofthe item has been changed.

JQUERYUI ACCORDIONJQUERYUI ACCORDIONAccordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that isbroken into sections and probably looks like tabs. jQueryUI provides accordion method to achievethis.

SyntaxThe accordion method can be used in two forms:

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

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

$(selector, context).accordion (options) MethodThe accordion options method declares that an HTML element and its contents should be treatedand managed as accordion menus. The options parameter is an object that specifies theappearance and behavior of the menu involved.

Syntax

$(selector, context).accordion (options);


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


Option Description

activeIndicates the index of the menu that is open when the page is first accessed. Bydefault its value is 0, i.e the first menu.

animateThis option is used to set how to animate changing panels. By default its value is{}.

collapsible

#event_sort#event_start#event_stop#event_update/jqueryui/jqueryui_quick_guide#accordion_options/jqueryui/jqueryui_quick_guide#accordion_methods#option_active#option_animate#option_collapsible

collapsibleThis option when set to true, it allows users to close a menu by clicking on it. Bydefault, clicks on the open panel’s header have no effect. By default its value isfalse.

disabledThis option when set to true disables the accordion. By default its value is false.

eventThis option specifies the event used to select an accordion header. By default itsvalue is click.

headerThis option specifies a selector or element to override the default pattern foridentifying the header elements. By default its value is > li > :first-child,>:notli:even.

heightStyleThis option is used to control the height of accordion and panels. By default itsvalue is auto.

iconsThis option is an object that defines the icons to use to the left of the header textfor opened and closed panels. The icon to use for closed panels is specified as aproperty named header, whereas the icon to use for open panels is specified as aproperty named headerSelected. By default its value is { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }.

$(selector, context).accordion ("action", params) MethodThe accordion "action", params method can perform an action on accordion elements, such asselecting/de-selecting the accordion menu. The action is specified as a string in the first argumente.g., "disable" disables all menus. Check out the actions that can be passed, in the following table.

Syntax

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


Action Description

destroyThis action destroys the accordion functionality of an elementcompletely. The elements return to their pre-init state.

disableThis action disable all menus. No click will be taken into account.This method does not accept any arguments.

enableThis action reactivate all menus. The clicks are again considered.This method does not accept any arguments.

option optionNameThis action gets the value of currently associated accordion

#option_disabled#option_event#option_header#option_heightStyle#option_icons#action_destroy#action_disable#action_enable#action_optionName

element with the specified optionName. This takes a String valueas argument.

optionThis action gets an object containing key/value pairsrepresenting the current accordion options hash.

option optionName, valueThis action sets the value of the accordion option associated withthe specified optionName.

option optionsThis action sets one or more options for the accordion.

refreshThis action processes any headers and panels that were added orremoved directly in the DOM. It then recomputes the height ofthe accordion panels. Results depend on the content and theheightStyle option. This method does not accept any arguments.

widgetThis action returns the accordion widget element; the oneannotated with the ui-accordion class name.

Event Management on accordion elementsIn addition to the accordion options method we saw in the previous sections, JqueryUI providesevent methods which gets triggered for a particular event. These event methods are listed below:


activateevent, uiThis event is triggered when a menu is activated. This event is onlyfired on panel activation, it is not fired for the initial panel when theaccordion widget is created.

beforeActivateevent, uiThis event is triggered before a panel is activated. This event can becanceled to prevent the panel from activating.

createevent, uiThis event is triggered when the accordion is created.

JQUERYUI AUTOCOMPLETEJQUERYUI AUTOCOMPLETEAutocompletion is a mechanism frequently used in modern websites to provide the user with a listof suggestions for the beginning of the word he has typed in a text box. The user can then selectan item from the list, which will be displayed in the input field. This feature prevents the user fromhaving to enter an entire word or a set of words.

jQueryUI provides an autocomplete widget—a control that acts a lot like a dropdown, butfilters the choices to present only those that match what the user is typing into a control. jQueryUIprovides the autocomplete method to create a list of suggestions below the input field and addsnew CSS classes to the elements concerned to give them the appropriate style.

#action_option#action_optionName_value#action_options#action_refresh#action_widget#event_activate#event_beforeActivate#event_create

Any field that can receive input can be converted into an Autocomplete, namely, elements, elements, and elements with the contenteditable attribute.

SyntaxThe autocomplete method can be used in two forms:

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

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

$(selector, context).autocomplete (options) MethodThe autocomplete options method declares that an HTML element must be managed asan input field that will be displayed above a list of suggestions. The options parameter is an objectthat specifies the behavior of the list of suggestions when the user is typing in the input field.

Syntax

$(selector, context).autocomplete (options);


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


Option Description

appendToThis option is used append an element to the menu. By default its value is null.

autoFocusThis option when set to true, the first item of the menu will automatically befocused when the menu is shown. By default its value is false.

delayThis option is an Integer representing number of milliseconds to wait before tryingto obtain the matching values (as specified by the source option). This can helpreduce thrashing when non-local data is being obtained by giving the user time toenter more characters before the search is initiated. By default its value is 300.

disabledThis option if specified and true, the autocomplete widget is initially disabled. Bydefault its value is false.

minLengthThe number of characters that must be entered before trying to obtain thematching values as specified by the source option. This can prevent too large avalue set from being presented when a few characters isn’t enough to whittle theset down to a reasonable level. By default its value is 1.

positionThis option identifies the position of the suggestions menu in relation to theassociated input element. The of option defaults to the input element, but you canspecify another element to position against. By default its value is { my: "lefttop", at: "left bottom", collision: "none" }.

/jqueryui/jqueryui_quick_guide#autocomplete_options/jqueryui/jqueryui_quick_guide#autocomplete_methods#option_appendTo#option_autoFocus#option_delay#option_disabled#option_minLength#option_position

sourceThis option specifies the manner in which the data that matches the input data isobtained. A value must be provided or the autocomplete widget won’t becreated..By default its value is none; must be specified.

$(selector, context).autocomplete ("action", params) MethodThe autocomplete "action", params method can perform an action on the list of suggestions, suchas show or hide. The action is specified as a String in the first argument e.g., "close" to hide the list.Check out the actions that can be passed, in the following table.

Syntax

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


Action Description

closeThis action hides the list of suggestions in the Autocompletemenu. This method does not accept any arguments.

destroyThis action removes the autocomplete functionality. Lists ofsuggestions are deleted. This method does not accept anyarguments.

disableThis action disables the autocompletion mechanism. The list ofsuggestions no longer appears. This method does not accept anyarguments.

enableThis action reactivates the autocompletion mechanism. The listof suggestions will again be displayed. This method does notaccept any arguments.

option optionNameThis action retrieves the value of the specified paramoptionName. This option corresponds to one of those used withautocomplete options.

optionThis action gets an object containing key/value pairsrepresenting the current autocomplete options hash.

option optionName, valueThis action sets the value of the autocomplete option associatedwith the specified optionName. The argument optionName isname of the option to be set and value is the value to be set forthe option.

option optionsThis action is sets one or more options for the autocomplete. Theargument options is a map of option-value pairs to be set.

#option_source#action_close#action_destroy#action_disable#action_enable#action_optionName#action_option#action_optionName_value#action_options

search [value ]This action searches for correspondence between the stringvalue and the data source (specified in options.source). Theminimum number of characters (indicated in options.minLength)must be reached in value, otherwise the search is not performed.

widgetRetrieve the DOM element corresponding to the list ofsuggestions. This is an object of jQuery class that allows easyaccess to the list without using jQuery selectors.

Extension PointsThe autocomplete widget can be extended as its built with the widget factory. When extendingwidgets, you have the ability to override or add to the behavior of existing methods. The followingtable lists methods that act as extension points with the same API stability as the plugin methodslisted above.

Method Description

_renderItem ul, itemThis method controls the creation of each option in the widget's menu.This method creates a new element, appends it to the menu andreturn it.

_renderMenu ul,items This method controls building the widget's menu.

_resizeMenuThis method controls sizing the menu before it is displayed.The menuelement is available at this.menu.element. This method does notaccept any arguments.

Event Management on autocomplete elementsIn addition to the autocomplete options method we saw in the previous sections, JqueryUI providesevent methods which gets triggered for a particular event. These event methods are listed below:


changeevent, uiThis event is triggered when the value of the element ischanged based upon a selection. When triggered, this event will alwayscome after the close event is triggered.

closeevent, uiThis event is triggered whenever the autocomplete menu closes.

createevent, uiThis event is triggered when the autocomplete is created.

focusevent, uiThis event is triggered whenever one of the menu choices receives

#action_search#action_widget/jqueryui/jqueryui_quick_guide#autocomplete_methods#extension_renderItem#extension_renderMenu#extension_resizeMenu#event_change#event_close#event_create#event_focus

focus. Unless canceled for example, by returning false, the focusedvalue is set into the element.

openevent, uiThis event is triggered after the data has been readied and the menu isabout to open.

responseevent, uiThis event is triggered after a search completes, before the menu isshown. This event is always triggered when a search completes, even ifthe menu will not be shown because there are no results or theAutocomplete is disabled.

searchevent, uiThis event is triggered after any delay and minLength criteria havebeen met, just before the mechanism specified by source is activated.If canceled, the search operation is aborted.

selectevent, uiThis event is triggered when a value is selected from the autocompletemenu. Canceling this event prevents the value from being set into the element but doesn’t prevent the menu from closing.

JQUERYUI BUTTONJQUERYUI BUTTONjQueryUI provides button method to transform the HTML elements like buttons, inputs and anchorsinto themeable buttons, with automatic management of mouse movements on them, all managedtransparently by jQuery UI.

In order to group radio buttons, Button also provides an additional widget, called Buttonset.Buttonset is used by selecting a container element which contains the radio buttons and calling.buttonset.

SyntaxThe button method can be used in two forms:

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

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

$(selector, context).button (options) MethodThe button options method declares that an HTML element should be treated as button. Theoptions parameter is an object that specifies the behavior and appearance of the button.

Syntax

$(selector, context).button (options);


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


#event_open#event_response#event_search#event_select/jqueryui/jqueryui_quick_guide#button_options/jqueryui/jqueryui_quick_guide#button_methods

Option Description

disabledThis option deactivates the button is set to true. By default its value is false.

iconsThis option specifies that one or two icons are to be displayed in the button: primaryicons to the left, secondary icons to the right. The primary icon is identified by theprimary property of the object, and the secondary icon is identified by the secondaryproperty. By default its value is primary: null, secondary: null.

labelThis option specifies text to display on the button that overrides the natural label. Ifomitted, the natural label for the element is displayed. In the case of radio buttonsand checkboxes, the natural label is the element associated with thecontrol. By default its value is null.

textThis option specifies whether text is to be displayed on the button. If specified asfalse, text is suppressed if and only if the icons option specifies at least one icon. Bydefault its value is true.

$(selector, context).button ("action", params) MethodThe button "action", params method can perform an action on buttons, such as disabling thebutton. The action is specified as a string in the first argument e.g., "disable" to disable button.Check out the actions that can be passed, in the following table.

Syntax

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


Action Description

destroyThis action removes the button functionality of an elementcompletely. The elements return to their pre-init state. Thismethod does not accept any arguments.

disableThis action disables the button functionality of an element. Thismethod does not accept any arguments.

enableThis action enables the button functionality of an element. Thismethod does not accept any arguments.

option optionNameThis action retrieves the value of the option specified inoptionName. Where optionName is a String.

optionThis action retrieves an object containing key/value pairsrepresenting the current button options hash.

#option_disabled#option_icons#option_label#option_text#action_destroy#action_disable#action_enable#action_optionName#action_option

option optionName, valueThis action sets the value of the button option associated with thespecified optionName.

option optionsThis action sets one or more options for the button. Whereoptions is map of option-value pairs to set.

refreshThis action refreshes the display of the button. This is useful whenthe buttons are handled by the program and the display does notnecessarily correspond to the internal state. This method doesnot accept any arguments.

widgetThis action returns a jQuery object containing the buttonelement. This method does not accept any arguments.

Event Management on buttonsIn addition to the button options method we saw in the previous sections, JqueryUI provides eventmethods which gets triggered for a particular event. These event methods are listed below:


createevent, uiThis event is triggered when the button is created. Where event is oftype Event, and ui is of type Object.

JQUERYUI DATEPICKERJQUERYUI DATEPICKERDatepickers in jQueryUI allow users to enter dates easily and visually. You can customize the dateformat and language, restrict the selectable date ranges and add in buttons and other navigationoptions easily.

jQueryUI provides datepicker method that creates a datepicker and changes the appearance ofHTML elements on a page by adding new CSS classes. Transforms the , , and elements in the wrapped set into a datepicker control.

By default, for elements, the datepicker calendar opens in a small overlaywhen the associated text field gains focus. For an inline calendar, simply attach thedatepicker to a , or element.

SyntaxThe datepicker method can be used in two forms:

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

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

$(selector, context).datepicker (options) MethodThe datepicker options method declares that an element or , or ,

#action_optionName_value#action_options#action_refresh#action_widget#event_create/jqueryui/jqueryui_quick_guide#datepicker_options/jqueryui/jqueryui_quick_guide#datepicker_methods

depending on how you choose to display the calendar should be managed as a datepicker. Theoptions parameter is an object that specifies the behavior and appearance of the datepickerelements.

Syntax

$(selector, context).datepicker(options);


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


Option Description

altFieldThis option specifies a jQuery selector for a field that is also updatedwith any date selections. The altFormat option can be used to set theformat for this value. This is quite useful for setting date values intoa hidden input element to be submitted to the server, whiledisplaying a more user-friendly format to the user. By default itsvalue is "".

altFormatThis option is used when an altField option is specified. It providesthe format for the value to be written to the alternate element. Bydefault its value is "".

appendTextThis option is a String value to be placed after the element,intended to show instructions to the user. By default its value is "".

autoSizeThis option when set to true resizes the element toaccommodate the datepicker’s date format as set with thedateFormat option. By default its value is false.

beforeShowThis option is a callback function that’s invoked just before adatepicker is displayed, with the element and datepickerinstance passed as parameters. This function can return an optionshash used to modify the datepicker. By default its value is "".

beforeShowDayThis option is a callback function which takes a date as parameter,that’s invoked for each day in the datepicker just before it’sdisplayed, with the date passed as the only parameter. This can beused to override some of the default behavior of the day elements.This function must return a three-element array.By default its valueis null.

buttonImageThis option specifies the path to an image to be displayed on thebutton enabled by setting the showOn option to one of buttons orboth. If buttonText is also provided, the button text becomes the altattribute of the button. By default its value is "".

#option_altField#option_altFormat#option_appendText#option_autoSize#option_beforeShow#option_beforeShowDay#option_buttonImage

buttonImageOnlyThis option if set to true, specifies that the image specified bybuttonImage is to appear standalone not on a button. The showOnoption must still be set to one of button or both for the image toappear. By default its value is false.

buttonTextThis option specifies the caption for the button enabled by settingthe showOn option to one of button or both. By default its value is"...".

calculateWeekThis option is a custom function to calculate and return the weeknumber for a date passed as the lone parameter. The defaultimplementation is that provided by the $.datepicker.iso8601Week()utility function.

changeMonthThis option if set to true, a month dropdown is displayed, allowingthe user to directly change the month without using the arrowbuttons to step through them. By default its value is false.

changeYearThis option if set to true, a year dropdown is displayed, allowing theuser to directly change the year without using the arrow buttons tostep through them. Option yearRange can be used to control whichyears are made available for selection. By default its value is false.

closeTextThis option specifies the text to replace the default caption of Donefor the close button. It is used when the button panel is displayed viathe showButtonPanel option. By default its value is "Done".

constrainInputThis option if set true the default, text entry into the element is constrained to characters allowed by the currentdateformat option. By default its value is true.

currentTextThis option specifies the text to replace the default caption of Todayfor the current button. This is used if the button panel is displayedvia the showButtonPanel option. By default its value is Today.

dateFormatThis option specifies the date format to be used. By default its valueis mm/dd/yy.

dayNamesThis option is a 7-element array providing the full day names withthe 0th element representing Sunday. Can be used to localize thecontrol. By default its value is [ "Sunday", "Monday", "Tuesday","Wednesday", "Thursday", "Friday", "Saturday" ].

dayNamesMinThis option is a 7-element array providing the minimal day nameswith the 0th element representing Sunday, used as column headers.Can be used to localize the control. By default its value is [ "Su",

#option_buttonImageOnly#option_buttonText#option_calculateWeek#option_changeMonth#option_changeYear#option_closeText#option_constrainInput#option_currentText#option_dateFormat#option_dayNames#option_dayNamesMin

"Mo", "Tu", "We", "Th", "Fr", "Sa" ].

dayNamesShortThis option specifies a 7-element array providing the short daynames with the 0th element representing Sunday. Can be used tolocalize the control. By default its value is [ "Sun", "Mon", "Tue","Wed", "Thu", "Fri", "Sat" ].

defaultDateThis option sets the initial date for the control, overriding the defaultvalue of today, if the element has no value. This can be aDate instance, the number of days from today, or a string specifyingan absolute or relative date. By default its value is null.

durationThis option specifies the speed of the animation that makes thedatepicker appear. Can be one of slow, normal, or fast, or thenumber of milliseconds for the animation to span. By default itsvalue is normal.

firstDayThis option specifies which day is considered the first day of theweek, and will be displayed as the left-most column. By default itsvalue is 0.

gotoCurrentThis option when set to true, the current day link is set to theselected date, overriding the default of today. By default its value isfalse.

hideIfNoPrevNextThis option if set to true, hides the next and previous links asopposed to merely disabling them when they aren’t applicable, asdetermined by the settings of the minDate and maxDate options. Bydefault its value is false.

isRTLThis option when set to true, specifies the localizations as a right-to-left language. By default its value is false.

maxDateThis option sets the maximum selectable date for the control. Thiscan be a Date instance, the number of days from today, or a stringspecifying an absolute or relative date. By default its value is null.

minDateThis option sets the minimum selectable date for the control. Thiscan be a Date instance, the number of days from today, or a stringspecifying an absolute or relative date. By default its value is null.

monthNamesThis option is a 12-element array providing the full month nameswith the 0th element representing January. Can be used to localizethe control. By default its value is [ "January", "February","March", "April", "May", "June", "July", "August", "September","October", "November", "December" ].

#option_dayNamesShort#option_defaultDate#option_duration#option_firstDay#option_gotoCurrent#option_hideIfNoPrevNext#option_isRTL#option_maxDate#option_minDate#option_monthNames

monthNamesShortThis option specifies a 12-element array providing the short monthnames with the 0th element representing January. Can be used tolocalize the control. By default its value is [ "Jan", "Feb", "Mar","Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ].

navigationAsDateFormatThis option if set to true, the navigation links for nextText, prevText,and currentText are passed through the $.datepicker.formatDate()function prior to display. This allows date formats to be supplied forthose options that get replaced with the relevant values. By defaultits value is false.

nextTextThis option specifies the text to replace the default caption of Nextfor the next month navigation link. ThemeRoller replaces this textwith an icon. By default its value is Next.

numberOfMonthsThis option specifies the number of months to show in thedatepicker. By default its value is 1.

onChangeMonthYearThis option is a callback that’s invoked when the datepicker movesto a new month or year, with the selected year, month 1-based, anddatepicker instance passed as parameters, and the function contextis set to the input field element. By default its value is null.

onCloseThis option is a callback invoked whenever a datepicker is closed,passed the selected date as text the empty string if there is noselection, and the datepicker instance, and the function context isset to the input field element. By default its value is null.

onSelectThis option is a callback invoked whenever a date is selected,passed the selected date as text the empty string if there is noselection, and the datepicker instance, and the function context isset to the input field element. By default its value is null.

prevTextThis option specifies the text to replace the default caption of Prevfor the previous month navigation link. Note that the ThemeRollerreplaces this text with an icon. By default its value isPrevdefaultDatedayNamesMin.

selectOtherMonthsThis option if set to true, days shown before or after the displayedmonths are selectable. Such days aren’t displayed unless theshowOtherMonths option is true. By default its value is false.

shortYearCutoffThis option if its a number, specifies a value between 0 and 99 yearsbefore which any 2-digit year values will be considered to belong tothe previous century. If this option is a string, the value undergoes anumeric conversion and is added to the current year. The default is+10 which represents 10 years from the current year.

#option_monthNamesShort#option_navigationAsDateFormat#option_nextText#option_numberOfMonths#option_onChangeMonthYear#option_onClose#option_onSelect#option_prevText#option_selectOtherMonths#option_shortYearCutoff

showAnimThis option specifies sets the name of the animation to be used toshow and hide the datepicker. If specified, must be one of show thedefault, fadeIn, slideDown, or any of the jQuery UI show/hideanimations. By default its value is show.

showButtonPanelThis option if set to true, a button panel at the bottom of thedatepicker is displayed, containing current and close buttons. Thecaption of these buttons can be provided via the currentText andcloseText options. By default its value is false.

showCurrentAtPosThis option specifies the 0-based index, starting at the upper left, ofwhere the month containing the current date should be placedwithin a multi-month display. By default its value is 0.

showMonthAfterYearThis option specifies if set to true, the positions of the month andyear are reversed in the header of the datepicker. By default itsvalue is false.

showOnThis option specifies when the datepicker should appear. Thepossible values are focus, button or both. By default its value isfocus.

showOptionsThis option provides a hash to be passed to the animation when ajQuery UI animation is specified for the showAnim option. By defaultits value is {}.

showOtherMonthsThis option if set to true, dates before or after the first and last daysof the current month are displayed. These dates aren't selectableunless the selectOtherMonths option is also set to true. By default itsvalue is false.

showWeekThis option if set to true, the week number is displayed in a columnto the left of the month display. The calculateWeek option can beused to alter the manner in which this value is determined. Bydefault its value is false.

stepMonthsThis option specifies specifies how many months to move when oneof the month navigation controls is clicked. By default its value is 1.

weekHeaderThis option specifies the text to display for the week number column,overriding the default value of Wk, when showWeek is true. Bydefault its value is Wk.

yearRangeThis option specifies limits on which years are displayed in thedropdown in the form from:to when changeYear is true. The valuescan be absolute or relative for example: 2005:+2, for 2005 through2 years from now. The prefix c can be used to make relative values

#option_showAnim#option_showButtonPanel#option_showCurrentAtPos#option_showMonthAfterYear#option_showOn#option_showOptions#option_showOtherMonths#option_showWeek#option_stepMonths#option_weekHeader#option_yearRange

offset from the selected year rather than the current year example:c-2:c+3. By default its value is c-10:c+10.

yearSuffixThis option displays additional text after the year in the datepickerheader. By default its value is "".

$(selector, context).datepicker ("action", [params]) MethodThe datepicker action, params method can perform an action on the calendar, such as such asselecting a new date. The action is specified as a string in the first argument and optionally, oneor more params can be provided based on the given action.

Basically, here actions are nothing but they are jQuery methods which we can use inthe form of string.

Syntax

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


Action Description

destroyThis action removes the datepicker functionality completely. Thiswill return the element back to its pre-init state. This method doesnot accept any arguments.

dialog date [, onSelect ] [,settings ] [, pos ] This action displays datepicker in a jQuery UI dialog box .

getDateThis action returns the Date corresponding to the selected date.This method does not accept any arguments.

hideThis action closes the previously opened date picker. This methoddoes not accept any arguments.

isDisabledThis action checks if the date picker funcitonality is disabled. Thismethod does not accept any arguments.

option optionNameThis action retrieves the value currently associated with thespecified optionName.

optionThis action gets an object containing key/value pairs representingthe current datepicker options hash. This method does not acceptany arguments.

#option_yearSuffix#action_destroy#action_dialog#action_getDate#action_hide#action_isDisabled#action_optionName#action_option

option optionName, valueThis action sets the value of the datepicker option associated withthe specified optionName.

option optionsThis action sets one or more options for the datepicker.

refreshThis action redraws the date picker, after having made someexternal modifications. This method does not accept anyarguments.

setDate dateThis action sets the specified date as the current date of thedatepicker.

showThis action opens the date picker. If the datepicker is attached toan input, the input must be visible for the datepicker to be shown.This method does not accept any arguments.

widgetThis action returns a jQuery object containing the datepicker.

JQUERYUI SPINNERJQUERYUI SPINNERSpinner widget adds a up/down arrow to the left of a input box thus allowing a user toincrement/decrement a value in the input box. It allows users to type a value directly, or modify anexisting value by spinning with the keyboard, mouse or scrollwheel. It also has a step feature toskip values. In addition to the basic numeric features, it also enables globalized formatting optionsie currency, thousand separator, decimals, etc. thus providing a convenient internationalizedmasked entry box.

The following example depends on Globalize. You can get the Globalize files fromhttps://github.com/jquery/globalize. Click the releases link, select the version youwant, and download the .zip or tar.gz file. Extract the files and copy the following filesto the folder where your example is located.

lib/globalize.js : This file contains the Javascript code for dealing withlocalizations

lib/globalize.culture.js : This file contains a complete set of the locales that theGlobalize library comes with.

These files are also present in the external folder of your jquery-ui library.

jQueryUI provides spinner method which creates a spinner.

SyntaxThe spinner method can be used in two forms:

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

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

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

#action_optionName_value#action_options#action_refresh#action_setDate#action_show#action_widgethttps://github.com/jquery/globalize/jqueryui/jqueryui_quick_guide#spinner_options/jqueryui/jqueryui_quick_guide#spinner_methods

The spinner options method declares that an HTML element and its contents should be treated andmanaged as spinner. The options parameter is an object that specifies the appearance andbehavior of the spinner elements involved.

Syntax

$(selector, context).spinner (options);


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


Option Description

cultureThis option sets the culture to use for parsing and formatting the value. Bydefault its value is null which means the currently set culture in Globalize isused.

disabledThis option if set to true disables spinner. By default its value is false.

iconsThis option sets icons to use for buttons, matching an icon provided by thejQuery UI CSS Framework. By default its value is { down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" } .

incrementalThis option controls the number of steps taken when holding down a spinbutton. By default its value is true.

maxThis option indicates the maximum allowed value. By default its value is nullwhich means there is no maximum enforced.

minThis option indicates the minimum allowed value. By default its value is nullwhich means there is no minimum enforced.

numberFormatThis option indicates format of numbers passed to Globalize, if available. Mostcommon are "n" for a decimal number and "C" for a currency value. Bydefault its value is null.

pageThis option indicates the number of steps to take when paging via thepageUp/pageDown methods. By default its value is 10.

stepThis option indicates size of the step to take when spinning via buttons or viathe stepUp/stepDown methods. The element's step attribute is used if it existsand the option is not explicitly set.

#option_culture#option_disabled#option_iconshttp://api.jqueryui.com/theming/icons/#option_incremental#option_max#option_min#option_numberFormat#option_page#option_step

$(selector, context).spinner ("action", params) MethodThe spinner "action", params method can perform an action on spinner elements, such asenabling/disabling the spinner. The action is specified as a string in the first argument e.g.,"disable" disables the spinner. Check out the actions that can be passed, in the following table.

Syntax

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


Action Description

destroyThis action destroys the spinner functionality of an elementcompletely. The elements return to their pre-init state. Thismethod does not accept any arguments.

disableThis action disables the spinner functionality. This method doesnot accept any arguments.

enableThis action enables the spinner functionality. This method doesnot accept any arguments.

option optionNameThis action gets the value currently associated with the specifiedoptionName. Where optionName is the name of the option to get.

optionThis action gets an object containing key/value pairsrepresenting the current spinner options hash. This method doesnot accept any arguments.

option optionName, valueThis action sets the value of the spinner option associated withthe specified optionName.

option optionsThis action sets one or more options for the spinner.

pageDown [pages ]This action decrements the value by the specified number ofpages, as defined by the page option.

pageUp [pages ]This action increments the value by the specified number ofpages, as defined by the page option.

stepDown [steps ]This action decrements the value by the specified number ofsteps.

#action_destroy#action_disable#action_enable#action_optionName#action_option#action_optionName_value#action_options#action_pageDown#action_pageUp#action_stepDown

stepUp [steps ]This action increments the value by the specified number ofsteps.

valueThis action gets the current value as a number. The value isparsed based on the numberFormat and culture options. Thismethod does not accept any arguments.

value valueThis action sets the value. if value is passed value is parsedbased on the numberFormat and culture options.

widgetThis action returns the spinner widget element; the oneannotated with the ui-spinner class name.

Event Management on spinner elementsIn addition to the spinner options method we saw in the previous sections, JqueryUI provides eventmethods which gets triggered for a particular event. These event methods are listed below:


changeevent, uiThis event is triggered when the value of the spinner has changedand the input is no longer focused.

createevent, uiThis event is triggered when the spinner is created.

spinevent, uiThis event is triggered during increment/decrement.

startevent, uiThis event is triggered before a spin. Can be canceled, preventingthe spin from occurring.

stopevent, uiThis event is triggered after a spin.

JQUERYUI TABSJQUERYUI TABSTabs are sets of logically grouped content that allow us to quickly flip between them to. Tabs allowus 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 or unordered.

Each tab title must be within each and wrapped by anchor tag with an hrefattribute.

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

jQueryUI provides us tabs method drastically changes the appearance of HTML elements inside

#action_stepUp#action_value#action_value_value#action_widget#event_change#event_create#event_spin#event_start#event_stop

the page. This method traverses internally in jQuery UI HTML code and adds new CSS classes tothe elements concerned here, the tabs to give them the appropriate style.

SyntaxThe tabs method can be used in two forms:

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

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

$(selector, context).tabs (options) MethodThe tabs options method declares that an HTML element and its content should be managed astabs. The options parameter is an object that specifies the appearance and behavior of tabs.

Syntax

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


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


Option Description

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

collapsibleThis option set to true, it allows tabs to be deselected. When set to false thedefault, clicking on a selected tab does not deselect it remains selected. Bydefault its value is false.

disabledThis option uses an array to indicate index tabs that are disabled and thereforecannot be selected. For example, use [0, 1] to disable the first two tabs. By defaultits value is false.

eventThis 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. Bydefault its value is "click".

heightStyleThis option controls the height of the tabs widget and each panel. By default itsvalue is "content".

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

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

/jqueryui/jqueryui_quick_guide#tabs_options/jqueryui/jqueryui_quick_guide#tabs_methods#option_active#option_collapsible#option_disabled#option_event#option_heightStyle#option_hide#option_show

$(selector, context).tabs ("action", params) MethodThe 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 firstargument e.g., "add" to add a new tab. Check out the actions that can be passed, in the followingtable.

Syntax

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


Action Description

destroyThis action destroys the tabs functionality of an elementcompletely. The elements return to their pre-init state. Thismethod does not accept any arguments.

disableThis action disables all tabs. This method does not accept anyarguments.

disable indexThis action disables the specified tab. Where index is the tab tobe disabled.

enableThis action activates all the tabs. This signature does not acceptany arguments.

enable indexThis action activates a specified tab. Where index is the tab to beenabled.

load indexThis action forces a reload of the indexed tab, ignoring thecache

jqueryui quick guide - tutorialspoint · 2018. 1. 8. · second line, adds the jquery library, as...

Documents