Закрыть
×
dir.by
Праздники ...
Праздники ...
Праздник весны и труда (1 мая)
Концерты, выставки ...
Концерты, выставки ...
Риккардо Форези|||Минск 29 апреля, Витебск 30 апреля 2026
Афишу
Спорт занятия ...
Спорт занятия ...
Синхронное плавание для детей
Спорт занятие
Компьютер, программы...
Компьютер, программы...
Объявления ...
Объявления ...
Механизм рулевой ШНКФ 453461.400-10
Объявление
Форум ...
Форум ...
обсуждение...
Поиск
Концерты
Спорт
Форум
Компьютер
Компьютер, программы
→
jQuery UI - кнопки, меню, диалог, slider, spinner и так далее. Эфекты: растягивание, перетаскивание и так далее
Selectable (выделяем с помощью мыши один или несколько элементов)
посмотрели
6084
раз
обновлено: 5 февраля 2020
Метод
selectable
в jQuery UI позволяет выделять с помощью мыши один или несколько элементов
Пример
смотрим, тестируем
Нажмите левой клавишей мышки на любую цифру и двигайте мышкой выделится цифры
или держите клавишу Ctrl и нажимайте мышкой на цифры
Код примера
Html
<html>
<!-- заголовок -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- страница -->
<body>
<!-- подключаем библиотеки jQuery и jQuery UI -->
<script
src=
"https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"
></script>
<script
src=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"
></script>
<!-- подключаем стили jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<style>
/* цвет используется когда нажали левую клавишу мыши и держим в нажатом положении */
#myElement1 .ui-selecting { background:green; }
/* цвет используется когда отпустили левую клавишу мыши (цвет выделенного элемента) */
#myElement1 .ui-selected { background:orange; color:white; }
/* расположение элементов */
#myElement1 { list-style-type:none; width:450px; margin:0; padding:0;}
#myElement1 li { margin:3px; padding:1px; float:left; width:100px; height:80px; font-size:4em; text-align:center; }
</style>
<!-- HTML элементы -->
<ol
id=
"myElement1"
>
<li
class=
"ui-state-default"
>1
</li>
<li
class=
"ui-state-default"
>2
</li>
<li
class=
"ui-state-default"
>3
</li>
<li
class=
"ui-state-default"
>4
</li>
<li
class=
"ui-state-default"
>5
</li>
<li
class=
"ui-state-default"
>6
</li>
<li
class=
"ui-state-default"
>7
</li>
<li
class=
"ui-state-default"
>8
</li>
<li
class=
"ui-state-default"
>9
</li>
<li
class=
"ui-state-default"
>10
</li>
<li
class=
"ui-state-default"
>11
</li>
<li
class=
"ui-state-default"
>12
</li>
</ol>
<!-- страница открылась -->
<script>
$( function()
{
// элементы myElement1 могут выделяться
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
На заметку!
Пример локально работает!
Запускаем пример на вашем компьютере:
1) Создайте новый файл
my.html
2) Скопируйте
исходный код
в
my.html
файл
3) Запустите в браузере
my.html
Кстати!
Пример позволяет выделять много цифр мышкой на компьютере.
Пример
не позволяет выделять много цифр мышкой
на мобильных устройствах (смартфоны, планшеты).
Выделяем цифры на мобильных устройствах (смартфоны, планшеты)
Пример
смотрим, тестируем
Объяснение
В коде добавилась одна строчка это подключение библиотеки
jQuery UI Touch Punch ...
для выделения на планшете, телефоне.
Html
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
Весь код примера для выделения на планшете, телефоне
В коде добавленная строчка выделена
синим цветом
.
Html
<html>
<!-- заголовок -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- страница -->
<body>
<!-- подключаем библиотеки jQuery и jQuery UI -->
<script
src=
"https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"
></script>
<script
src=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"
></script>
<!-- подключаем стили jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<!-- библиотека перетаскивания для планшета, телефона -->
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
<style>
/* цвет используется когда нажали левую клавишу мыши и держим в нажатом положении */
#myElement1 .ui-selecting { background:green; }
/* цвет используется когда отпустили левую клавишу мыши (цвет выделенного элемента) */
#myElement1 .ui-selected { background:orange; color:white; }
/* расположение элементов */
#myElement1 { list-style-type:none; width:450px; margin:0; padding:0;}
#myElement1 li { margin:3px; padding:1px; float:left; width:100px; height:80px; font-size:4em; text-align:center; }
</style>
<!-- HTML элементы -->
<ol
id=
"myElement1"
>
<li
class=
"ui-state-default"
>1
</li>
<li
class=
"ui-state-default"
>2
</li>
<li
class=
"ui-state-default"
>3
</li>
<li
class=
"ui-state-default"
>4
</li>
<li
class=
"ui-state-default"
>5
</li>
<li
class=
"ui-state-default"
>6
</li>
<li
class=
"ui-state-default"
>7
</li>
<li
class=
"ui-state-default"
>8
</li>
<li
class=
"ui-state-default"
>9
</li>
<li
class=
"ui-state-default"
>10
</li>
<li
class=
"ui-state-default"
>11
</li>
<li
class=
"ui-state-default"
>12
</li>
</ol>
<!-- страница открылась -->
<script>
$( function()
{
// элементы myElement1 могут выделяться
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
Пример 2
Пример
смотрим, тестируем
Нажмите левой клавишей мышки на любую ячейку и двигайте мышкой выделится ячейки
или держите клавишу Ctrl и нажимайте мышкой на ячейки
Код примера
Html
<html>
<!-- заголовок -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- страница -->
<body>
<!-- подключаем библиотеки jQuery и jQuery UI -->
<script
src=
"https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"
></script>
<script
src=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"
></script>
<!-- подключаем стили jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<style>
/* цвет используется когда нажали левую клавишу мыши и держим в нажатом положении */
#myElement1 .ui-selecting { background:#FECA40; }
/* цвет используется когда отпустили левую клавишу мыши (цвет выделенного элемента) */
#myElement1 .ui-selected { background:#F39814; color:white; }
/* расположение элементов */
#myElement1 { list-style-type:none; margin:0; padding:0; width:60%; }
#myElement1 li { margin:3px; padding:0.4em; font-size:1.4em; height:18px; }
</style>
<!-- HTML элементы -->
<ol
id=
"myElement1"
>
<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>
<!-- страница открылась -->
<script>
$( function()
{
// элементы могут выделяться myElement1
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
На заметку!
Пример локально работает!
Запускаем пример на вашем компьютере:
Создайте новый файл
my.html
Скопируйте
исходный код
в
my.html
файл
Запустите в браузере
my.html
Кстати!
Пример позволяет выделять много ячеек мышкой на компьютере.
Пример
не позволяет выделять много ячеек мышкой
на мобильных устройствах (смартфоны, планшеты).
Выделяем ячейки на мобильных устройствах (смартфоны, планшеты)
Пример
смотрим, тестируем
Нажмите пальцем на любую ячейку на телефоне и двигайте палец выделятся ячейки
Объяснение
В коде добавилась одна строчка это подключение библиотеки
jQuery UI Touch Punch ...
для выделения на планшете, телефоне.
Html
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
Весь код примера для выделения на планшете, телефоне
В коде добавленная строчка выделена
синим цветом
.
Html
<html>
<!-- заголовок -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- страница -->
<body>
<!-- подключаем библиотеки jQuery и jQuery UI -->
<script
src=
"https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"
></script>
<script
src=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.js"
></script>
<!-- подключаем стили jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<!-- библиотека перетаскивания для планшета, телефона -->
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
<style>
/* цвет используется когда нажали левую клавишу мыши и держим в нажатом положении */
#myElement1 .ui-selecting { background:#FECA40; }
/* цвет используется когда отпустили левую клавишу мыши (цвет выделенного элемента) */
#myElement1 .ui-selected { background:#F39814; color:white; }
/* расположение элементов */
#myElement1 { list-style-type:none; margin:0; padding:0; width:60%; }
#myElement1 li { margin:3px; padding:0.4em; font-size:1.4em; height:18px; }
</style>
<!-- HTML элементы -->
<ol
id=
"myElement1"
>
<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>
<!-- страница открылась -->
<script>
$( function()
{
// элементы myElement1 могут выделяться
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
← Предыдущая тема
Resizable (меняем размер элемента с помощью мыши) jQuery UI
Следующая тема →
Сайты для изучения JQuery UI
Ваши Отзывы ... комментарии ...
Вашe имя
Ваш комментарий
(www ссылки может добавлять только залогиненный пользователь)
+ картинку
Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
Анонс!
Ярмарка вакансий для молодежи, работа (учащихся, которые хотели бы подработать в свободное время, а также выпускники)|||Минск, Витебск, Гомель, Гродно, Могилев, Борисов, Полоцк, Брест, Барановичи, Пинск с 13 по 17 апреля 2026
Объявления
Объявления
•
Что такое JQuery UI ?
•
jQuery UI где скачать и как подключить?
Interactions (взаимодействие)
•
Draggable (элемент может быть перемещен с помощью мыши) jQuery UI
•
Droppable (перетаскиваемый элемент может быть брошен) jQuery UI
•
Resizable (меняем размер элемента с помощью мыши) jQuery UI
•
Selectable (выделяем с помощью мыши один или несколько элементов) jQuery UI
WWW сайты для изучения JQuery UI
•
Сайты для изучения JQuery UI
Ваши вопросы присылайте по почте:
info@dir.by
Афишу
Ваши Отзывы ... комментарии ...