bOntONweb » JavaScript на заметку

jQuery API расширение для Dreamweaver

coder — Mon, 21 Apr 2008 12:17:59 +0000

Постовой: рецепты народной медицины
частное фото

Задача: максимально упростить использование JavaScript-библиотеки jQuery при верстке сайтов в Dreamweaver.
Решение: для этого удобно установить специальное расширение для Dreamweaver, которое значительно упрощает и ускоряет процесс разработки скриптов на базе библиотеки jQuery

Скачать расширение

Обход child nodes (потомков) определнного элемента в Javascript

Mr. Den — Fri, 16 Nov 2007 10:23:50 +0000

Речь о том как корректно обойти элементы потомки DOM для данного элемента, простите за тафтологию

В общем конструкция следующая:

PLAIN TEXT

JAVA:

var object = document.getElementById('el');
for (var childItem in object.childNodes) {
if (object.childNodes[childItem].nodeType == 1)
object.childNodes[childItem].style.color = '#FF0000';
}

В данном примере мы берем некоторый элемент с id = 'el' и проходим по массиву его потомков (childNodes), при этом проверяем nodeType потомка, чтобы он был элементом страницы и если так, то окрашиваем его в КРАСНЫЙ цвет.

В принципе на базе этой конструкции можно организовать рекурсивный обход дерева всех потомков заданного элемента, если конечно возникнет такая необходимость, но пока я представляю только упрощенный вариант.

Здесь следует обратить внимание на проверку свойства nodeType == 1, дело в том что без этой проверки в обработку попадут и разрывы строк, т.е. символы "\n", которые тоже воспинимаются как ноды. Т.е. например конструкция вида:

PLAIN TEXT

HTML:

id="el">
1111
2222
3333

и конструкция:

PLAIN TEXT

HTML:

id="el">
1111
2222
3333

без этой проверки обрабатывались бы по разному, т.е. в первом случае мы бы получили ошибку, поскольку потомок " \n " не имеет свойства style

Добавление обработчика события с помощью JavaScript

Mr. Den — Fri, 16 Nov 2007 10:16:10 +0000

Есть несколько методов, но я приведу код которым пользуюсь сам. С некоей притензией на универсальность не судите строго . Итак:

PLAIN TEXT

JAVA:

function addHandler(object, event, handler)
{
if (typeof object.addEventListener != 'undefined')
object.addEventListener(event, handler, false);
else if (typeof object.attachEvent != 'undefined')
object.attachEvent('on' + event, handler);
else
throw "Incompatible browser";
}

Все в принципе понятно:

object - это наш элемент;
event - желаемое событие, к которому мы и написали обработчик
handler - собственно функция - обработчик

Работает в IE, FF, Opera, Safari, где не работает честно говоря не нашел

Пример вызова:

PLAIN TEXT

JAVA:

var but = document.getElementById('but');
addHandler(but, 'mousedown', change_but_status);

Здесь, естесственно, change_but_status - функция обработчик должна быть где-то описана.

О, да, чуть не забыл, функция удаления обработчика события у элемента (параметры аналогичны):

PLAIN TEXT

JAVA:

function removeHandler(object, event, handler)
{
if (typeof object.removeEventListener != 'undefined')
object.removeEventListener(event, handler, false);
else if (typeof object.detachEvent != 'undefined')
object.detachEvent('on' + event, handler);
else
throw "Incompatible browser";
}

Добавление скрипта в DOM средствами JavaScript (читать жабаскрипт :)

Mr. Den — Wed, 14 Nov 2007 00:37:55 +0000

Это полезно, например в случае когда в результате AJAX запроса возвращается среди прочего некоторый кусок javascript кода, который нужно выполнить в броузере.

Фишка состоит в том, что javascript код нужно помещать в head документа, тогда он будет выполнен.

Последовательность добавления следующая:

PLAIN TEXT

JAVA:

scriptNode = document.createElement("script");
scriptNode.type = "text/javascript";
scriptNode.text = elValue;
document.getElementsByTagName('head')[0].appendChild(scriptNode);

Как нетрудно видеть в этом случае содержимое (собственно javascript код) представлено переменной elValue, а созданный элемент script добавляется в head документа

Как в IE перекрыть элемент управления формы своим контентом

Mr. Den — Wed, 14 Nov 2007 00:19:03 +0000

Ситуация, с которой сталкиваются при разработке галлерей или своих визуальных эффектов, или еще чего-нибудь, но в общем дело состоит в следующем: всеми гарячо любимый IE не может позволить визуально перекрыть элемент управления формы, например Div - ом с вашим драгоценным контентом плавно перемещаемым по экрану.

В этом случае может помочь следующая конструкция:

PLAIN TEXT

HTML:

id="ShimDiv" style="position:absolute; left:0; top:0">
id="tipShim" src="about:blank" scrolling="no"
frameborder="0" style="position:absolute; z-index:500">

Здесь, весь необходимый нам контент помещаем в iframe (id = tipShim), а управляем перемещением и прочими параметрами визуализации в div - е (id = ShimDiv).