Мелкие, но полезные функции. Часть 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;
}

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();
        }
    }
}

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;
}

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;
}

Второй вариант (немного сложнее реализация) + 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;
}

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);
}

Продолжение следует…

Tags:

Суббота, Сентябрь 26th, 2009 JavaScript

4 Коментариев to Мелкие, но полезные функции. Часть 1

  • subzey:

    Для getElementsByClass, имхо, грешно не использовать XPath и document.getElementsByClassName в тех случаях, когда они поддерживается браузером.

  • Вы можете выложить собственную функцию для выборки элементов по классу…

  • Я написал свой вариант getElementsByClassName :)
    http://vl.vg/18.01.2010/get-elements-by-class-name/

  • Спасибо, хорошо описал ;)

  • Оставить сообщение

    Rotaban.ru - биржа банерной рекламы