Очень долго искал в сети творчество сабжевого исполнителя, поэтому не могу удержаться от того, чтоб не опубликовать откуда оно качабельно, итак:
Исполнитель: Господин Дадуда
Страна: Россия
Жанр: pop-dance, rave
Год выпуска: 1995, 1996, 1999
Формат: MP3
1. Господин Дадуда - Даду Внедреж (4:41)
2. Господин Дадуда - Галоп Сидроль (4:19)
3. Господин Дадуда - Люди Ау (4:08)
4. Господин Дадуда - Тоня и Федя (3:47)
5. Господин Дадуда - Апупея (4:38)
6. Господин Дадуда - У нас все будет (2:43)
7. Господин Дадуда - Свет ноября (4:32)
8. Господин Дадуда - Ду Ю Лав Ми Ту (4:14)
9. Господин Дадуда - Рашен Джингл Бэлз (3:33)
Встала проблема: надо на странице сделать select-box с множественным выбором, но такой чтоб глупый юзверь выбирал не удерживая ctrl, а ставил галочки по привычке, потому что объяснить ему как по-другому нереально...
Решений у проблемы как всегда два: простое, вместо селекта на страничке вывалить галки в div-е, но переделав дофига всего, и сложное, но интересное - javascript-ом схватить select и переделать его в див с галками, именно об этом этот пост.
Итак идея реализации: чтоб было не так все просто надо дать возможность переделать все стандартные селекты в продвинутые, точнее не все а только те, у которых специальный css-класс. И не просто в селекты с галаками, а если multiple, то с галками, если нет - то radio. Для этого идем по всем селектам в документе, смотрим на класс, если подходит, то создаем див с бродером как у селекта и такогоже размера, с полосами прокрутки. Внуть него надо запихать дивы с checkbox или radio со значениями и подписями к ним, взятыми из опций селекта. Чтоб была только вертикальная прокрутка запонять будем дивами, у которых overflow буджет none.
После почти всего дня мучений получился вот такой код:
function convertSelects()
{
var selects = document.getElementsByTagName('SELECT');}
for(var s=0; s<selects.length; s++){ select = selects[s]; if(select.className == 'advselect' && select.size) convertSelect(select); }
function convertSelect(obj)
{
var div = document.createElement("div");}
var id = obj.id;
div.style.backgroundColor = 'white';
div.style.color = 'black';
div.style.borderStyle = 'inset';
div.style.borderWidth = 2;
div.style.textAlign = 'left';
div.className = 'advselect';
div.style.overflow = 'auto';
div.style.width = obj.style.width;
div.style.height = obj.style.height;
var name = obj.name;
for(var i=0; i<obj.options.length; i++)
{
var opt = obj.options[i];}
if(obj.multiple) div.innerHTML += '<div style="overflow: hidden;" title="'+opt.text+'"><nobr><input type="checkbox" name="'+name+'[]" value="'+opt.value+'"'+(opt.selected?' checked':'')+'> ' + opt.text + '</nobr></div>';
else div.innerHTML += '<div style="overflow: hidden;" title="'+opt.text+'"><nobr><input type="radio" name="'+name+'" value="'+opt.value+'"'+(opt.selected?' checked':'')+'> ' + opt.text + '</nobr></div>';
obj.parentNode.insertBefore(div, obj);
obj.parentNode.removeChild(obj);
div.setAttribute('id', id);
Теперь как этим пользоваться (из комментария к оригинальному файлу advselect.js).
<body OnLoad="conversSelects();">
<select multiple name="rayon_id" id="rayon_id" style="width: 130px; height: 200px;" size=10 class=advselect>
<select multiple name="rayon_id" id="rayon_id" style="width: 130px; height: 200px;" size=10 class=advselect>
...
</select>
<script>convertSelect(document.getElementById('rayon_id'));</script>
В результате получам вот такие селект-боксы:
Замечания. Имена селектов передаются в создаваемый check и radio элементы, в случае checkbox имя получается вида name[]
т.е. массив, который более удобен для обработки на сервере. Аттрибут id
от селекта передается в id
созданного дива. Для корректного преобразования селекта к продвинутому, у оригинального должны быть прописаны стили ширины и высоты.
Кустомизация. Для изменения внешнего вида можно изменить в CSS класс div.advselect
(общий вид) и div.advselect div
(облик элементов списка).
И на последок еще одно важное замечание. Если форма в которой живет селект-бокс некорректно расположена в документе, например
<table ...>
<form ...>
<tr>
<td>
...
то свежесозданный продвинутый сеект работать не будет, точнее он будет появляться но не будет отдавать свои значения при сабмите формы. Причина этог мне видится в том, что форма занимает некорректное положение в DOM модели документа, и добаляемый элемент в силу непонятных причин вылазит за форму и не учавствует в ее сабмите.
Кому интересно пользуйтесь, но не забывайте плз давать ссылку на мой сайт
С тяпницы на субботу случилась у меня дома коктейльная вечеринка. В качестве коктейля решили выбрать "мохито", приготовление которого в домашних условиях вроде не составляет особого труда
Рецепт коктейля следующий:
Для начала в стакан насыпается коричневый сахар. Затем половинку лайма разрезаем на две четвертинки и выжимаем их в стакан руками, шкурку тоже кидаем в стакан. Потом сверху кладем мяту и разминаем ее пестиком или ложкой, пока мята не начнет сильно пахнуть. Потом насыпаем лед. Наливаем ром, потом содовую насколько останется места в стакане.