Цитата:
Сообщение от Kolyaj
(Сообщение 23441)
Фокус, он на то и фокус, что может находится только в одном элементе в конкретный момент времени.
|
Да, но если фокус с предыдущего снимается в результате метода 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>
|