Плагин jQuery - MobilySelect

MobilySelect - маленький плагин jQuery (2kB), который выполняет замену одной коллекции элементов на другую. Может быть полезен при организации портфолио работ для фильтрации контента по определенным критериям.

Особенности:

  • Выводит заданную коллекцию при запуске
  • Три типа анимации переходов изображений
  • Возвратные функции

Использование

JavaScript

$('.selecter').mobilyselect({
    collection: 'all', 			// Выводим заданную коллекцию при запуске
    animation: 'absolute', 		// Тип анимации. Доступные значение: plain, fade, absolute
    duration: 500, 			// Длительность анимации
    listClass: 'selecterContent', 	// Основной контейнер
    btnsClass: 'selecterBtns',		// Контейнер с кнопками
    btnActiveClass: 'active', 		// Класс для активной кнопки
    elements: 'li', 			// Селектор элементов коллекции
    onChange: function(){}, 		// Возвратная функция, которая вызывается при изменении коллекции
    onComplete: function(){} 		// Возвратная функция, которая вызывается при завершении анимации
});

HTML

<div class="selecter">
    <div class="selecterBtns">
        <ul class="nolist">
            <li><a href="#" rel="all" class="active">Все</a></li>
            <li><a href="#" rel="poster">Постеры</a></li>
            <li><a href="#" rel="card">Визитки</a></li>
        </ul>
    </div>
    <div class="selecterContent">
        <ul class="nolist">
            <li class="poster"> .. </li>
            <li class="card"> .. </li>
            <!-- Следующий элемент коллекции -->
        </ul>  
    </div>
</div>

Внимание: значение атрибута rel должно совпадать с именем класса элементов коллекции (card и poster используются в качестве примеров).

CSS

.selecterContent {
    width:960px;
    min-height:; /* Нужно задать минимальную высоту */
    float:left;
    clear:both;
}
 
.selecterContent li {
    width:140px; /* Нужно задать ширину и высоту элемента */
    height:120px;
    overflow:hidden;
}
 
ul.nolist,
ul.nolist li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
 
ul.nolist li {
    float:left;
}

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 22 Февраля 2011 20:40
    xakepmega
    не понравилось
  • 23 Мая 2013 09:36
    savastr
    ссылка не работает
^ Наверх ^