Slide-down Переключить на English

Перейти на GitHub b2bcenter/slide-down

Slide Down

Очередной jQuery плагин для показа блоков, который умеет делать это по другому. Необходим для выезжающих блоков, которые именно "выезжают" и сдвигают контент.

Демо

Виды анимации

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices mi sed purus suscipit pulvinar. Donec elementum condimentum odio, tempor egestas sapien tincidunt ac. Donec non lacus metus. Phasellus at tellus tristique, pulvinar felis quis, molestie diam. Aliquam ut ipsum in libero malesuada pulvinar. Nunc quam odio, condimentum vel arcu eu, posuere dapibus nisl. Fusce laoreet vel lacus non imperdiet. Etiam iaculis, neque eu laoreet maximus, ligula odio tempus justo, sit amet pulvinar ex ligula a ante. Duis hendrerit efficitur gravida. Donec viverra tortor semper nisi ullamcorper luctus. Duis rutrum, eros id pretium rhoncus, leo ex ultricies tellus, a imperdiet odio lorem vel mi. Morbi gravida augue at interdum venenatis. Nam eget mi ut lorem condimentum iaculis vel at nunc. Suspendisse vehicula lorem vel metus mollis, eget consequat turpis tempor.

Ease-Fast

Maecenas ut interdum est, nec ullamcorper sapien. Sed mattis tempor molestie. Integer eleifend magna at massa euismod aliquet. Cras scelerisque elementum justo, non tristique sem accumsan a. Quisque vulputate viverra posuere. Suspendisse potenti. Proin dictum vel enim vitae faucibus. Cras elementum, mauris non mollis porttitor, risus mi posuere ex, ut rutrum eros mauris nec neque. Phasellus molestie dui quis tellus lobortis, nec consectetur mauris maximus. Praesent vestibulum felis sit amet urna ornare, non fringilla nunc tempor. Praesent feugiat ultrices justo, in varius lorem placerat eget.

Ease-Slow

Etiam id tortor at purus pulvinar lobortis. In hac habitasse platea dictumst. Donec tincidunt justo eu bibendum semper. In sit amet mauris porttitor, congue leo et, pretium magna. Sed porta, ligula sed facilisis posuere, dui leo mollis est, quis vulputate sem turpis sit amet mauris. Etiam laoreet ac nunc non dignissim. Aenean non egestas libero. Ut rhoncus justo eget nisi convallis, ut lobortis nisi imperdiet. Nunc eleifend, libero vel dignissim cursus, purus libero tempor lorem, sit amet blandit erat ipsum ut arcu. Suspendisse sit amet porttitor velit. Maecenas fermentum gravida nulla ullamcorper luctus. Aenean vehicula eros quis ultrices interdum. Aenean suscipit ultrices lobortis. Praesent eu tellus lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam quis tortor non turpis dictum venenatis.

Bounce

Vivamus vitae dolor ut nibh hendrerit posuere sed nec mi. Fusce egestas, felis iaculis tincidunt gravida, erat purus facilisis justo, sed pretium dui nulla ac nulla. Phasellus ac ante sollicitudin, efficitur magna eu, faucibus ligula. Donec et dignissim elit. Nulla erat orci, suscipit sit amet cursus ac, ultricies et leo. Etiam tempor odio et lacus porta ornare. Maecenas gravida tincidunt turpis id porta.

Extend trigger

Bounce-Fast

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat justo eget risus laoreet imperdiet. Nunc molestie vitae dui congue tempor. Cras sodales nunc vel augue fermentum, eget sodales tellus elementum. Maecenas at accumsan massa, et sodales urna. In ullamcorper eget lorem et laoreet. Mauris varius tellus ut dui porttitor, sit amet consequat turpis eleifend. Sed consequat tincidunt pretium. Quisque blandit eros commodo, euismod lorem vitae, pharetra justo. Duis pellentesque accumsan mauris ut imperdiet. Nullam at rhoncus orci, ultrices elementum mi. In rhoncus, diam a euismod semper, lacus lacus lacinia nisl, eu suscipit turpis nulla et nisi. Nunc faucibus lobortis sollicitudin.

Bounce-Slow

Nullam interdum nec mauris eu blandit. Suspendisse consequat sollicitudin velit, quis blandit dolor dignissim sit amet. Praesent rhoncus nisi sit amet orci maximus, sit amet fermentum leo placerat. Maecenas mollis, urna in lobortis tincidunt, justo odio ullamcorper ante, at volutpat sem metus sed mi. Donec venenatis felis sit amet pellentesque sodales. Cras sit amet iaculis ipsum. Donec a turpis diam. Nulla pharetra feugiat est, sed cursus sem. Sed ac leo vel mi finibus pulvinar ut quis turpis. Ut eget consequat risus, ac eleifend sapien. Cras tincidunt sapien eu risus euismod feugiat. Duis pulvinar enim eu varius aliquet. Aliquam volutpat, metus ut aliquam commodo, arcu turpis suscipit massa, vel dictum quam nibh in augue.

Синхронизированные блоки

Sync block

Aliquam luctus ante urna, id semper ipsum euismod varius. Sed vel mauris vestibulum, feugiat tellus non, pharetra felis. Donec accumsan malesuada gravida. Etiam dignissim lacus et molestie congue. Ut vel accumsan ligula. Quisque nulla ante, pharetra quis magna a, varius convallis est. Fusce vel porttitor sem. Quisque quis consequat odio, id placerat urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In facilisis libero auctor nunc imperdiet tristique. Phasellus pellentesque velit nulla, in elementum leo ornare eget. Quisque laoreet efficitur nibh ac bibendum. Aenean malesuada porttitor mauris, sit amet porttitor orci congue sit amet. Vivamus in bibendum metus. Donec faucibus elit ac fringilla viverra. Etiam sit amet velit mauris.

Sync block with ease-fast

Maecenas dictum rutrum ante, sit amet accumsan dui. Cras eget luctus erat. Pellentesque in finibus lectus, nec pretium nulla. In hendrerit elementum neque, a egestas ante efficitur sit amet. Suspendisse ullamcorper molestie mi, sit amet sodales quam tincidunt eget. Morbi cursus ac velit ut tempus. Sed lobortis et lectus ac sodales. Quisque ullamcorper justo eu varius ultrices.

Установка

Воспользуйтесь Bower:

$ bower install slide-down

Или npm

$ npm install slide-down

Если вышеперечисленные способы не подошли, скачивайте c GitHub

Подключение 

<!--  Css -->
<link href="⁄jquery.slidedown.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="⁄jquery.min.js"></script>
<!-- SlideDown -->
<script src="⁄jquery.slidedown.js"></script>

Разметка 

<!-- Триггер может располагаться где угодно. -->
<!-- В атрибуте [data-slidedown-trigger] указываем имя блока,
     который мы открываем/закрываем, в данном случае это txt -->
<span data-slidedown-trigger="txt">Текст</span>

<!-- Выезжающий блок, так же может распологаться где угодно,
     вне зависимости от триггера -->
<!-- В атрибуте [data-slidedown-target] указываем имя блока,
     к нему будет обращаться триггер  -->
<div class="slide_down" data-slidedown-target="txt">
    <div class="slide_down-content">
        <!-- Контент -->
    </div>
</div>

Опции

Открытый блок

Если необходимо, что бы блок был по-умолчанию открыт, то блоку с атрибутом [data-slidedown-target] необходимо добавить класс .slide_down--active

Анимация

Базовую анимацию можно изменить, для этого надо блоку с data-slidedown-target добавить [data-animation], который будет указывать тип и скорость анимации:

<!-- Выезжающий блок -->
<div class="slide_down"
     data-slidedown-target="txt"
     data-animation="ease-slow">
    <div class="slide_down-content">
        <!-- Контент -->
    </div>
</div>

Синхронность

Если необходимо, что бы блоки зависили друг от друга (всегда может быть открыт только один блок), то так же необходимо добавить всем зависимым блокам с атрибутом [data-slidedown-target] дополнительный аттрибут [data-sync].

<!-- Один выезжающий блок -->
<div class="slide_down" data-slidedown-target="txt" data-sync>
    <div class="slide_down-content">
        <!-- Контент -->
    </div>
</div>

<!-- Второй выезжающий блок -->
<div class="slide_down" data-slidedown-target="txt" data-sync>
    <div class="slide_down-content">
        <!-- Контент -->
    </div>
</div>

Методы 

// Откроет указанный блок
$.slideDown.open("id или $('обьект')");
// Закроет указанный блок
$.slideDown.close("id или $('обьект')");
// Закроет все или все указанные блоки
$.slideDown.closeAll("пустой или $('обьекты')");

Поддержка

Используется CSS3 анимация, если браузер неподдерживает анимацию, то блоки будут показаны как hide/show

Лицензия

MIT