воскресенье, 9 мая 2010 г.

Подсветка меню на jquery

И сново javascript вынес мне мозг.

Я обожаю брать готовые решения в виде заплаток при реализации. Это, как правило, экономит, кучу времени. На этот раз всё случилось аналогично, но времени не сэкономило...

Те кто сталкивался с вебом наверняка знакомы с такой софтиной, как dreamweaver. Её исключительная особенность - автоматическая генерация кода для всяких динамических меню и т.д. Все её функции начинаются с MM_.

Так вот, с самого начала проекта необходимо было реализовать простейшее меню с подсветкой, состоящее из одних картинок. В результате я нашел "готовое решение", сгенерированное вышеупомянутым софтом. В итоге поймал множество глюков и багов (один из которых так и не смог отловить) и всё таки решил черкануть 2 строки на jquery.

А теперь сравним разницу:
javascript

function M_preloadImages() {
    var d = document;
    if (d.images) {
    if (!d.M_p)
        d.M_p = new Array();
    var i, j = d.M_p.length, a = M_preloadImages.arguments;
    for (i = 0; i < a.length; i++)
        if (a[i].indexOf("#") != 0) {
        d.M_p[j] = new Image;
        d.M_p[j++].src = a[i];
        }
    } // if
}

function M_findObj (n, d) {
    var p, i, x;
    if (!d)
    d = document;
    if ( (p = n.indexOf("?")) > 0&&parent.frames.length) {
    d = parent.frames[n.substring(p+1)].document;
    n = n.substring(0, p);
    }
    if (!(x = d[n])&&d.all)
    x = d.all[n];
    for (i = 0; x&&i < d.forms.length; i++)
    x = d.forms[i][n];
    for (i = 0; !x&&d.layers&&i < d.layers.length; i++)
    x = M_findObj(n, d.layers[i].document);

    return x;
}

function M_swapImage() {
    var i, j = 0, x, a = M_swapImage.arguments;
    document.M_sr = new Array;
    for (i = 0; i < (a.length - 2); i += 3)
    if ( (x = M_findObj(a[j])) != null) {
        document.M_sr[j++] = x;
        if (!x.oSrc)
        x.oSrc = x.src;
        var but_numb = a[0];
        if (a[0].length == 11) {
        if (but_numb.charAt(a[0].length - 1) != page_id)
            x.src = a[i+2];
        }
        else
        x.src = a[i+2];
          
    }
}
И, вуаля, jquery:
var el_name ="";
var el = "";
function selectImage() {
    var a = selectImage.arguments;
    el_name = $(a[0]).attr('src');
    el = a[0];
    $(a[0]).attr('src', a[1])
}


function imgRestore() {
    $(el).attr('src', el_name)
}

html для элемента:
 <a href=""><img src="image_unactive.png"
onMouseOut="imgRestore()"
onMouseOver="selectImage('#item1', 'image_active.png')"
id="item1"/></a>



Скажу одно, жаль что когда начинал делать, ещё не понимал в jquery...

Комментариев нет: