Панель Управления


Видеокурс: "Javascript+jQuery для начинающих в видеоформате" Проверка времени и определение часового пояса рабочей станции. RU-CENTER. Центр регистрации доменов зоны .RU Сейчас выгодная возможность зарегистрировать домен .РФ в RU-CENTER Информационная безопасность Система интернет-расчетов RUpay Графический редактор ГИМП (GIMP) Зинаида Лукьянова. Видеокурс Фотошоп с нуля. Евгений Попов. Видеокурс HTML + PHP + MySQL. Весь Софт Софтодром "Электрошоп". Поиск электронных товаров. Джава. Ява. Java. Дмитрий Котеров, Алексей Костарев. PHP-5. Наиболее полное руководство. 2-е издание.



Элемент Выбираемый (Selectable) плагина UI библиотеки jQuery.
Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3 Сделано в kocby.ru Плагин jQuery UI Выборка (Selectable) позволяет элементы делать выбираемыми путем захвата их в коробку (иногда ее называют лассо) с помощью мыши. Элементы также можно выбирать путем клика мыши или перетаскиваем, держа нажатой кнопку ctrl на клавиатуре, что позволяет делать множественную несплошную выборку.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Selectable :: Выбираемый
Описание: Используйте мышь, чтобы выбрать элементы, по одному или группу элементов.
Description: Use the mouse to select elements, individually or in a group.

Пример странички Выбираемый Дефолтный (по умолчанию, Default functionality).:
можно посмотреть здесь.

Пример странички Выбираемый Показательный (с демонстрацией выбранных пунктов, Serialize):
можно посмотреть здесь.

Пример странички Выбираемый Интервальный Таблично-ячеечный (Display as grid):
можно посмотреть здесь.




Теория

Тесты по теории можно посмотреть здесь.




Options (Опции)



appendTo
Type: Selector
Default: "body"

Which element the selection helper (the lasso) should be appended to.
К какому элементу помошник выборщика (лассо) будет прикреплен.

Code examples: (Примеры кода: )
Initialize the resizable with the appendTo option specified:
Инициализация Выбираемого с определенной опцией appendTo:

$( ".selector" ).selectable({ appendTo: "#someElem" });


Get or set the appendTo option, after initialization:
Можно получить или установить опцию appendTo после инициализации:

// getter
var appendTo = $( ".selector" ).selectable( "option", "appendTo" );
 
// setter
$( ".selector" ).selectable( "option", "appendTo", "#someElem" );



autoRefresh
Type: Boolean
Default: true

This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many items, you may want to set this to false and call the refresh() method manually.
Данная опция определяет обновлять ли (пересчитывать ли) позицию и размер каждого Выбираемого в начале каждой операции выбора. Если вы имеете слишком много пунктов для выбора, возможно, вы захотите установить эту опцию на значение false (ложь) и вызывать метод refresh() вручную.

Code examples: (Примеры кода: )
Initialize the resizable with the autoRefresh option specified:
Инициализация Выбираемого с определенной опцией autoRefresh:

$( ".selector" ).selectable({ autoRefresh: false });


Get or set the autoRefresh option, after initialization:
Можно получить или установить опцию autoRefresh после инициализации:

// getter
var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
 
// setter
$( ".selector" ).selectable( "option", "autoRefresh", false );



cancel
Type: Selector
Default: "input,textarea,button,select,option"

Prevents selecting if you start on elements matching the selector.
Предотвращает выбор, если вы стартуете процесс выбора с элементов, соответствующих селектору.

Code examples: (Примеры кода: )
Initialize the resizable with the cancel option specified:
Инициализация Выбираемого с определенной опцией cancel:

$( ".selector" ).selectable({ cancel: a,.cancel });


Get or set the cancel option, after initialization:
Можно получить или установить опцию cancel после инициализации:

// getter
var cancel = $( ".selector" ).selectable( "option", "cancel" );
 
// setter
$( ".selector" ).selectable( "option", "cancel", a,.cancel );



delay
Type: Number
Default: 0

Time in milliseconds to define when the selecting should start. This helps prevent unwanted selections when clicking on an element.
Время в миллисекундах, после которого Выборка начнет стартовать. Это помогает предотвратить нежелательное проведения Выборки при кликах на элементе.

Code examples: (Примеры кода: )
Initialize the selectable with the delay option specified:
Инициализация Выбираемого с определенной опцией delay:

$( ".selector" ).selectable({ delay: 150 });


Get or set the delay option, after initialization:
Можно получить или установить опцию delay после инициализации:

// getter
var delay = $( ".selector" ).selectable( "option", "delay" );
 
// setter
$( ".selector" ).selectable( "option", "delay", 150 );



disabled
Type: Boolean
Default: false

Disables the selectable if set to true.
Выключает Выборку, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the resizable with the disabled option specified:
Инициализация Выбираемого с определенной опцией disabled:

$( ".selector" ).selectable({ disabled: true });


Get or set the disabled option, after initialization:
Можно получить или установить опцию disabled после инициализации:

// getter
var disabled = $( ".selector" ).selectable( "option", "disabled" );
 
// setter
$( ".selector" ).selectable( "option", "disabled", true );



distance
Type: Number
Default: 0

Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until the mouse has been dragged beyond the specified distance.
Задержка, в пикселях, после которой Выбор начнет стартовать. Если определена, Выборка не начнется пока мышь не пройдет заданное расстояние.

Code examples: (Примеры кода: )
Initialize the selectable with the distance option specified:
Инициализация Выбираемого с определенной опцией distance:

$( ".selector" ).selectable({ distance: 30 });


Get or set the distance option, after initialization:
Можно получить или установить опцию distance после инициализации:

// getter
var distance = $( ".selector" ).selectable( "option", "distance" );
 
// setter
$( ".selector" ).selectable( "option", "distance", 30 );



filter
Type: Selector
Default: "*"

The matching child elements will be made selectees (able to be selected).
Отбирает подходящие дочерние элементы, чтобы сделать их Выбираемыми.

Code examples: (Примеры кода: )
Initialize the selectable with the filter option specified:
Инициализация Выбираемого с определенной опцией filter:

$( ".selector" ).selectable({ filter: li });


Get or set the filter option, after initialization:
Можно получить или установить опцию filter после инициализации:

// getter
var filter = $( ".selector" ).selectable( "option", "filter" );
 
// setter
$( ".selector" ).selectable( "option", "filter", li );



tolerance
Type: String
Default: "touch"

Specifies which mode to use for testing whether the lasso should select an item.
Определяет, какой мод следует использовать для теста, должно ли лассо выбрать данный элемент.
Possible values: Возможные значения:
• "fit": Lasso overlaps the item entirely. Полный захват: Лассо захватывает, если пункт полностью захвачен.
• "touch": Lasso overlaps the item by any amount. Тронуть: Лассо захватывает, если пункт затронут.


Code examples: (Примеры кода: )
Initialize the selectable with the tolerance option specified:
Инициализация Выбираемого с определенной опцией tolerance:

$( ".selector" ).selectable({ tolerance: "fit" });


Get or set the tolerance option, after initialization:
Можно получить или установить опцию tolerance после инициализации:

// getter
var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
 
// setter
$( ".selector" ).selectable( "option", "tolerance", "fit" );



Methods (Методы)



destroy()
Removes the selectable functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет функциональность Выбираемого. Возвращает элемент обратно в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):
$( ".selector" ).selectable( "destroy" );



disable()
Disables the selectable.
• This method does not accept any arguments.

Выключает Выборку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):
$( ".selector" ).selectable( "disable" );



enable()
Enables the selectable.
• This method does not accept any arguments.

Включает Выборку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):
$( ".selector" ).selectable( "enable" );



option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var isDisabled = $( ".selector" ).selectable( "option", "disabled" );



option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current selectable options hash.
• This method does not accept any arguments.

Получает объект, содержащий пары key/value (ключ/значение), представляющий текущее состояние набора значений Выбираемого.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var options = $( ".selector" ).selectable( "option" );



option( optionName, value )
Sets the value of the selectable option associated with the specified optionName.
Устанавливает значение опции Выбираемого, связанное с определенным optionName (именем опции).

• optionName
Type: String
The name of the option to set.
Имя опции для установки.

• value
Type: Object
A value to set for the option.
Значение, которое устанавливается для опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).selectable( "option", "disabled", true );



option( options )
Sets one or more options for the selectable.

Устанавливает одну или более опций для Выбираемого.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).selectable( "option", { disabled: true } );



refresh()
Returns:
Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee when the autoRefresh option is set to false.
• This method does not accept any arguments.

Обновляет позиции и размеры каждого выбираемого элемента. Этот метод может быть использован для ручного перерасчета позиций и размеров каждого Выбираемого элемента, когда опция autoRefresh установлена назначение false (ложь).
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).selectable( "refresh" );



widget()
Returns a jQuery object containing the selectable element.
• This method does not accept any arguments.

Возвращает объект jQuery, содержащий Выборку.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:
var widget = $( ".selector" ).selectable( "widget" );



Events (События)



create( event, ui )
Type: selectablecreate

Triggered when the selectable is created.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the selectable with the create callback specified:
$( ".selector" ).selectable({
    create: function( event, ui ) {}
});


Bind an event listener to the selectablecreate event:
$( ".selector" ).on( "selectablecreate", function( event, ui ) {} );



selected( event, ui )
Type: selectableselected

Triggered at the end of the select operation, on each element added to the selection.

• event
Type: Event

• ui
Type: Object

◦ selected
Type: Element
The selectable item that has been selected.

Code examples: (Примеры кода: )
Initialize the selectable with the selected callback specified:
$( ".selector" ).selectable({
    selected: function( event, ui ) {}
});


Bind an event listener to the selectableselected event:
$( ".selector" ).on( "selectableselected", function( event, ui ) {} );



selecting( event, ui )
Type: selectableselecting

Triggered during the select operation, on each element added to the selection.

• event
Type: Event

• ui
Type: Object

◦ selecting
Type: Element
The current selectable item being selected.

Code examples: (Примеры кода: )
Initialize the selectable with the selecting callback specified:
$( ".selector" ).selectable({
    selecting: function( event, ui ) {}
});


Bind an event listener to the selectableselecting event:
$( ".selector" ).on( "selectableselecting", function( event, ui ) {} );



start( event, ui )
Type: selectablestart

Triggered at the beginning of the select operation.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the selectable with the start callback specified:
$( ".selector" ).selectable({
    start: function( event, ui ) {}
});


Bind an event listener to the selectablestart event:
$( ".selector" ).on( "selectablestart", function( event, ui ) {} );



stop( event, ui )
Type: selectablestop

Triggered at the end of the select operation.

• event
Type: Event

• ui
Type: Object

Code examples: (Примеры кода: )
Initialize the selectable with the stop callback specified:
$( ".selector" ).selectable({
    stop: function( event, ui ) {}
});


Bind an event listener to the selectablestop event:
$( ".selector" ).on( "selectablestop", function( event, ui ) {} );



unselected( event, ui )
Type: selectableunselected

Triggered at the end of the select operation, on each element removed from the selection.

• event
Type: Event

• ui
Type: Object

◦ unselected
Type: Element
The selectable item that has been unselected.

Code examples: (Примеры кода: )
Initialize the selectable with the unselected callback specified:
$( ".selector" ).selectable({
    unselected: function( event, ui ) {}
});


Bind an event listener to the selectableunselected event:
$( ".selector" ).on( "selectableunselected", function( event, ui ) {} );



unselecting( event, ui )
Type: selectableunselecting

Triggered during the select operation, on each element removed from the selection.

• event
Type: Event

• ui
Type: Object

◦ unselecting
Type: Element
The current selectable item being unselected.

Code examples: (Примеры кода: )
Initialize the selectable with the unselecting callback specified:
$( ".selector" ).selectable({
    unselecting: function( event, ui ) {}
});


Bind an event listener to the selectableunselecting event:
$( ".selector" ).on( "selectableunselecting", function( event, ui ) {} );



Overview (Обзор)
The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Elements can also be selected via click or drag while holding the ctrl/meta key, allowing for multiple (non-contiguous) selections.

Плагин jQuery UI Выборка (Selectable) позволяет элементы делать выбираемыми путем захвата их в коробку (иногда ее называют лассо) с помощью мыши. Элементы также можно выбирать путем клика мыши или перетаскиваем, держа нажатой кнопку ctrl на клавиатуре, что позволяет делать множественную несплошную выборку.




Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.


Example:



Example: A simple jQuery UI Selectable.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>selectable demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <style>
    #selectable .ui-selecting {
        background: #ccc;
    }
    #selectable .ui-selected {
        background: #999;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
 
<ul id="selectable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
 
<script>
$( "#selectable" ).selectable();
</script>
 
</body>
</html>
Этот пример можно посмотреть здесь.



Примеры Выбираемого на этом сайте: Дефолтный, Показательный, Таблично-ячеечный.



Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/post/webmaster/jquery/ui/selectable/
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа




Close and hide in basket :: Закрыть и спрятать в корзину статистическую информацию о посетителях Клуба.
Створки зеркала Клуба Одиноких Сердец.
Красивая девушка блондинка слева Красивая девушка брюнетка справа