Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   селект переделанный под список (https://javascript.ru/forum/dom-window/27473-selekt-peredelannyjj-pod-spisok.html)

Vasёk18 13.04.2012 23:49

селект переделанный под список
 
в общем
у меня проблема
нужно сверстать селект
но после мучительных поисков, проб и ошибок, я понял, что тег option толком не форматируется
тогда я наткнулся на тред про замену селекта списком
всё красиво выглядит
но мне надо, чтобы он раскрывался не при нажатии, а при наведении
а в яве я не силён
я так и не понял как переписать код под себя

вот код
<!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>


select {
	display: block;
	margin: 0 0 10px;
	width: 207px;
}

/* стили необходимые для работы скрипта */
select.srReplacedSelect {
	width: 1px;
	position: absolute;
	left: -999em;
}

ul.srList {
	list-style:none;
	padding:0;

	/* лучше всего техника работает 
	   для элементов фиксированной ширины
	   хотя при некоторых дополнителных
	   требованиях к изображению и небольшом
	   изменение стилей ее можно применять
	   и для резиновых select`ов */
	width: 207px;
	margin: 0 0 10px;

	/* поскольку используется техника
	   Sliding Doors элемент хорошо переносит
	   масштабирование шрифтов, для этого
	   его высоту нужно задать в em */
	height:1.5em;
}

ul.srList li {
	display:none;
	background: #eee;
	line-height:1.5em;
	padding:0 10px;
	width:187px;
}

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 -207px 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 -207px 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);

</script>

</head>
<body>

<form action="#" method="post">
		<select id="something" name="something" tabindex="101" onMouseOver="srExpand();">
			<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>

		<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>
</form>
</body>
</html>


помогите поменять его
заранее спасибо


Часовой пояс GMT +3, время: 12:24.