главная

Теги:


Отличная выезжающая панель

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

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

Из-за наличия слайдера в нашем приложении, нам придется задействовать библиотеку jQuery UI.

Давайте начнем с разметки.

Разметка

More on this topic

Annotation Overlay Effect with jQuery

A slick overlay effect that let's you show notes on a portfolio item

http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/

...
...

Для добавления новых элементов нам достаточно повторять структуру div с классом “pc_item”.
Мы также добавим ссылку к соответствующей статье в элемент с классом “pc_more”, чтобы сделать всю панель кликабельной.

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

Давайте взглянем на стили.

CSS

Для красоты мы определим внешний вид главной панели и ее содержимого. Также будем манипулировать некоторыми классами элементов jQuery UI.

Давайте начнем с главной панели:

.pc_panel{
position:fixed;
background:transparent url(../images/bgSlide.png) repeat top left;
color:#fff;
font-size:11px;
line-height:14px;
width:100%;
right:0px;
display:none;
font-family:Arial, Helvetica, sans-serif;
}

Мы будем использовать фиксированное позиционирование, так как мы хотим, чтобы наша панель следовала за нами при прокрутке. Изначально панель будет невидима и при скролле вниз при пересечении контрольной точки, мы ее выкатим справа.

В коде jQuery мы установим отступ справа на минус ширину окна и будем анимировать его до 0 пикселей.

Маленькие иконки справа для расширениясвертывания будут иметь следующие стили:

.pc_label{
width:20px;
height:20px;
position:absolute;
top:0px;
text-align:center;
letter-spacing:2px;
text-shadow:0px 0px 1px #fff;
cursor:pointer;
}
.pc_panel .expand{
background:#010101 url(../images/expand.gif) no-repeat center center;
right:24px;
}
.pc_panel .collapse{
background:#010101 url(../images/collapse.gif) no-repeat center center;
right:24px;
}
.pc_panel .close{
background:#010101 url(../images/close.gif) no-repeat center center;
right:2px;
}

Если Вы используете два класса для элемента и допустим хотите - чтобы второй класс (в нашем примере, свернуть и закрыть) переписал свойства первого, Вам необходимо создать более детальное описание классов. Именно поэтому у нас есть класс “pc_label” и далее мы определяем "более сильные" классы добавляя родителя (pc_panel).

Название панели будет иметь следующие стили:

.pc_title{
width:100%;
height:20px;
background:#000;
font-size:9px;
text-transform:uppercase;
line-height:20px;
text-indent:10px;
letter-spacing:1px;
}

Каждый элемент будет иметь такие стили:

.pc_item{
width:200px;
height:120px;
cursor:pointer;
overflow:hidden;
background:transparent url(../images/bgSlide.png) repeat top left;
float:left;
margin:5px 10px 10px 10px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
box-shadow:0px 0px 5px #000;
}
.pc_item h2{
padding:10px 0px 10px 10px;
font-size:14px;
height:32px;
color:#009ac6;
line-height:11px;
clear:both;
}
.pc_item p{
text-align:justify;
font-size:10px;
text-shadow:1px 1px 1px #000;
padding:0px 10px 5px 10px;
}
.pc_item img{
width:50px;
float:left;
margin:0px 10px 0px 10px;
border:4px solid #191919;
-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
box-shadow:0px 0px 5px #000;
}
.pc_more{
display:none;
}

При наведении на элемент мы будем добавлять к ниму класс “selected”, чтобы он выглядел иначе:

.pc_panel .selected{
background:#222;
}
.pc_panel .selected img{
border:4px solid #010101;
}

Обертка вокруг элементов должна иметь такие стили, так как у нас в контейнере будет слайдер:

.pc_wrapper{
overflow:hidden;
position:relative;
margin-top:10px;
}

У слайдера будет абсолютное позиционирование:

.pc_slider{ position:absolute; }

Мы хотим, чтобы наш слайдер имел нестандартный вид, поэтому нам надо будет переписать классы, которые идут вместе с jQuery UI:

.ui-widget-content {
background:#000;
}
.ui-state-default, .ui-widget-content .ui-state-default{
border:none;
background-color:#aaa;
outline:none;
cursor:pointer;
height:17px;
width:10px;
left:0px;
margin-bottom:-10px;
}

И, наконец, небольшой вспомогательный класс для сброса float-блоков в конце, чтобы мы могли работать с высотой их контейнера:

.clear{
clear:both;
}

Вот и все! поехали дальше!

JavaScript

Главная задача - показ панели при достижении прокруткой определенной позиции. Для этого мы добавим id=”pc_reference” к последнему абзацу, так как мы хотим, чтобы наша панель отображалась в конце страницы и показывала похожие статьи читателю.

Панель будет иметь определенную высоту, показывая только первый ряд похожих элементовстатей. При развертке панели пользователем она будет занимать всю страницу и юзер может просматривать множество элементов.

Кроме этого, нам также нужен функционал для полного закрытия панели, так как пользователю может надоесть постоянное появление панели (при каждом скролле вниз).

Для начала, давайте определим некоторые переменные:

//высота и ширина окна
  var window_w 					= $(window).width();
  var window_h 					= $(window).height();
  //div главной панели
  var $pc_panel = $('#pc_panel');
  //обертка и divы элементов
  var $pc_wrapper					= $('#pc_wrapper');
  var $pc_content					= $('#pc_content');
  //слайдер / div со слайдером
  var $pc_slider					= $('#pc_slider');
var $pc_reference 			    	= $('#pc_reference');

var maxWidth,maxHeight,marginL

Теперь мы вызовем функцию buildPanel(), которая создает всю панель при открытии полноэкранного режима:

buildPanel();
function buildPanel(){
  $pc_panel.css({'height': window_h + 'px'});
  hidePanel();
  //Мы хотим показать элементы сеткой
  //нам необходимо расчитать высоту и ширину
  //для обертки
  //нам также необходимо все центрировать и поэтому
  //необходимо расчитать отступы
 //Для начала, считаем высоту
  //maxHeight = Math.floor((window_h-20)/135)*135;
  //20 => pc_titles высота
  //135 => 125 пикселей высота элментов плюс отступ (10)
  maxHeight 		= Math.floor((window_h-20)/135)*135;
  //maxWidth = Math.floor((window_w-35)/220)*220;
  //220 = ширина элемента + отступы (слева и справа)
  maxWidth 		= Math.floor((window_w-35)/220)*220;
  marginL  		= (window_w - maxWidth)/2;
  $pc_wrapper.css({
  'width' 		: maxWidth + 20 + 'px',
  'height'		: maxHeight +'px',
  'margin-left' 	: marginL + 'px'
  });
 //инициализация слайдера
  try{
  $pc_slider.slider('destroy');
  }catch(e){}
  //total_scroll сколько мы можем скроллить
  var total_scroll = $pc_content.height()-maxHeight;
  //добавить слайдер для прокрутки div с контентом
  //спрятан до момента развертки
  if(total_scroll > 0){
  $pc_slider.slider({
  orientation	: 'vertical',
  max			: total_scroll,
  min			: 0,
  value		: total_scroll,
  slide		: function(event, ui) {
  $pc_wrapper.scrollTop(Math.abs(ui.value-total_scroll));
  }
  }).css({
  'height'	: maxHeight -40 + 'px',//40 extra
  'left'		: maxWidth + 20 + marginL + 'px',
  'top'		: 30 + 20 + 'px',
  //30 = 20 of title + 10 margin, 20 extra
  'display'	: 'none'
  });
  }
  }
  

Изначально, мы прячем нашу панель справа и для этого используем:

function hidePanel(){
//165 => 20 pc_title + 120 элемент + отступы
$pc_panel.css({
'right'	: -window_w + 'px',
'top'	: window_h - 165 + 'px'
}).show();
try{
//позиционирование слайдера в начале
slideTop();
}catch(e){}
$pc_slider.hide();
$pc_panel.find('.collapse')
.addClass('expand')
.removeClass('collapse');
}

Для нашего пользовательского слайдера, который позволит просматривать элементы, мы определим функцию для сброса и перехода вверх:

function slideTop(){
  var total_scroll 	= $pc_content.height()-maxHeight;
  $pc_wrapper.scrollTop(0);
  $pc_slider.slider('option', 'value', total_scroll );
}

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

$(window).bind('scroll',function(){
var distanceTop = $pc_reference.offset().top - window_h;
if($(window).scrollTop() > distanceTop){
if(parseInt($pc_panel.css('right'),10) == -window_w)
$pc_panel.stop().animate({'right':'0px'},300);
}
else{
if(parseInt($pc_panel.css('right'),10) == 0)
$pc_panel.stop().animate({'right': -window_w + 'px'},300,function(){
hidePanel();
});
}
}).bind('resize',function(){
//при изменении размеров окна - все пересчитать,
//и построить панель в зависимости от новых значений
window_w 			= $(window).width();
window_h 			= $(window).height();
buildPanel();
});

Когда мы нажимаем на кнопку "расширить", мы анимируем панель и делаем ее в размер всего окна:

$pc_panel.find('.expand').bind('click',function(){
  var $this = $(this);
  $pc_wrapper.hide();
  $pc_panel.stop().animate({'top':'0px'},500,function(){
  $pc_wrapper.show();
  slideTop();
  $pc_slider.show();
  $this.addClass('collapse').removeClass('expand');
  });
  })

При нажатии на "свернуть" - мы прячем ее:

$pc_panel.find('.collapse').live('click',function(){
var $this = $(this);
$pc_wrapper.hide();
$pc_slider.hide();
$pc_panel.stop().animate({'top':window_h - 165 + 'px'},500,function(){
$pc_wrapper.show();
$this.addClass('expand').removeClass('collapse');
});
});

При нажатии "закрыть" она исчезает навсегда:

$pc_panel.find('.close').bind('click',function(){
$pc_panel.remove();
$(window).unbind('scroll').unbind('resize');
});

И в конце, мы добавляем эффекты при наведении мышки на элементы. И делаем так, чтобы при нажатии на ссылку открывалось новое окно:

$pc_wrapper.find('.pc_item').hover(
  function(){
$(this).addClass('selected');
},
function(){
$(this).removeClass('selected');
}
).bind('click',function(){
window.open($(this).find('.pc_more').html());
});

Вот и все! Надеемся, Вам понравилось!

Источник урока: www.tympanus.net

 

 

 

 

 

 

 

 

Урок Создан:2011-02-09 Просмотров:3714

Добавить комментарий:


Copyright© 2009 Hosted by Zhost