| |
|
|
| | Здравствуйте,
Пытаюсь сделать имитацию раскрывающегося списка (select), так как дизайн стандартного не вписывается в дизайн сайта. При щелчке на изображении со стрелочкой появляется div, с содержанием раскрывающегося списка. Проблема состоит в следующем: как скрыть этот div, если пользователь щёлкнул НЕ по этому элементу.
В голову пришёл только один вариант (не считаю его самым подходящим): при раскрытии списка появляется прозрачный div на весь экран, при щелчке по нему список скрывается. В стилях для этого div`a прописывал:
{position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px; height: 100%; width: 100%; }
Однако в Opera и в IE 6 и 7 версиях div на весь экран не создаётся. Он вообще нигде не виден.
Помимо этого глюка (пока его исправить не могу) минусом этого способа является тот факт, что пока виден прозрачный div на весь экран, до других элементов страницы "не достучаться".
Поэтому вопрос: как можно реализовать мою задачу: скрыть блок при щелчке за его пределами? | |
| |
|
|
| |
|
|
| |
для: Desh
(04.08.2009 в 17:36)
| | | Перехватывать соответсвующее событие body. | |
| |
|
|
| |
|
|
| |
для: sim5
(04.08.2009 в 17:50)
| | | А можно поподробнее, пожалуйста? Не до конца понял. | |
| |
|
|
| |
|
|
| |
для: Desh
(04.08.2009 в 17:59)
| | | sim5, видимо имеет ввиду следующее.
Когда Вы щелкнете по элементу находящемуся "выше" в DOM, то у этого "родителя" возникнет событие onclick.
Вот примерно так)
А что касаемо Вашего вопроса выше, то возможно, что Вам нужно body [html] задать размеры. | |
| |
|
|
| |
|
|
| |
для: ddhvvn
(04.08.2009 в 18:18)
| | | Получилось реализовать, отслеживая клик по следующей аналогии:
document.onclick = function (e)
{
e = e || window.event;
var src = e.srcElement || e.target;
// И дальше условия
|
Переменная src.id - содержит имя ID элемента, по которому кликнули.
Спасибо за помощь!) | |
| |
|
|
| |
|
|
| |
для: Desh
(04.08.2009 в 19:09)
| | | Ну вот, пока дали дописать ответ, уже и "самотеком" разобрались :) | |
| |
|
|
| |
|
|
| |
для: Desh
(04.08.2009 в 17:59)
| | | Ну вот простой пример, где обработчик события указан приямо в body, так что, думаю, без подробных разъяснений будет понятно что и почему. Допустим ваш элемент select, это элемент sl из примера, тогда:
<html>
<head>
<script>
function getSrc(e) {
e = e.target ? e.target : e.srcElement;
if (e.id != 'sl') document.getElementById('sl').style.height = 20;
}
</script>
</head>
<body onclick="getSrc(event)">
<div id="sl" onclick="if(this.clientHeight > 20) this.style.height = 20; else this.style.height = 100;"
style="border: 1px solid Black; height: 20px; width: 100px;"></div>
<br>
<select name="">
<option value="1" SELECTED>11111</option>
<option value="2">22222</option>
<option value="3">33333</option>
</select>
<br><br>
<div style="border: 1px solid Black; height: 100px; width: 100px;"></div>
</body>
</html>
|
| |
| |
|
|
