36 lines
988 B
HTML
Executable file
36 lines
988 B
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.value);
|
||
});
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|