—»     —»   Вертикальная скользящая гармошка на jQuery
  Раздел: Меню и Навигация   Комментариев: 1  

Вертикальная скользящая гармошка на jQuery



Сегодня мы расскажем вам о том, как разработать привлекательную вертикальную гармошку, функционал которой будет основан на jQuery. Идея заключается в том, что части гармошки будут раскрываться при нажатии, а в них будет отображено больше информации. Другие же части при этом будут сжиматься. При переходе к следующей части гармошки посредством стрелочек в навигационном меню, вам будет открываться новая часть. Стрелочками можно воспользоваться в любой момент, какая бы часть гармошки у вас ни была открыта, будет реализовано последовательное переключение.

В примере мы использовали фотографии Алана Тёркуса (Alan Turkus). Здесь вы можете посмотреть его остальные работы (страница в сервисе Flickr). Изображения распространяются по лицензионному соглашению Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

Мы также будем использовать плагины jQuery Mousewheel от Аарона Брэндона (Brandon Aaron), и он позволит нам перемешаться по отделам гармошки посредством колёсика мыши.

Опции данного плагина позволяют нам настроить высоту и ширину, число видимых отделов, а также высоту раскрытой части и сжатых. Для начала давайте посмотрим несколько примеров, приведенных ниже.

Примеры

Ознакомьтесь с этими примерами (от них вы также можете переходить по другим демо-примерам):

3 видимых отдела / По умолчанию
С выемками
5 видимых отделов с повышенной прозрачностью
2 видимых отдела с замедленной анимацией
Пример во весь экран

Что касается кода HTML, то здесь у нас есть контейнер, спаны навигации и обертка, в которой размещены части гармошки:

<div id="va-accordion" class="va-container">
    <div class="va-nav">
        <span class="va-nav-prev">Previous</span>
        <span class="va-nav-next">Next</span>
    </div>
    <div class="va-wrapper">
        <div class="va-slice va-slice-1">
            <h3 class="va-title">Marketing</h3>
            <div class="va-content">
                <p>Henry Watson</p>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="va-slice va-slice-2">
            ...
        </div>
    </div>
</div>

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

Давайте посмотрим на пример, где используются всего 2 части и замедленная анимация:

$('#va-accordion').vaccordion({
    expandedHeight    : 350,
    animSpeed        : 400,
    animOpacity        : 0.7,
    visibleSlices    : 2
});

Нам доступны следующие опции:

// the accordion's width
accordionW        : 1000,
// the accordion's height
accordionH        : 450,
// number of visible slices
visibleSlices    : 3,
// the height of a opened slice
// should not be more than accordionH
expandedHeight    : 350,
// speed when opening / closing a slice
animSpeed        : 250,
// easing when opening / closing a slice
animEasing        : 'jswing',
// opacity value for the collapsed slices
animOpacity        : 0.2,
// time to fade in the slice's content
contentAnimSpeed: 900,
// if this is set to false,
// we collapse any opened slice
// before sliding
savePositions    : true

Если вы, к примеру, хотите отобразить полностью раскрытый отдел, используя всё значение высоты контейнера гармошки, то вам нужно указать одинаковое значение expandedHeight и accordionH (что есть высота самой гармошки). В нашем последнем примере мы использовали всю высоту и ширину окна, а также применили некоторые стили для того, чтобы убрать поля:

$('#va-accordion').vaccordion({
    accordionW        : $(window).width(),
    accordionH        : $(window).height(),
    visibleSlices    : 5,
    expandedHeight    : 450,
    animOpacity        : 0.1,
    contentAnimSpeed: 100
});

Надеемся, что вам понравилась данная гармошка и что она пригодится вам!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 17192   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 февраля 2012 @ 14:59
Написал: lanplus — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Отличная идея, код достаточно понятен плюс наглядный пример на Демо.Спасибо!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Строительная компания
Строительная! Найди мгновенно! Регистрируйся
профск.рф
Литейная мастерская
Как добраться, что рядом. Архитектурный сайт Петербурга.
artlitpro.ru
Антигравийная пленка
Пленка, низкие цены! Невостребованные остатки
kvm-ko.ru
Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031