Показать сообщение отдельно
  #4 (permalink)  
Старый 02.07.2009, 14:54
Аспирант
Отправить личное сообщение для Logo Посмотреть профиль Найти все сообщения от Logo
 
Регистрация: 15.03.2008
Сообщений: 91

Сообщение от Kolyaj Посмотреть сообщение
Фокус, он на то и фокус, что может находится только в одном элементе в конкретный момент времени.
Да, но если фокус с предыдущего снимается в результате метода focus() на следующем, событие blur предыдущего не срабатывает
См. код. Когда кликаешь на втором селекте предыдущий не закрывается.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
.simstyle-drop {display:none}
/********/
.simstyle-box {border:1px dashed red; display:inline-block; position:relative; margin:0 2px; cursor:pointer}
.simstyle-drop {position:absolute; top:100%; left:0; width:100%; border:1px solid #00f}
.simstyle-label {background:#aaf; margin-right:10px}
.simstyle-but {position:absolute; width:10px; height:10px; background:#f00; top:0; margin-left:100%; left:-10px}
.simstyle-drop span {display:block; zoom:1; background:#fff; width:100%}
.simstyle-drop .sel {background:#faa;}
</style>
<script type="text/javascript">
$(function() {
	a=$('select')
	for(i=0; i<a.length; i++) {
	   	new selectClass(a[i]);
	}
});

function selectClass(select) {
	$(select).css({'position' : 'absolute', 'left' : '-2000px'})
	this.box = $(select).wrap('<span class="simstyle-box"></span>').parent()
	$(this.box).append('<span class="simstyle-label"></span><span class="simstyle-but"></span><span class="simstyle-drop"></span>')
	this.drop = $(this.box).find('.simstyle-drop')
	this.select = select
	var self = this
	var i
	var a
	a = $(select).find('option')
	for (i=0; i<a.length; i++) {
		$(this.drop).append('<span>'+$(a[i]).text()+'</span>')
	}	
	$(this.box).find('.simstyle-label').text( $(this.box).find('option:selected').text() )
	$(this.box).find('.simstyle-label, .simstyle-drop span').attr('unselectable', 'on').css({'-khtml-user-select':'none', '-mox-user-select':'none', 'user-select':'none'})
		
	this.dodrop = function() {
		$(self.drop).show()
	}
	this.doundrop = function() {
		$(self.drop).hide()
	}	
	this.sel = function(i) {		
		$(this.select).find('*').attr('selected', '')
		$(this.select).find(':eq('+i+')').attr('selected', 'selected')
		$(this.box).find('.simstyle-label').html( $(this.select).find(':selected').text())
		self.doundrop()
	}
		
	
	$(this.box).mousedown( function() {$(self.select).focus(); return false})
	$(this.select).focus( function() {self.dodrop()})
	$(this.select).blur( function() {self.doundrop()})
	$(this.drop).find('span').hover(function() {$(this).addClass('sel')},  function() {$(this).removeClass('sel')})
	$(this.drop).find('span').mousedown(function() {self.sel(  $(self.drop).find('span').index(this) ); return false})		
}
</script>
</head>
<body>
Текст 
<form>
<div>
Это
<select id="MySelect">
	<option value="1">Раз</option>
    <option value="2">Два</option>
    <option value="three">Три</option>
    <option value="for">Четыре</option>
    <option value="5"> Пять</option>
    <option value="VI">Шесть</option>
</select>
селект

<select id="MySelect">
	<option value="1">Раз</option>
    <option value="2">Два</option>
    <option value="three">Три</option>
    <option value="for">Четыре</option>
    <option value="5"> Пять</option>
    <option value="VI">Шесть</option>
</select>
</div>
</form>
Текст
</body>
</html>
Ответить с цитированием