Среда, 04 Апреля 2012 13:37

Реализация hightlighter, tabs, lightbox и закрытие блока при клике

Written by 
Оцени эту запись
(1 Голос)

В данной статье рассмотрим возможность простых реализаций таких популярных эффектов, как lightbox, hightlighter, tabs и на закуску блок с кнопочкой "Close". 

 

Смотреть демо

 

 

1.Highlighter

 

Тут все просто.

 

Simple jQuery

 
<div class="highlighter_inner">
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 1
        </div>        
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 2
        </div>
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 3
        </div>
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 4
        </div>
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 5
        </div>
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 6
        </div>
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 7
        </div>
    <div class="highlighter_item">
        Kate-land Simple jQuery Highlighter ITEM 8
        </div>
    </div>
</div>
 
Есть блок (highlighter_cont), который держит всю конструкцию. У него фиксированы высота и ширина, задано свойство overflow: hidden. Внитри блок highlighter_inner - ему задана большая высота, чтобы в него помещались все элементы. Ну и блоки с классами highlighter_item - это наши элементы, которые и должны меняться.
 
Пишем скрипт:
 
<script>
$(function(){
var c = $('.highlighter_item').size()*51;
var b = -parseInt($('.highlighter_inner').css('top'));
setInterval(function(){
if(b+51<c) {
$('.highlighter_inner').animate({top: '-=51'}, 500);
b += 51;
}
else {
$('.highlighter_inner').animate({top: 0}, 500);
b = 0;
}
},1500);
});
</script>
 
Переменная с является фактической высотой блока highlighter_inner  - size() высчитывает количество элемнтов, потом его умножаем на высоту каждого (высота, заданая стилями, равна 50 px плюс нижний border). Переменная b - это значение top блока highlighter_inner  (по умолчанию у него абсолютное позиционирование и позицией верхнего левого угла).  Эту переменную мы будем менять при перемещении элементов.
 
SetInterval()  - функция, которая выполняет то, что внутри, через определенный интервал времени, в нашем случае интервал=500. Проверяем условие if(b+51<c) {} - если значение top меньше высоты, то задаем значение top=top-51. То есть перемещаем  блок вверх на высоту, равную высоте элемента. Там еще есть +51(b+51<c), этим мы отсекаем лишнее перемещение, ибо условие проверяется перед перемещением, тогда проскакивает одно лишнее. Так вот, если условие выполняется, мы анимировано перемещаем блок highlighter_inner на 51px вверх:
 
$('.highlighter_inner').animate({top: '-=51'}, 500);
 
Если же условие не выполняется, возвращаем его в top:0px. Переменную b мы при етом изменяем, чтобы следить за значением top.
 
Hightlighter готов!!!
 

2. Tabs

 
Код выглядит так: 
 
<div class="tabs_cont">
<div class="tabs_control">
    <a href="javascript: void(0);" id="tab_1" class="active">1</a>
    <a href="javascript: void(0);" id="tab_2">2</a>
    <a href="javascript: void(0);" id="tab_3">3</a>
    <a href="javascript: void(0);" id="tab_4">4</a>
    <a href="javascript: void(0);" id="tab_5">5</a>
    </div>
<div class="tabs_inner">
    <div class="tabs_item body_tab_1" style="display: block;">
        Kate-land Simple jQuery Tabs ITEM 1
        </div>        
    <div class="tabs_item body_tab_2">
        Kate-land Simple jQuery Tabs ITEM 2
        </div>
    <div class="tabs_item body_tab_3">
        Kate-land Simple jQuery Tabs ITEM 3
        </div>
    <div class="tabs_item body_tab_4">
        Kate-land Simple jQuery Tabs ITEM 4
        </div>
    <div class="tabs_item body_tab_5">
        Kate-land Simple jQuery Tabs ITEM 5
        </div>
    </div>
</div>
 
Здесь блок tabs_cont содкржит в себе все элементы. Блок tabs_control содержит ссылки, кликая по которым табы можно переключать. Для  ссылок вводится класс active, чтобы показывать какой таб активный. Переключатели не обязательно должны быть ссылками, но так проще. У каждого переключателя есть id, но могут быть и классы. Главное, чтобы переключатели по своей сути были уникальны - идентификаторами или классами.
 
Блок tabs_inner держит сами тела табов, их содержимое. Блоки tabs_item 
 - есть сами табы. Как можно заметить, у каждого таба есть дописан уникальный класс body_tab_1. Это нужно для того, чтобы привязать табы к переключателям. Табам задано абсолютное позиционирование, размещение в верхнем левом углу. В стилях они скрыты display:none. В самом же коде одному из них (здесь первому) задан display:block, чтобы именно его было видно при загрузке страницы. 
 
Скрипт для табов:
 
<script>
$(function(){
$('.tabs_control a').click(function(){
$('.tabs_control a').removeClass('active');
$(this).addClass('active');
$('.tabs_item').fadeOut(0);
$('.tabs_item.body_'+this.id).fadeIn(500);
});
});
</script>
 
Кликая на одну из ссылок в блоке tabs_control задаем ей класс active
 
$(this).addClass('active');
 
и отображаем соответсвующий ей таб.
 
$('.tabs_item.body_'+this.id).fadeIn(500);
 
У остальных ссылок класс active убираем
 
$('.tabs_control a').removeClass('active');
 
и скрываем остальные блоки.
 
$('.tabs_item').fadeOut(0);
 
Как мы связываем переключатель с табом? У переключателя, например id="tab_1", у соответствующего таба есть класс body_tab_1. Когда данный переключатель активный, отображается таб с классом .body_'+this.id
 
 

3. Lightbox

 
Для лайтбокса, для простоты, выводим кнопку Click Me, при клике на которую будет всплывать окно и каким-то текстом (туда можно вставить картинку или что-либо другое). Обычно принято, что при всплывании лайтбокса, остальной экран затемняется.
 
HTML код:
 
<a href="javascript: void(0);" class="lightbox_button">Click Me</a>
<div class="lightbox_bg"></div>
<div class="lightbox_body">Kate-land Simple jQuery Lightbox</div>
 
 
Блок lightbox_bg - это фон. У него background черный, прозрачность 0.7, абсолютное позиционирование, высота и ширина 100%. Он скрыт, появится при клике на кнопку.
Блок lightbox_body - это само окошко. У него могут быть какие-угодно стили и содержание. Он также скрыт и покажется при клике.
 
Закрытие окна реализовано при клике на фон,  т.е. вне окна.
 
<script>
$(function(){
$('.lightbox_button').click(function(){
$('.lightbox_bg').fadeIn(500);
$('.lightbox_body').fadeIn(500);
});
$('.lightbox_bg').click(function(){
$('.lightbox_bg').fadeOut(0);
$('.lightbox_body').fadeOut(0);
});
});
</script>
 
Скрипт, думаю, понятен. Берем класс кнопки, вешаем ей событие на клик. При клике на кнопку, отображается фон и выводится наше окно. При клике по фону (вне окна), окно закрывается и фон пропадает.
 

4. Close Onclick

 
Последний пример - это закрытие/скрытие блока при нажатии на кпопку(ссылку).
 
<div class="cl_click">
Kate-land Simple jQuery Close Onclick
<a href="javascript: void(0);" class="close_button">Close</a>
</div>
 
В моем случае, есть блок с классом cl_click, в нем что-то отображается. В нем же лежит ссылка с классом close_button, в ней написано "Close". Ссылке заданы абсолютное позиционирование в правый верхний угол. Чаще всего для таких целей в ней выводится не текст и иконка с крестиком, но это несущественно. 
 
При клике на Close наш блок пропадает, благодаря fadeOut():
 
<script>
$(function(){
$('.close_button').click(function(){
$('.cl_click').fadeOut(500);
});
});
</script> 
 
 
 
 
 

Additional Info

Комментарии  

 
0 #1 Anemonalove 16.07.2017 19:57
Hi guys! Who wants to see me live? I have profile at HotBabesCams.co m, we can chat, you
can watch me live for free, my nickname is Anemonalove , here is my photo:


https://3.bp.blogspot.com/-u5pGYuGNsSo/WVixiO8RBUI/AAAAAAAAAFA/JWa2LHHFI2AkHParQa3fwwHhVijolmq8QCLcBGAs/s1600/hottest%2Bwebcam%2Bgirl%2B-%2BAnemonalove.jpg
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов