79 lines
1.4 KiB
HTML
Executable file
79 lines
1.4 KiB
HTML
Executable file
<!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script src="http://code.jquery.com/jquery.min.js"></script>
|
||
<style>
|
||
.selected {
|
||
background: #0f0;
|
||
}
|
||
li {
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
Клик на элементе выделяет только его.<br>
|
||
Shift+Клик добавляет/убирает элемент из выделенных.<br>
|
||
|
||
<ul>
|
||
<li>Винни-Пух</li>
|
||
<li>Ослик Иа</li>
|
||
<li>Мудрая Сова</li>
|
||
<li>Кролик. Просто кролик.</li>
|
||
</ul>
|
||
|
||
<script>
|
||
|
||
function ListSelect(options) {
|
||
var elem = options.elem;
|
||
|
||
var self = this;
|
||
|
||
elem.on('click', 'li', onLiClick);
|
||
elem.on('selectstart mousedown', false);
|
||
|
||
function onLiClick(e) {
|
||
if (!e.shiftKey) {
|
||
deselectAllItems();
|
||
}
|
||
|
||
toggleSelectItem( $(this) );
|
||
}
|
||
|
||
function deselectAllItems() {
|
||
elem.children().removeClass('selected');
|
||
}
|
||
|
||
function getValue() {
|
||
var value = [];
|
||
|
||
elem.children('.selected').each(function() {
|
||
value.push( $(this).html() );
|
||
});
|
||
|
||
return value;
|
||
}
|
||
|
||
function toggleSelectItem(li) {
|
||
li.toggleClass('selected');
|
||
|
||
$(self).triggerHandler({
|
||
type: 'change',
|
||
value: getValue()
|
||
})
|
||
}
|
||
}
|
||
|
||
var select = new ListSelect({
|
||
elem: $('ul')
|
||
});
|
||
|
||
$(select).on('change', function(e) {
|
||
alert(e.value);
|
||
});
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|