Selectable - Appendices - Web Development with jQuery (2015)

Web Development with jQuery (2015)

Part IV. Appendices

Appendix L. Selectable

Method

Description

Return Value

Sortable Methods

selectable(options)

Turns the children of selected element(s) into selectable elements. Options can be specified by passing an object literal as the first argument using key, value pairs. For a complete list of options, see the “Selectable Options” section later in this appendix.

jQuery

selectable('option')

Returns an object containing key value pairs representing the current selection of options.

Object

selectable(optionName)

Returns the current value of the specified option.

Mixed

selectable(optionName, value)

Sets the value of the specified option.

jQuery

selectable('disable')

Disables selectable functionality on the selected element(s).

jQuery

selectable('destroy')

Completely removes the selectable functionality.

jQuery

selectable('enable')

Enables selectable functionality on the selected element(s).

jQuery

selectable('refresh')

Refreshes the position and size of each selected element.

jQuery

selectable('widget')

Returns a jQuery object containing the selectable element.

jQuery

Selectable Options

Option

Description

Type

appendTo

This option determines what element the selection box will be appended to.
Default selector: "body"

Selector

autoRefresh

This option determines whether to refresh (the cached) the position and size of each selectable element at the beginning of a select operation. If you have experienced performance degradation (as you would if you have a lot of selectable elements), you might want to set this option to false and refresh positions manually, as needed.
Default value: true

Boolean

cancel

The cancel option provides a selector of elements that are omitted from the action of beginning a selection. If the user clicks and drags on one of the specified elements, no selection occurs.
Default selector: "input, textarea, button, select, option"

Selector

delay

Allows you the option of specifying the number of milliseconds that should pass before a selection is allowed to take place. The default is zero (no delay).

Integer

disabled

Determines whether the selectable is disabled.
Default value: false

Boolean

distance

Specifies the number of pixels the mouse cursor should move before a selection begins.
Default value: 0

Number

filter

The matching child elements will be made into selectable elements.
Default value: * (all child elements)

Selector

tolerance

Defines how a selection should occur. The two options at the time of this writing are "fit" and "touch". The value "fit" means that the selection box should completely contain the item being selected before a selection takes place. The option "touch" means that merely coming into contact with the item makes the item selected.
Default value: "touch"

String

create
bind('selectablecreate')
on('selectablecreate')

This function is executed when the selectable is created.

function(event, ui)

selected
bind('selectableselected')
on('selectableselected')

This function is executed at the end of a select operation (when the mouse button has been released), on each element added to the selection. Selected elements are available in the ui argument as ui.selected. The thiskeyword refers to the parent selectable element.

function(event, ui)

selecting
bind('selectableselecting')
on('selectableselecting')

This function is executed as elements are selected during a select operation (while the selection box is being drawn). Selected elements are available in the ui argument as ui.selecting. The this keyword refers to the parent selectable element.

function(event, ui)

start
bind('selectablestart')
on('selectablestart')

This function is executed at the beginning of a select operation (when the mouse button is first pressed down). The this keyword refers to the parent selectable element.

function(event, ui)

stop
bind('selectablestop')
on('selectablestop')

This function is executed at the end of a select operation (when the mouse button is released). The this keyword refers to the parent selectable element.

function(event, ui)

unselected
bind('selectableunselected')
on('selectableunselected')

This function is executed at the end of a select operation (when the mouse button has been released), for each element removed from the selection. The element removed from the selection is available in the uiargument as ui.unselected. The this keyword refers to the parent selectable element.

function(event, ui)

unselecting
bind('selectableunselecting')
on('selectableunselecting')

This function is executed during a select operation (while the selection box is being drawn). Selected elements are available in the ui argument as ui.unselecting. The this keyword refers to the parent selectable element.

function(event, ui)

Notes

In the ui argument of each of the callback functions documented here, the parent selectable element is also available as ui.selectable.

The Selectable plugin currently does not provide a way to customize the box being drawn—for example, by adding a class name to it via a Selectable option. Despite this limitation, you do have the ability to customize the selection box, and you can do that by adding a rule to your style sheet that references the selector, div.ui-selectable-helper.





All materials on the site are licensed Creative Commons Attribution-Sharealike 3.0 Unported CC BY-SA 3.0 & GNU Free Documentation License (GFDL)

If you are the copyright holder of any material contained on our site and intend to remove it, please contact our site administrator for approval.

© 2016-2026 All site design rights belong to S.Y.A.