<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Замена элементов select</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {
font: 80% "Trebuchet MS", verdana, helvetica, arial, sans-serif;
}
fieldset {
border: 1px solid #9e0000;
margin: 1em 0;
padding: 10px;
width: 302px;
}
fieldset.wrapper {
border: 0;
margin: 0;
padding: 0;
}
input {
background: #dfb27d;
border: 1px solid #9e0000;
color: #000;
display: block;
margin: 0 0 10px;
padding: 0;
width: 300px;
}
input:focus {
background: #fff;
}
input.button {
color: #9e0000;
cursor: pointer;
width: auto;
float: right;
margin: 10px 0;
padding: 1px 2px;
}
legend {
color: #9e0000;
font-size: 1.2em;
font-weight: bold;
}
label {
display: block;
font-weight: bold;
color: #9e0000;
}
select {
display: block;
margin: 0 0 10px;
width: 300px;
}
/* стили необходимые для работы скрипта */
select.srReplacedSelect {
width: 1px;
position: absolute;
left: -999em;
}
ul.srList {
list-style:none;
padding:0;
/* лучше всего техника работает
для элементов фиксированной ширины
хотя при некоторых дополнителных
требованиях к изображению и небольшом
изменение стилей ее можно применять
и для резиновых select`ов */
width: 300px;
margin: 0 0 10px;
/* поскольку используется техника
Sliding Doors элемент хорошо переносит
масштабирование шрифтов, для этого
его высоту нужно задать в em */
height:1.5em;
}
ul.srList li {
display:none;
background: #DFB27D;
line-height:1.5em;
padding:0 10px;
width:280px;
}
ul.srList li.srHoverLi {
background: wheat;
}
ul.srBlur {
background: url('srBgTop.png') no-repeat;
}
ul.srFocus, ul.srHoverUl {
/* чтобы при наведении мышки
или получении фокуса элемент
не оставался на некоторое время без фона,
и для ускорения загрузки, совмещаем
два фоновых изображения в одном и изменяем его
подвигая на 300 пикслей влево */
background: url('srBgTop.png') no-repeat -300px 0px;
}
ul.srBlur li.srSelectedLi {
display:block;
background: url('srBgBottom.png') no-repeat 0px 100%;
}
ul.srFocus li.srSelectedLi, ul.srHoverUl li.srSelectedLi {
display:block;
background: url('srBgBottom.png') no-repeat -300px 100%;
}
ul.srExpanded li.srSelectedLi {
display:block;
background: wheat;
}
ul.srExpanded {
position:relative;
/* при разворачивании списка,
нужно выдвинуть его на первый
план, иначе другие элементы будут
перекрывать опции */
z-index:1000;
}
ul.srExpanded li {
display:block;
}
</style>
<script>
function rsSelectReplace(sel)
{
//а вдруг мы на осле :)
var ie6 = (navigator.userAgent.search('MSIE 6.0') != -1);
var ul = document.createElement('ul');
//список заменяющий select, свернутый, не в фокусе
ul.className = 'srList srCollapsed srBlur';
//связь между ul и select
ul.srSelect = sel;
sel.srReplacement = ul;
//устанавливаем для элемента select
//класс показывающий, что он замещен
sel.className += ' srReplacedSelect';
//меняем класс элемента ul
//при получении и потере фокуса
//элементом select
sel.onfocus = function() { this.srReplacement.className = this.srReplacement.className.replace(/[\s]?srBlur/, ' srFocus'); }
sel.onblur = function() {
//this.srReplacement.srCollapse();
this.srReplacement.className = this.srReplacement.className.replace(/[\s]?srFocus/, ' srBlur');
}
//каждый браузер болеет по своему
//поэтому обрабатываем и onchange и onkeypress
sel.onchange = function()
{
var ul = this.srReplacement;
ul.srSelectLi(ul.childNodes[this.selectedIndex]);
}
sel.onkeypress = function(e)
{
var i = this.selectedIndex;
var ul = this.srReplacement;
switch (e.keyCode) {
case 9:
this.srReplacement.srCollapse();
break;
case 37: // влево
case 38: // вверх
if (i - 1 >= 0)
ul.srSelectLi(ul.childNodes[i - 1]);
break;
case 40: // вниз
if(e.altKey)
{
//ul.srExpand();
//break;
}
case 39: // вправо
if (i + 1 < ul.childNodes.length)
ul.srSelectLi(ul.childNodes[i + 1]);
break;
case 33: // Page Up
case 36: // Home
ul.srSelectLi(ul.firstChild);
break;
case 34: // Page Down
case 35: // End
ul.srSelectLi(ul.lastChild);
break;
}
}
//меняем класс элемента ul
//при наведении на него мышки
ul.onmouseover = function() { this.className += ' srHoverUl'; }
ul.onmouseout = function() { this.className = this.className.replace(/[\s]?srHoverUl/, ''); }
ul.srSelectLi = function(li)
{
var ul = li.parentNode;
//если уже есть выбранный элемент
//то назначаем снимаем выделение
if(ul.srSelectesIndex != null)
ul.childNodes[ul.srSelectesIndex].className = '';
//запоминаем индекс выбранного элемента
ul.srSelectesIndex = li.srIndex;
//устанавливаем для выбранного элемента
//класс srSelectedLi
ul.childNodes[li.srIndex].className = 'srSelectedLi';
return li.srIndex;
}
ul.srExpand = function()
{
if(!this.srExpanded)
{
if(document.srExpandedList)
document.srExpandedList.srCollapse();
document.srExpandedList = this;
//разворачиваем список
this.className = this.className.replace(/[\s]?srCollapsed/, ' srExpanded');
this.srExpanded = true;
//при раскрытии элемента передаем фокус
//соответствующему select
this.srSelect.focus();
//для особо одаренного браузера
//разворачиваем список особенным способом
if(ie6)
{
var node = this.firstChild;
var offset = 0;
var height = node.clientHeight;
while(node)
{
node.style.position = 'absolute';
node.style.top = offset;
offset += height;
node = node.nextSibling;
}
}
}
}
ul.srCollapse = function(li)
{
if(this.srExpanded)
{
document.srExpandedList = null;
//выбираем элемент списка на который кликнул пользователь
//и устанавливаем соответсвующий индекс выбранного элемента
//для спрятанного элемента select
if(li)
this.srSelect.selectedIndex = this.srSelectLi(li);
//при клике на элементы списка
//соответствующий спрятанный select
//теряет фокус нужно вернуть на место
this.srSelect.focus();
//сворачиваем список
this.className = this.className.replace(/[\s]?srExpanded/, ' srCollapsed');
this.srExpanded = false;
//для особо одаренного браузера
//сворачивам список особенным способом
if(ie6)
{
var node = this.firstChild;
while(node)
{
node.style.position = '';
node = node.nextSibling;
}
}
}
}
var options = sel.options;
var len = options.length;
for(var i = 0; i < len; i++)
{
//для каждого элемента option
//создаем соответствущий li
var li = document.createElement('li');
li.appendChild(document.createTextNode(options[i].text));
//в каждом элементе списка
//храним индекс соответствующего
//элемента option
li.srIndex = i;
//псевдо класс hover в IE работает только для ссылок
//поэтому будем менять класс при наведении мышки
li.onmouseover = function() { this.className += ' srHoverLi'; }
li.onmouseout = function() { this.className = this.className.replace(/[\s]?srHoverLi/, ''); }
ul.appendChild(li);
}
//если по умолчанию не выбран никакой элемент
//выбираем первый
if(sel.selectedIndex == null)
sel.selectedIndex = 0;
//устанавливаем элемент выбранный по умолчанию
ul.srSelectLi(ul.childNodes[sel.selectedIndex]);
//вставляем созданный список
//перед заменяемым select
sel.parentNode.insertBefore(ul, sel);
}
function srAddEvent(obj, type, fn)
{
// функция добавляет обработчик события
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent)
obj.attachEvent( "on"+type, fn );
}
function srOnDocumentClick(e)
{
var target = (window.event) ? window.event.srcElement : e.target;
if(document.srExpandedList)
{
//принадлежит ли соответствующий li списку заменителю select
if((target.srIndex || target.srIndex === 0)
//принадлежит ли наш li открытому в данный момент списку
&& document.srExpandedList == target.parentNode )
document.srExpandedList.srCollapse(target);
else
document.srExpandedList.srCollapse();
}
else
{
if(target.srIndex || target.srIndex === 0)
target.parentNode.srExpand();
}
}
function srReplaceSelects()
{
//заменяем все элементы select
var s = document.getElementsByTagName('select');
var len = s.length
for (var i = 0; i < len; i++)
rsSelectReplace(s[i]);
srAddEvent(document, 'click', srOnDocumentClick);
}
//при реальном применение желательно
//вызывать эту функцию сразу
//после загрузки DOM во многих фреймворках
//есть такая возможность, например, в jQuery
//это можно сделать так:
//$(document).ready(rsReplaceSelects);
srAddEvent(window, 'load', srReplaceSelects);
//для демонстрации
function ShowSelectedValues()
{
var s = document.getElementsByTagName('select');
var len = s.length
var message = '';
for (var i = 0; i < len; i++)
message += s[i].id + ': '
+ s[i].options[s[i].selectedIndex].innerHTML + '\r\n';
alert(message);
return false;
}
</script>
</head>
<body>
<h1>Замена элемента select</h1>
<form action="#" method="post" onsubmit="return ShowSelectedValues();">
<fieldset class="wrapper">
<fieldset>
<legend>Форма примера</legend>
<label for="fld1">Текстовое поле</label>
<input type="text" id="fld1" name="fld1" tabindex="100" />
<label for="something">Заменяемый select</label>
<select id="something" name="something" tabindex="101">
<option value="1">Вариант 1</option>
<option value="2">Вариант 2</option>
<option value="3">Вариант 3</option>
<option value="4">Вариант 4</option>
<option value="5" selected="selected">Вариант 5</option>
<option value="6">Вариант 6</option>
<option value="7">Вариант 7</option>
<option value="8">Вариант 8</option>
</select>
<label for="fld3">Еще одно текстовое поле</label>
<input type="text" id="fld3" name="fld3" tabindex="102" />
<label for="nothing">Еще один select</label>
<select id="nothing" name="nothing" tabindex="103">
<option value="1">А Вариант 1</option>
<option value="2" selected="selected">Л Вариант 2</option>
<option value="3">Б Вариант 3</option>
<option value="4">Н Вариант 4</option>
<option value="5">З Вариант 5</option>
<option value="6">Е Вариант 6</option>
<option value="7">К Вариант 7</option>
<option value="8">В Вариант 8</option>
</select>
</fieldset>
<input class="button" type="submit" value="Отправить" />
</fieldset>
</form>
<p><a href="http://designformasters.info/">Описание техники замены элемента select на сайте Design For Masters</a></p>
</body>
</html> |
FAQ
Поиск
Пользователи
Группы
Регистрация
Профиль
Войти и проверить личные сообщения
Вход
