38 lines
No EOL
1 KiB
HTML
Executable file
38 lines
No EOL
1 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
|
||
<script src="listSelect.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
Клик на элементе выделяет только его.
|
||
<br> Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
|
||
<br> Shift+Клик добавляет промежуток от последнего кликнутого к выделению.
|
||
<br>
|
||
|
||
<ul id="heroes">
|
||
<li>Кристофер Робин</li>
|
||
<li>Винни-Пух</li>
|
||
<li>Ослик Иа</li>
|
||
<li>Мудрая Сова</li>
|
||
<li>Кролик. Просто кролик.</li>
|
||
</ul>
|
||
|
||
<script>
|
||
var listSelect = new ListSelect({
|
||
elem: document.querySelector('#heroes')
|
||
});
|
||
|
||
document.querySelector('#heroes').addEventListener('select', function(event) {
|
||
alert(event.detail);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |