Необходимо добавить на веб-страницу возможность выбора элементов с помощью передвижения указателя мыши с удержанием в нажатом состоянии ее левой кнопки
Необходимо добавить на веб-страницу возможность выбора элементов с помощью передвижения указателя мыши с удержанием в нажатом состоянии ее левой кнопки или комбинации щелчка мышью с нажатием и удержанием клавиши <Ctrl> (<Meta>), подобно тому, как это делается в традиционных приложениях.
Решение
Применим плагин Selectable вместе с темой оформления "le-frog" для решения этой задачи (листинг 18.4.1).
Листинг 1 8 .4 .1 . Использование плагина 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 34 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-18-4-1</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css" rel="stylesheet" /> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script> <style type="text/css"> #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script type="text/javascript"> $(function(){ $("#selectable").selectable(); }); </script> </head> <body> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> <li class="ui-widget-content">Item 7</li> </ol> </body> </html> |
Обсуждение
Сначала подключаем файл стилей css/le-frog/jquery-ui-1.8.9.custom.css одной из многочисленных тем оформления. Вполне возможно, что у вас будет свое собственное оформление, но для изучения примеров лучше воспользоваться готовым примером. Кроме этого мы подключили файл библиотеки — js/jquery-1.4.4.min.js и файл js/jquery-ui-1.8.9.custom.min.js, объединяющий функциональность ядра UI и плагина Selectable. Для примера создадим список ol, пункты которого нам предстоит сделать выделяемыми. За связь плагина с HTML-разметкой отвечает фрагмент кода, приведенный в листинге 18.4.2.
Листинг 1 8 .4 .2 . Использование плагина Selectable
[code language=”javascript”]
В примере из листинга 18.4.2 мы выбрали нужный нам элемент по его идентификатору #selectable и связали с ним возможности плагина. В этом примере мы оставили настройки по умолчанию.
Однако мы имеем возможность передавать плагину при инициализации некоторые настройки. Как это можно делать, показано в листинге 18.4.3.
Листинг 1 8 .4 .3 . Использование пл а г ина Selectable
[code language=”javascript”]
В примере из листинга 18.4.3 мы передали плагину значение 100 в опции distance и этим определили расстояние в пикселах, которое должен пройти указатель мыши (с одновременно нажатой левой кнопкой), прежде, чем начнется выделение указанных элементов. Значения для остальных опций можно передать плагину подобным образом.
В табл. 18.10 приведено описание всех возможных опций плагина Selectable.
Таблица 18.10. Опции плагина Selectable
|
Опция |
Описание |
|
disabled |
Значение по умолчанию — false. Если установить значение true, то при инициализации функциональность Selectable будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия |
|
autoRefresh |
Значение по умолчанию — true, что определяет пересчет положения и размеров области выделения при попадании туда очередного элемента. Если таких элементов слишком много, может понадобиться отключить пересчет. Для этого следует установить значение false. При необходимости можно будет использовать для пересчета метод .selectable(‘refresh’) |
|
cancel |
Опция принимает в качестве значения селектор jQuery. Предотвращает начало выбора элементов, если при начале выбор указателя мыши находится над указанными элементами. Значение по умолчанию — ‘:input,option’ |
|
delay |
В опции указывается число, устанавливающее время в миллисекундах, определяющее задержку начала выбора элементов. По умолчанию — 0 |
|
distance |
В опции указывается число, устанавливающее расстояние в пикселах, которое должен пройти указатель мыши до начала выбора элементов. По умолчанию — 0 |
|
filter |
В качестве значения опции указывается селектор jQuery. Значение по умолчанию — *. В этой опции можно указывать элементы-потомки, которые будут сделаны выбранными (при условии, если они могут быть таковыми) |
|
tolerance |
Опция принимает в качестве значения строку. Значение по умолчанию — touch. Возможные значения ‘touch’ и ‘fit’. При указании значения ‘touch’ выбор элемента производится, когда область выбора перекрывает элемент какой-либо частью. При значении ‘fit’ выбор элемента производится, только когда область выбора перекрывает элемент полностью |
Посмотрим теперь, на какие события может реагировать плагин Selectable. Таких событий всего семь. Названия событий и их описания приведены в табл. 18.11.
Таблица 18.11. События плагина Selectable
|
Опция |
Событие |
Описание |
|
create |
selectablecreate |
Наступает в момент инициализации |
|
selected |
selected |
Наступает по окончании выбора для каждого выбранного элемента |
|
selecting |
selecting |
Происходит в процессе выбора для каждого выбранного элемента |
|
start |
selectablestart |
Наступает при начале процесса выбора |
|
stop |
selectablestop |
Наступает по окончании процесса выбора |
Таблица 18.11 (окончание)
|
Опция |
Событие |
Описание |
|
unselected |
unselected |
Наступает по окончании выбора для каждого элемента, не попавшего в выбор по сравнению с предыдущим состоянием |
|
unselecting |
unselecting |
Происходит в процессе выбора, когда какой-либо элемент, присутствовавший в выборе, удаляется из него |
В листинге 18.4.4 приведен пример события, которое происходит по окончании выбора элементов. Callback-функцию, вызываемую при наступлении этого события, можно определить в опции stop.
Листинг 1 8 .4 .4 . Использование плагина Selectable
[code language=”javascript”]
Callback-функция, которую мы определили в опции stop, может принимать два аргумента. Первый аргумент — объект события. Мы используем его внутри функции, обращаясь к свойству type, чтобы вывести в окне предупреждения название события, вызвавшего функцию.
В листинге 18.4.5 приведен пример задания опций start, selected и stop. В опциях start и stop определяются callback-функции, вызываемые при начале и окончании выбора элементов. В опции selected можно определить callback-функцию, которая вызывается для каждого выбранного элемента по окончании выбора.
Листинг 1 8 .4 .5 . Использование плагина 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-18-4-5</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css" rel="stylesheet" /> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script> <style type="text/css"> #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } p { width:400px; height:200px; border:1px solid #369; background-color:#eee; overflow:auto; font-size:.8em; } </style> <script type="text/javascript"> $(function(){ $("#selectable").selectable({ start: function(event) { $("#result").empty().append("Событие: " + event.type + "<br />"); }, selected: function(event, ui) { $("#result").append("Событие: " + event.type + " для " + ui.selected.innerHTML + "<br />"); }, stop: function(event) { $("#result").append("Событие: " + event.type + "<br />"); } }); }); </script> </head> <body> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> <li class="ui-widget-content">Item 7</li> </ol> <p id="result"></p> </body> </html> |
Давайте посмотрим, что будет происходить, если мы попробуем испытать в действии пример из листинга 18.4.5. Как только мы начнем выбор элементов, будет вызвана функция, определенная нами в опции start. Эта функция очистит все содержимое элемента с идентификатором #result и добавит в него название события, вызвавшего функцию.
Предположим, что мы выбираем элементы, передвигая указатель мыши и удерживая в нажатом состоянии ее левую кнопку. Договоримся также, что мы закончим выбор, как только будут выбраны два элемента li.
В этом случае, по окончании выбора будет сначала вызвана функция, определенная в опции selected. Причем у нас она будет вызвана дважды, для каждого выбранного элемента. Затем будет вызвана функция, которую мы определили в опции stop.
Обратите внимание, что в функцию, которая была определена в опции selected, мы передаем аргумент ui и используем его внутри функции, обращаясь к его свойству selected. Это свойство является объектом, представляющим элемент DOM, который был выбран.
Плагин Selectable имеет несколько методов, с помощью которых можно управлять им даже после инициализации. Примеры иллюстрирует листинг 18.4.6.
Листинг 1 8 .4 .6 . Использование плагина 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 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title>example-18-4-6</title> <content> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="css/le-frog/jquery-ui-1.8.9.custom.css" rel="stylesheet" /> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script> <style type="text/css"> #selectable .ui-selecting { background: #FECA40; } #selectable .ui-selected { background: #F39814; color: white; } #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } </style> <script type="text/javascript"> $(function(){ $("#selectable").selectable(); $("#disable").click(function(){ $("#selectable").selectable("disable"); }); $("#enable").click(function(){ $("#selectable").selectable("enable"); }); $("#destroy").click(function(){ $("#selectable").selectable("destroy"); }); }); </script> </head> <body> <ol id="selectable"> <li class="ui-widget-content">Item 1</li> <li class="ui-widget-content">Item 2</li> <li class="ui-widget-content">Item 3</li> <li class="ui-widget-content">Item 4</li> <li class="ui-widget-content">Item 5</li> <li class="ui-widget-content">Item 6</li> <li class="ui-widget-content">Item 7</li> </ol> <button id="disable">Disable</button> <button id="enable">Enable</button> <button id="destroy">Destroy</button> </body> </html> |
В листинге 18.4.6 мы создаем три кнопки с идентификаторами #disable, #enable и
#destroy, связывая с ними события click. При нажатии на кнопки вызываем соответствующий метод плагина Selectable, временно отменяя функциональность плагина, вновь восстанавливая эту функциональность, и удаляя ее окончательно, возвращая элементы в состояние, предшествующее инициализации.
Описания всех доступных методов плагина Selectable приведены в табл. 18.12.
Таблица 18.12. Методы плагина Selectable
|
Метод |
Описание |
|
destroy .selectable(‘destroy’) |
Полностью удаляет всю функциональность плагина Selectable. Возвращает элементы в состояние, предшествующее инициализации |
|
disable .selectable(‘disable’) |
Временно запрещает всю функциональность плагина. Вновь разрешить ее можно с помощью метода enable |
|
enable .selectable(‘enable’) |
Разрешает использование всей функциональности плагина, если ранее она была запрещена методом disable |
|
option .selectable(‘option’, optionName, [value]) |
Устанавливает значение любой опции плагина после инициализации |
|
option .selectable(‘option’, optionName) |
С помощью этого метода можно получить значение любой опции плагина после инициализации |
|
widget .selectable(‘widget’) |
Обеспечивает доступ к объекту, который представляет собой выбираемый элемент |
Таблица 18.12 (окончание)
|
Метод |
Описание |
|
refresh .selectable(‘refresh’) |
Этот метод обычно применяется, если для опции autoRefresh установлено значение false. С помощью него можно пересчитать положение и размеры каждого выделенного элемента |
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Что такое селекторы и как их правильно использовать (0)
- Изменение стиля горизонтальной линии (0)
- Удаление отступов от края страницы (0)
- Удаление отступов по умолчанию для всех элементов страницы (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Для каких элементов можно задавать фоновое изображение (0)
- Как задать для документа более одного фонового изображения (0)