×
dir.by
Поиск
Программирование, разработка, тестирование
→
jQuery UI - кнопки, меню, диалог, slider, spinner и так далее. Эфекты: растягивание, перетаскивание и так далее
→
Selectable (выделяем с помощью мыши один или несколько элементов) jQuery UI
Посмотрели
4098
раз(а)
Selectable (выделяем с помощью мыши один или несколько элементов)
последнее обновление: 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 ссылки может добавлять только залогиненный пользователь)
Картинки
+ Фото
Объявления
Объявления
jQuery UI - кнопки, меню, диалог, slider, spinner и так далее. Эфекты: растягивание, перетаскивание и так далее
•
Что такое 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
Ваши Отзывы ... комментарии ...