Мелкие, но полезные функции. Часть 1
Очень часто в больших и масштабных проектах, а также в проектах попроще приходится пользоваться всякими мелкими функциями для различных целей. Чаще всего эти функции повторяются от проекта к проекту, поэтому сегодня хочу поделится с вами тем набором, которым мне приходится пользоваться чаще всего.
1) getElementsByClass by Dustin Diaz
function getElementsByClass(searchClass,tag,node) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
2) addLoadEvent() by Simon Willison
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldonload();
func();
}
}
}
3) Определение координат объекта:
function getAbsoluteTop(obj) {
var posTop = 0;
while (obj.offsetParent)
{posTop += obj.offsetTop; obj = obj.offsetParent;}
return posTop;
}
function getAbsoluteLeft(obj) {
var posLeft = 0;
while (obj.offsetParent)
{posLeft += obj.offsetLeft; obj = obj.offsetParent;}
return posLeft;
}
var posTop = 0;
while (obj.offsetParent)
{posTop += obj.offsetTop; obj = obj.offsetParent;}
return posTop;
}
function getAbsoluteLeft(obj) {
var posLeft = 0;
while (obj.offsetParent)
{posLeft += obj.offsetLeft; obj = obj.offsetParent;}
return posLeft;
}
4) Определение размеров видимой области браузера:
Первый вариант:
function getSize(){
var _size = {};
if (window.innerHeight) {
_size.h = window.innerHeight; _size.w = window.innerWidth;
} else {
_size.h = document.documentElement.clientHeight;
_size.w = document.documentElement.clientWidth;
}
return _size;
}
var _size = {};
if (window.innerHeight) {
_size.h = window.innerHeight; _size.w = window.innerWidth;
} else {
_size.h = document.documentElement.clientHeight;
_size.w = document.documentElement.clientWidth;
}
return _size;
}
Второй вариант (немного сложнее реализация) + scrollLeft и scrollTop:
function f_clientWidth() {
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_clientHeight() {
return f_filterResults (
window.innerHeight ? window.innerHeight : 0,
document.documentElement ? document.documentElement.clientHeight : 0,
document.body ? document.body.clientHeight : 0
);
}
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_clientHeight() {
return f_filterResults (
window.innerHeight ? window.innerHeight : 0,
document.documentElement ? document.documentElement.clientHeight : 0,
document.body ? document.body.clientHeight : 0
);
}
function f_scrollLeft() {
return f_filterResults (
window.pageXOffset ? window.pageXOffset : 0,
document.documentElement ? document.documentElement.scrollLeft : 0,
document.body ? document.body.scrollLeft : 0
);
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
5) Еще один вариант определения scrollTop и scrollLeft:
function getBodyScrollTop() {
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
function getBodyScrollLeft() {
return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
function getBodyScrollLeft() {
return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}
Продолжение следует…
4 Коментариев to Мелкие, но полезные функции. Часть 1
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
Для getElementsByClass, имхо, грешно не использовать XPath и document.getElementsByClassName в тех случаях, когда они поддерживается браузером.
Вы можете выложить собственную функцию для выборки элементов по классу…
Я написал свой вариант getElementsByClassName :)
http://vl.vg/18.01.2010/get-elements-by-class-name/
Спасибо, хорошо описал ;)