| |
|
|
| | Например, на Gmail при нажатии на кнопку "Еще" или "Почта" показывается менюшка. А при расфокусировки этой кнопки эта менюшка пропадает.
Как такое реализовать, помогите. | |
| |
|
|
| |
|
|
| |
для: lElectroHardl
(13.02.2012 в 22:56)
| | | Может использоваться скриптовая инструкция для события onblur на этой кнопке.
Может по нажатию кнопки назначаться функция на событие click по документу вне открывшегося меню. В момент такого клика меню сворачивается и эта функция с документа снимается. Проверьте: если ещё раз нажать на кнопку - меню исчезнет? Если исчезнет при повторном нажатии - то именно этот вариант использован.
А может и ещё как-то...
Вариантов различных - море.
И плюс ещё один к этому "морю", мне неизвестный :-) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(13.02.2012 в 23:39)
| | | Спасибо, завтра буду копать :) | |
| |
|
|
| |
|
|
| |
для: lElectroHardl
(14.02.2012 в 00:14)
| | | Да что там искать-то? Держите:
<html>
<head>
<style>
html, body {height: 100%}
</style>
<script>
function mF ()
{
if (window.addEventListener) window.addEventListener ('click', mFclck, true);
else window.attachEvent ('onclick', mFclck, true);
document.getElementById ('mDV').style.display = '';
}
function mFclck (ev)
{
var e = window.event || ev, obj = e.srcElement || e.target;
while (obj.tagName != 'BODY' && obj.id != 'mDV') obj = obj.parentNode;
if (obj.id != 'mDV')
{
document.getElementById ('mDV').style.display = 'none';
if (window.addEventListener) window.removeEventListener ('click', mFclck, false);
else window.detachEvent ('onclick', mFclck, false);
}
}
</script>
</head>
<body>
<input type="button" onclick="mF ()" value="Go!"><br><br>
<div id="mDV" style="width: 100px; height: 100px; background: lime; display: none"><span><i>Menu</i></span></div>
</body>
</html>
|
П-1: Стиль для высоты тега BODY дан, чтобы задействовать всё окно браузера в данном примере в браузерах Mozilla.
П-2: конструкция <span><i>Menu</i></span> нарисована для того, чтобы показать - что кликать можно не только по самому диву-меню, но и по любому тегу, в него входящему. | |
| |
|
|
| |
|
|
| |
для: ЯСА
(14.02.2012 в 03:17)
| | | Работает отлично.
Но на сайте таких кнопочек будет более 10-ка. Как мне определить, на какой именно INPUT нажали и какой именно (соответственный) скрытый DIV нужно показывать?
Очень хорошо будет реализация на jQuery. | |
| |
|
|
| |
|
|
| |
для: lElectroHardl
(14.02.2012 в 20:28)
| | |
<html>
<head>
<style>
html, body {height: 100%}
</style>
<script>
function mF (x)
{
if (window.addEventListener)
window.addEventListener ('click', mFclck, true);
else window.attachEvent ('onclick', mFclck, true);
MN = document.getElementById (x);
MN.style.display = '';
}
function mFclck (ev)
{
var e = window.event || ev, obj = e.srcElement || e.target;
while (obj.tagName != 'BODY' && obj != MN) obj = obj.parentNode;
if (obj != MN)
{
MN.style.display = 'none';
if (window.addEventListener)
window.removeEventListener ('click', mFclck, false);
else window.detachEvent ('onclick', mFclck, false);
}
}
</script>
</head>
<body>
<input type="button" onclick="mF ('mDV1')" value="Go 1"><br><br>
<input type="button" onclick="mF ('mDV2')" value="Go 2"><br><br>
<div id="mDV1" style="width: 100px; height: 100px; background: lime; display: none"><span><i>Menu1</i></span></div>
<div id="mDV2" style="width: 100px; height: 100px; background: blue; display: none; margin-left: 200px"><span><i>Menu2</i></span></div>
</body>
</html>
|
>"Очень хорошо будет реализация на jQuery."
Кому будет "очень хорошо"? :-)) | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.02.2012 в 10:08)
| | | Большое спасибо!
А по-поводу Квери. Я думал, что на ней это реализовать будет проще. Что-вроде:
$(".element").clickFocus(function()
{
// фокусировка на кнопке
// показываем скрытый объект
},
function()
{
// расфокусировка
// скрываем объект
});
|
Может есть какое-то решение? | |
| |
|
|
| |
|
|
| |
для: lElectroHardl
(15.02.2012 в 17:30)
| | | Увы... массовое безумие, видимо, не излечивается. Эпидемия, плять...
function mF (x) {
if (window.addEventListener) window.addEventListener ('click', mFclck, true);
else window.attachEvent ('onclick', mFclck, true);
MN = document.getElementById (x); MN.style.display = ''}
function mFclck (ev) {
var e = window.event || ev, obj = e.srcElement || e.target;
while (obj.tagName != 'BODY' && obj != MN) obj = obj.parentNode;
if (obj != MN) {MN.style.display = 'none';
if (window.addEventListener) window.removeEventListener ('click', mFclck, false);
else window.detachEvent ('onclick', mFclck, false)}}
|
Ну вот куда ещё ПРОЩЕ-то?
Без подключения многокилобайтной JS-библиотеки вы уже не представляете себе нормальной половой жизни?
Вам обязательно нужна виагра JQuery? | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.02.2012 в 23:28)
| | | Я сужу (в данном случае) по к-во строк кода. Если есть такая функция в jQuery как "фокусировка элемента" и "расфокусировка элемента", то не легче ли использовать это 2+2 строки кода, чем использовать то, что написали вы (спасибо конечно за помощь)?
Тем-более, на сайте в любом случае подгружается jQuery. | |
| |
|
|
