Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 20.05.2009, 13:27
Флудер
Отправить личное сообщение для ZoNT Посмотреть профиль Найти все сообщения от ZoNT
 
Регистрация: 25.07.2008
Сообщений: 1,271

Сообщение от B~Vladi
if(e.currentStyle&&eval('e.currentStyle.'+type2)!= '')return eval('e.currentStyle.'+type2);
жесть!!! e.currentStyle[type2] не катит уже?
Сообщение от B~Vladi
function xGetEventTarget(evt){ var e=evt||window.event; return (e.target)?e.target:e.srcElement; }
function xGetEventTarget(e){
    e=e||event;
    return e.target||e.srcElement
}

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

СПС за замечание... оптимизация енто хорошо... исправлю...
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2009, 13:41
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от B~Vladi
if(document.getElementById)
Интересно где бы откопать браузер, который не поддерживает getElementById. Мне такой для коллекции нужен.

Сообщение от B~Vladi
if(e.currentStyle&&eval('e.currentStyle.'+type2)!= '')return eval('e.currentStyle.'+type2);
eval - зло. Здесь он совершенно не нужен.

Сообщение от B~Vladi
function xGetStyleValue(e,type1,type2){
Вы точно протестировали эту функцию? Для currentStyle нужен camelCase (или как там называется), а для getPropertyValue нужен .... , блин да не помню. В общем backgroundColor и background-color.

Сообщение от B~Vladi
if(document.documentElement.clientWidth)return document.documentElement.clientWidth;
return document.body.clientWidth;
Кто сказал, что если есть documentElement.clientWidth, то в нем обязательно правильное значение.
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2009, 13:58
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от Riim Посмотреть сообщение
Интересно где бы откопать браузер, который не поддерживает getElementById. Мне такой для коллекции нужен.

eval - зло. Здесь он совершенно не нужен.


Вы точно протестировали эту функцию? Для currentStyle нужен camelCase (или как там называется), а для getPropertyValue нужен .... , блин да не помню. В общем backgroundColor и background-color.


Кто сказал, что если есть documentElement.clientWidth, то в нем обязательно правильное значение.
1. Вам мешает document.all?! стоит ли отрезать его, если можно добавить дополнительную возможность?!

2. Eval исправил... писал её давно.

3. Эта функция работает в указанных браузерах. Если чесно все своиства не перебирал, но если нужно - выложу отдельно ф-цию для чтения/смены бэкграунда.

4. В нём правильное значение. IE8 понимает только эту конструкцию. Без documentElement возвращается пустое значение.

Последний раз редактировалось B~Vladi, 20.05.2009 в 14:55.
Ответить с цитированием
  #6 (permalink)  
Старый 20.05.2009, 14:08
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от B~Vladi
Вам мешает document.all?! стоит ли отрезать его, если можно добавить дополнительную возможность?!
Смело режьте.

Сообщение от B~Vladi
Eval исправил... писал её давно.
Теперь одно и тоже два раза вызывается. Нужно сохранять в переменную.

Сообщение от B~Vladi
выложу отдельно ф-цию для чтения/смены бэкграунда.
background-color это для примера. Там еще много подобных свойств. Вы для каждого будете отдельную функцию писать?

Сообщение от B~Vladi
В нём правельное значение. IE8 понимает только эту конструкцию. Без documentElement возвращается пустое значение.
Тестируйте. На данный момент все совсем плохо.
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2009, 14:18
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от Riim Посмотреть сообщение
Смело режьте.

Теперь одно и тоже два раза вызывается. Нужно сохранять в переменную.

background-color это для примера. Там еще много подобных свойств. Вы для каждого будете отдельную функцию пи сать?

Тестируйте. На данный момент все совсем плохо.
1. Ок... ф-ция удаляется из списка.

2. Так оформленно из соображений компактности кода. Не думаю, что это сильно напрягёт интерпретатор и Вам никто не мешает переписать всё так, как вам это видится.

3. По-видимому я вас не правильно понял. Вас смущает, что background-color!=backgroundСolor?! Прочитайте описание под ф-цией. Мы должны указывать и background-color и backgroundСolor. Если у нас совпадают названия сойств - 2-ой параметр опускаем.

4. ОК. Протестим

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

Функция "Функции получения размеров окна" работает в IE, FF и Opera. Что конкретно плохо?!
Ответить с цитированием
  #9 (permalink)  
Старый 20.05.2009, 14:29
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

Сообщение от B~Vladi
Ок... ф-ция удаляется из списка.
Зачем же совсем удалять. Я имел в виду сделать так:
var $ = function(elem/* id */) {
	return typeof elem == 'string' ? $d.getElementById(elem) : elem;
};


Сообщение от B~Vladi
Так оформленно из соображений компактности кода.
Так он наоборот больше становится.

Сообщение от B~Vladi
По-видимому я вас не правильно понял. Вас смущает, что background-color!=backgroundСolor?! Прочитайте описание под ф-цией. Мы должны указывать и background-color и backgroundСolor. Если у нас совпадают названия сойств - 2-ой параметр опускаем.
Так не проще сделать что бы 'margin-left' автоматически, когда это необходимо переводился в ''marginLeft'', и наоборот.
Ответить с цитированием
  #10 (permalink)  
Старый 20.05.2009, 14:30
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Исправлено описание для ф-ции "получения CSS-свойства". Ошибка была в неправильном описании порядка параметров. В часности свойство backgroudColor возвращается.

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Паралельное выполнение одной и той-же функции Сеня AJAX и COMET 3 24.01.2009 20:59
Вопрос по функции Flex Общие вопросы Javascript 3 05.12.2008 04:03
Как проверить существование функции Aderba Общие вопросы Javascript 2 14.11.2008 16:09
владелец функции diagnost Общие вопросы Javascript 6 30.10.2008 15:04
Помогите разобраться в повторным обращении к функции, как её обнулить. AdvoGad Общие вопросы Javascript 0 01.09.2008 11:35