Видимо проблема в том, что у меня инпуты находятся в одном контейнере (#panel), кнопки открыть/закрыть - в другом (.login_tab), оба они находятся в #toppanel, в котором при событий $('#toppanel').blur должен закрываться контейнер находящийся в нем (#panel), а не сам #toppanel
|
zevilz, чет я забыл про вас=)
<!DOCTYPE HTML>
<html>
<head>
<style>
#block {
width:200px;
height:200px;
border:4px solid red;
display:none;
}
body {
border:2px solid black;
}
</style>
</head>
<body tabindex='-1'>
<div tabindex='-1' id='block'>
wereasrwer
<input type='text'>
<div>
<input type='text'>
</div>
</div>
<div id='inform'></div><br/>
<a href='#' id='open'>open/close</a>
<br><input type='text'>
<script>
function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
function Focus_and_Blur(opt){
var elem = opt.elem, focusForElem;
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
document.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
document.onfocusin = onDocumentFocus;
}
function onFocus(e) {
focusForElem = true;
event.cancelBubble = true;
opt.focus.call(this,e);
}
function onDocumentFocus (e) {
if (focusForElem) {
focusForElem = false;
opt.blur.call(elem,e)
}
}
};
//пример вызова, в саму функцию лучше не лезть
Focus_and_Blur({
elem:_('#block'),
focus:function () {
_("#inform").innerHTML = 'focus on '+ this.id;
},
blur: function () {
_("#inform").innerHTML = 'blur '+ this.id;
_('#block').style.display = 'none';
}
});
_('#open').onclick = function () {
_('#block').style.display = 'block';
_('#block').focus();// ставим фокус на блок
return false;
}
</script>
</body>
</html>
вот |
Что-то не хочет открываться
<!DOCTYPE HTML>
<html>
<head>
<style>
#toppanel {
position:fixed;
z-index: 999;
margin:0px;}
#toppanel a {cursor:pointer;}
#toppanel:focus {outline: none;}
#panel {
position: relative;
z-index: 3;
display: none;}
#toppanel .login_tab {
position: relative;
top: 0;
z-index: 999;}
</style>
</head>
<body>
<div id="toppanel" tabindex="-1">
<div id="panel">
<div class="content_panel clearfix_panel">
<input type='text' id='fld1' size='10' name='req_username' value=''>
<input type='password' id='fld2' size='10' name='req_password' value=''>
</div>
</div>
<div class="login_tab">
<span id="toggle">
<a id="open" class="open">Открыть панель</a>
<a id="close" style="display: none;" class="close">Закрыть панель</a>
</span>
</div>
</div>
<script>
function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
function Focus_and_Blur(opt){
var elem = opt.elem, focusForElem;
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
document.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
document.onfocusin = onDocumentFocus;
}
function onFocus(e) {
focusForElem = true;
event.cancelBubble = true;
opt.focus.call(this,e);
}
function onDocumentFocus (e) {
if (focusForElem) {
focusForElem = false;
opt.blur.call(elem,e)
}
}
};
//пример вызова, в саму функцию лучше не лезть
Focus_and_Blur({
elem:_('#panel'),
focus:function () {
// $("#toggle a").toggle();
},
blur: function () {
// $("#toggle a").toggle();
$("div#panel").slideUp("slow");
// _('#panel').style.display = 'none';
}
});
_('#open').onclick = function () { $("div#panel").slideDown("slow");
$("#toggle a").toggle();
_('#panel').style.display = 'block';
_('#panel').focus();// ставим фокус на блок
return false;}
_('#close').onclick = function () { $("div#panel").slideUp("slow");
$("#toggle a").toggle();
// _('#panel').style.display = 'none';
// _('#panel').blur();// ставим фокус на блок
return false;}
</script>
</body>
</html>
|
оно и не должно работать, потому что нужно либо копировать полностью с функцией
function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
либо ее не использовать |
В посте выше изменил код - не открывается.
На сайте http://yellow-duck.net/ с тем же самым кодом открывается, закрывается. Но по blur не закрывается. Выделяется только один из инпутов. При выделении второго панель закрывается и при этом не работает toggle |
если честно то не знаю у вас там такая камасутра получилась из за пери мешки чистого js и jquery..
|
Может легче будет мой переделать?
$(document).ready(function() {
// Сворачиваем панель
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Сворачиваем панель при снятии фокуса
$("#toppanel").blur(function(){
$("div#panel").slideUp("slow");
$("#toggle a").toggle();
});
// Разворачиваем панель
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Переключаем кнопки "Войти | Регистрация" на "Закрыть панель" при нажатии кнопки мыши
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
а именно в:
// Сворачиваем панель при снятии фокуса
$("#toppanel").blur(function(){...}
реально засунуть условие что-нибудь типа такого
if ("#toppanel input:focus") {$("div#panel").slideUp("slow");
$("#toggle a").toggle();}
else {}
? |
не, я ненавижу jquery особенно после моего прошлого проекта.
Могу расписать алгоритм как у меня работает а вы уже сами переделаете |
А от чего такая ненависть? можно и как у вас
|
не знаю просто не люблю я jquery.
Алгоритм: -ставим событие focus(у меня стоит focus для норм браузеров и focusin для тех которые не поддерживают addEventListener) на element и на body -при получение фокуса элементом , переменная focusForElem ставится в true -при получение фокуса на body проверяется focusForElem если true то значить фокус ушел с element |
| Часовой пояс GMT +3, время: 23:02. |