Главная » Полезные статьи » Язык JavaScript » Сворачивание и разворачивание блока на javascript
Распечатать статью

Сворачивание и разворачивание блока на javascript

Передо мной стояла задача написать плавное сворачивание и разворачивание блока на javascript, без использования библиотек jqery и ей подобных. Но эффект должен быть подобен jquery toggle, то есть должно быть плавное сворачивание блока и разворачивание блока, как вконтакте.

Решением данной задачи является мною написанная javascript функция, которая не занимает более 1,3кб.

Ниже предоставлен код и пример использования функции сворачивания/разворачивания div блоков.

js код сворачивания/разворачивания блока

 

function toggle(id)
{
        var e = document.getElementById(id);
        var dh = gh(id);
        var elems = e.getElementsByTagName(‘*’);
        if (e.style.display == «none»)
        {
                for(var i=0; i<elems.length; i++){vhe(elems[i], «hidden»);}
                e.style.height=«1px»;
                e.style.display = «block»;
                for(var i=0;i<=100;i+=5)
                {
                        (function()
                                {
                                        var pos=i;
                                        setTimeout(function(){e.style.height = (pos/100)*dh+1+«px»;},pos*5);
                                }
                        )();
                }
                setTimeout(function(){for(var i=0; i<elems.length; i++){elems[i].style.visibility=«visible»;}},500);
                return true;
        }
        else
        {
                var lh=dh-1+«px»;
                for(var i=0; i<elems.length; i++){vhe(elems[i], «hidden»);}
                for (var i=100;i>=0;i-=5)
                {
                        (function()
                                {
                                        var pos=i;
                                        setTimeout(function()
                                        {
                                                e.style.height = (pos/100)*dh+«px»;
                                                if (pos<=0)
                                                {
                                                        e.style.display = «none»;
                                                        e.style.height=lh;
                                                }
                                        },1000-(pos*5));
                                }
                        )();
                }
                return true;
        }
        return false;
}
function vhe(obj, vh){obj.style.visibility=vh;}
function gh(id)
{
        var e = document.getElementById(id);
        if(e.style.display == «none»)
        {
                e.style.visibility = «hidden»;
                e.style.display = «block»;
                dh = e.clientHeight||e.offsetHeight+5; // Высота
                e.style.display = «none»;
                e.style.visibility = «visible»;
        }
        else
        {
                dh = e.clientHeight||e.offsetHeight+5; // Высота
        }
        return dh;
}

Как видите в примере предоставлено три функции: toggle — отвечает за сворот/разворот блока, а остальные вспомогательные, одна определяет высоту div блока, другая показывает или скрывает дочерние элементы нужного блока.

Использование функции:

 

<div id=«block» style=«display:none;»>
                <input type=«text» value=«логин»/>
                <input type=«text» value=«пароль»/>
                Текст блока…
                <input type=«submit» value=‘Войти’/>
</div>
<div onClick=«toggle(‘block’);»>Свернуть/Развернуть</div>

Как видите все просто, по нужному событию посылаем у функцию id блока и наслаждаемся красивым сворачиванием и разворачиванием блока на javascript

Источник:  sitear.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи