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

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

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


Изготовление книг в твердом переплете
Издание книг на заказ. Переплете, пр
katalog-premium.ru
Агентство недвижимости москва
Все услуги по недвижимости, защита интересов клиента и юридическая проверка
verona-realty.ru
Коленный стул купить
Купить современную стильную мебель для прихожей. Эксклюзивное качество
massage-gallery.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930