Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Mobily Select - замена элементов

Mobily Select - замена элементов

MobilySelect является мощным JQuery плагин и с смешным размеров в 2 килобайта, который заменяет одну коллекцию элементов другой. На многих сайтах фрилансеров, оформление портфолио выглядит следующим образом.


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

показывает все элементы
три типа анимации

Демо: смотреть
Скачать: mobilyselect.zip [95,85 Kb] (cкачиваний: 247)


Начнем. Первым делом подключим все css и js файлы между тегами head:
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mobilyselect.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>


Далее создаем основной див в ктором будет весь контент:
<div class="selecter">
.....
</div>


Следующим делом создадим кнопки для выбора категорий.
<div class="selecterBtns">
                <ul class="nolist">
                    <li><a href="#" rel="all" class="active">All</a></li>
                    <li><a href="#" rel="poster">Posters</a></li>
                    <li><a href="#" rel="card">Business Cards</a></li>
                </ul>
</div>


Теперь список всех элементов.
            <div class="selecterContent">
                <ul class="nolist">
                    <li class="poster"><a href="#"><img src="img/poster1.jpg" alt="" /></a></li>
                    <li class="card"><a href="#"><img src="img/card1.jpg" alt="" /></a></li>
                    <li class="poster"><a href="#"><img src="img/poster2.jpg" alt="" /></a></li>
                    <li class="card"><a href="#"><img src="img/card2.jpg" alt="" /></a></li>
                    <li class="card"><a href="#"><img src="img/card3.jpg" alt="" /></a></li>
                    <li class="card"><a href="#"><img src="img/card4.jpg" alt="" /></a></li>
                    <li class="poster"><a href="#"><img src="img/poster3.jpg" alt="" /></a></li>
                    <li class="card"><a href="#"><img src="img/card5.jpg" alt="" /></a></li>
                    <li class="card"><a href="#"><img src="img/card6.jpg" alt="" /></a></li>
                    <li class="print"><a href="#"><img src="img/poster4.jpg" alt="" /></a></li>
                </ul>    
            </div>


Обратите внимание rel ссылок соответствует классу элементов, это очень важно, и это формарирует перемещения.

CSS стили:
/* ------ general
-----------------------------------------------*/

body {
font-family:Arial, Helvetica, sans-serif;
background:#f1f1f1;
font-size:11px;
}

/* ------ mobilyselect
-----------------------------------------------*/

#content {
width:600px;
margin:100px auto 0;
}

.selecterBtns {
float:left;
width:600px;
margin-bottom:25px;
}

.selecterBtns a {
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
background:#EDEDED;
color:#111;
display:block;
float:left;
font-size:11px;
line-height:28px;
margin-right:4px;
outline:none;
padding:0 15px;
text-decoration:none;
}

.selecterBtns .active,
.selecterBtns a:hover {
background:#111;
color:#fff;
}

.selecterContent {
float:left;
width:600px;
clear:both;
}

.selecterContent a {
outline:none;
}

.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;
margin:0 5px 5px 0;    
}

a {
color:#fff;
}

a img {
border:none;
}



init.js
здесь хранятся настройки нашего скрипта.
$(function(){
    $('.selecter').mobilyselect({
        collection: 'all',
        animation: 'absolute',
        duration: 500,
        listClass: 'selecterContent',
        btnsClass: 'selecterBtns',
        btnActiveClass: 'active',
        elements: 'li',
        onchange: function(){},
        onComplete: function(){}
    });
});


Демо: смотреть
Скачать: mobilyselect.zip [95,85 Kb] (cкачиваний: 247)


Наш урок подошел к концу.
Опубликовал dimas_ua, 17-05-2011, 00:00 Комментариев: 3
 (голосов: 8)
Пишет владимир, 17 мая 2011 20:17
  • Сообщений: 0
  • Новостей: 0
Респект и уважение за все Ваши уроки!!!
Пишет rozickkal, 18 июля 2011 12:01
  • Сообщений: 0
  • Новостей: 0
Привет мальчишки!Меня зовут Роза и мне срочно нужен партнер для виртуального секса!Я уже предстовляю как ты трахаеш мою узкую попочку а после чего я обсасываю твой член и облизываю твои яички...ммм. Заходи в мою анкету на бесплатном сайте интим знакомств и добавляй в друзья!
Вот ссылка tinyurl.com/roza80/ А дальше мы найдём чем с тобой заняться я тебе это обещаю! С уважением Роза
Пишет rozickkal, 19 июля 2011 02:32
  • Сообщений: 0
  • Новостей: 0
Привет мальчишки!Меня зовут Роза и мне срочно нужен партнер для виртуального секса!Я уже предстовляю как ты трахаеш мою узкую попочку а после чего я обсасываю твой член и облизываю твои яички...ммм. Заходи в мою анкету на бесплатном сайте интим знакомств и добавляй в друзья!
Вот ссылка tinyurl.com/roza80/ А дальше мы найдём чем с тобой заняться я тебе это обещаю! С уважением Роза