×
dir.by
Search
Programming, development, testing
→
jQuery UI - buttons, menus, dialog, slider, spinner and so on. Effects: stretching, dragging, and so on
→
Selectable (select one or more elements with the mouse) jQuery UI
Looked at
5280
times
Selectable (select one or more elements with the mouse)
last updated: 5 February 2020
Method
selectable
in the jQuery UI allows you to select one or more items with the mouse
Example
we look, we test
Press the left mouse button on any number and move the mouse to highlight the numbers
or hold the key Ctrl and click on the numbers
Example code
Html
<html>
<!-- heading -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- page -->
<body>
<!-- connect libraries jQuery and 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>
<!-- connect styles jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<style>
/* color is used when you press the left mouse key and hold in the pressed position */
#myElement1 .ui-selecting { background:green; }
/* Color is used when the left mouse key is released (the color of the selected element) */
#myElement1 .ui-selected { background:orange; color:white; }
/* arrangement of elements */
#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 Elements -->
<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>
<!-- the page has opened -->
<script>
$( function()
{
// Elements myElement1 can stand out
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
Note!
The example works locally!
Run the example on your computer:
1) Create a new file
my.html
2) Copy
source code
in the
my.html
file
3) Run in browser
my.html
By the way!
The example allows you to highlight many numbers with the mouse on the computer.
Example
does not allow you to highlight many numbers with the mouse
on mobile devices (smartphones, tablets).
Highlight the numbers on mobile devices (smartphones, tablets)
Example
we look, we test
Explanation
One line is added to the code, this is the connection of the library
jQuery UI Touch Punch ...
to highlight on tablet, phone.
Html
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
All sample code to highlight on tablet, phone
In the code, the added line is highlighted
Blue
.
Html
<html>
<!-- heading -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- page -->
<body>
<!-- connect libraries jQuery and 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>
<!-- connect styles jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<!-- drag-and-drop library for tablet, phone -->
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
<style>
/* color is used when you press the left mouse key and hold in the pressed position */
#myElement1 .ui-selecting { background:green; }
/* Color is used when the left mouse key is released (the color of the selected element) */
#myElement1 .ui-selected { background:orange; color:white; }
/* arrangement of elements */
#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 Elements -->
<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>
<!-- the page has opened -->
<script>
$( function()
{
// Elements myElement1 can stand out
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
Example 2
Example
we look, we test
Press the left mouse button on any cell and move the mouse to highlight the cell
or hold the key Ctrl and click on the cells
Example code
Html
<html>
<!-- heading -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- page -->
<body>
<!-- connect libraries jQuery and 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>
<!-- connect styles jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<style>
/* color is used when you press the left mouse key and hold in the pressed position */
#myElement1 .ui-selecting { background:#FECA40; }
/* Color is used when the left mouse key is released (the color of the selected element) */
#myElement1 .ui-selected { background:#F39814; color:white; }
/* arrangement of elements */
#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 Elements -->
<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>
<!-- the page has opened -->
<script>
$( function()
{
// items can be highlighted myElement1
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
Note!
The example works locally!
Run the example on your computer:
Create a new file
my.html
Copy
source code
in the
my.html
file
Run in browser
my.html
By the way!
The example allows you to select many cells with the mouse on your computer.
Example
does not allow you to select many cells with the mouse
on mobile devices (smartphones, tablets).
Select cells on mobile devices (smartphones, tablets)
Example
we look, we test
Press your finger on any cell on your phone and move your finger to highlight the cell
Explanation
One line is added to the code, this is the connection of the library
jQuery UI Touch Punch ...
to highlight on tablet, phone.
Html
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
All sample code to highlight on tablet, phone
In the code, the added line is highlighted
Blue
.
Html
<html>
<!-- heading -->
<head>
<meta
charset=
"utf-8"
>
<title>
Example
</title>
</head>
<!-- page -->
<body>
<!-- connect libraries jQuery and 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>
<!-- connect styles jQuery UI -->
<link
rel=
"stylesheet"
href=
"https://dir.by/example_lib/jquery_ui/jquery-ui-1.12.1/jquery-ui.min.css"
>
<!-- drag-and-drop library for tablet, phone -->
<script
src=
"https://dir.by/example_lib/touch-punch/jquery.ui.touch-punch.js"
></script>
<style>
/* color is used when you press the left mouse key and hold in the pressed position */
#myElement1 .ui-selecting { background:#FECA40; }
/* Color is used when the left mouse key is released (the color of the selected element) */
#myElement1 .ui-selected { background:#F39814; color:white; }
/* arrangement of elements */
#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 Elements -->
<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>
<!-- the page has opened -->
<script>
$( function()
{
// Elements myElement1 can stand out
$(
"#myElement1"
).selectable();
});
</script>
</body>
</html>
← Previous topic
Resizable (resize an item with the mouse) jQuery UI
Next topic →
Sites to explore JQuery UI
Your feedback ... Comments ...
Your Name
Your comment
(www links can only be added by a logged-in user)
+ Picture
Объявления
Объявления
•
What the JQuery UI ?
•
jQuery UI where to download and how to connect?
Interactions (interaction)
•
Draggable (the item can be moved with the mouse) jQuery UI
•
Droppable (a dragged item can be thrown) jQuery UI
•
Resizable (resize an item with the mouse) jQuery UI
•
Selectable (select one or more elements with the mouse) jQuery UI
WWW sites to explore JQuery UI
•
Sites to explore JQuery UI
Ваши вопросы присылайте по почте:
info@dir.by
Your feedback ... Comments ...