Показать сообщение отдельно
  #1 (permalink)  
Старый 20.05.2009, 13:14
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Кросс-браузерные функции
Вот такими функциями пользуюсь для себя. Может кому-то будут полезны. Пишите если в них что-то не так.

Функция получения CSS-свойства.

function xGetStyleValue(e,type1,type2){
	if(!type2)type2=type1;
	if(e.currentStyle&&e.currentStyle[type2]!='')return e.currentStyle[type2];
	else if(window.getComputedStyle(e,'').getPropertyValue(type1)!='')return window.getComputedStyle(e,'').getPropertyValue(type1);
}


Функция возвращает установленное, либо вычисленное значение указаного CSS-свойства. Под установленным подразумевается, значение описанное в CSS файле, либо присвоено по-умолчанию браузером. Если возвращается дефолтное значение, то естесственно оно может различаться в разных браузерах. Так же стоит заметить, что некоторые браузеры хранят значение CSS-свойств в разных форматах. Это не значит, что вы получите неправельные данные, просто они немного другого вида. Допустим вы определили в CSS файле сойство background-color в #fff для узла body. Тогда при попытке получить значение этого свойства, IE возвратит #fff, а Mozilla rgb(255, 255, 255). Оба ответа являются правельными и для того чтобы можно было пользоваться ими, необходима дополнительная функция-конвертер. Функция xGetStyleValue показывает, как всё-таки можно получить значения CSS свойств, если вы явно не указывали его в скрипте или через аттрибут style, т.к. при обращении, например, к ele.style.backgroundColor мы получим пустую строку.

Параметры:

e - узел DOM
type1 - своиство CSS (строка) как при использовании в файлах стилей, например 'margin-left'
type2 - свойство CSS (строка) как при динамическом обращении, например 'marginLeft'

Если свойства CSS одинаковые в обоих представлениях, например width, второй параметр можно не указывать.

Установка прозрачности

function xAlpha(e,n){
	(document.body.style.opacity)?e.style.opacity=n/100:e.style.filter=(n>=100)?null:'progid:DXImageTransform.Microsoft.Alpha(opacity='+n+')';
}


Параметры:

e - узел DOM
n - число от 0 до 100. 100 - нет прозрачности.

Функции получения размеров клиентской области окна

function xClientWidth(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientWidth:document.body.clientWidth;}
function xClientHeight(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientHeight:document.body.clientHeight;}


Функции для работы с событиями

Добавление функции для обработчика

function xAddEventListener(e,eventType,eventListener){
	if(e.addEventListener) e.addEventListener(eventType,eventListener,false);
	else if(e.attachEvent) e.attachEvent('on'+eventType,eventListener);
}


Параметры:

e - узел DOM
eventType - тип события без префикса 'on', например 'mousedown'
eventListener - имя регистрируемой функции

Удаление функции из обработчика

function xRemoveEventListener(e,eventType,eventListener){
	if(e.removeEventListener) e.removeEventListener(eventType,eventListener,false);
	else if(e.detachEvent) e.detachEvent('on'+eventType,eventListener);
}


Параметры аналогичны функции xAddEventListener().

Получение объекта, вызвавшего данное событие

function xGetEventTarget(evt){
	var e=evt.target||event.srcElement;
	return (e.nodeType==1)?e:e.parentNode;
}


В качестве параметра передаём событие. Например мы зарегистрировали функцию onEvent() с помощью функции xAddEventListener(). Для того, чтобы передать событие в нашу ф-цию пишем так:

function onEvent(evt){
	var e=xGetEventTarget(evt);
}


В переменной е хранится узел DOM, сгенерировавший событие.

Снятие выделения с текста

function clearSelection(){
	(document.selection&&document.selection.empty)?document.selection.empty():window.getSelection().removeAllRanges();
}


Отмена просачивания события

function xClearEvent(evt){
	if(evt.stopPropagation)evt.stopPropagation();
	else event.cancelBubble=true;
}


Сюда передаём сгенерированное событие, как для xGetEventTarget().

Отмена события по-умолчанию

function xCancelDefEvent(evt){
	if(evt.preventDefault)evt.preventDefault();
	else event.returnValue=false;
}


Сюда передаём сгенерированное событие, как для xGetEventTarget().

Функции для работы с AJAX

Создание объекта AJAX

function xCreateRequest(){
	return (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
}


Трансормация XML + XSL

function xTransform(xml,xsl){
	if(window.ActiveXObject)return xml.transformNode(xsl);
	var proc=new XSLTProcessor();
	var ser=new XMLSerializer();
	proc.importStylesheet(xsl);
	return ser.serializeToString(proc.transformToFragment(xml,document));
}


Передаём файлы XML и XSL, полученные в AJAX-ответе и получаем строку, которую затем можно вставить на страницу методом innerHTML.

Пока всё... Если кому непонятно как использовать ту или другую функцию - пишите.

Последний раз редактировалось B~Vladi, 31.08.2009 в 13:40.
Ответить с цитированием