Девушка-программист – это нонсенс, да.
 

Программирование

04 марта 2010 12:59
jQuery+jQueryUI: Всплывающее оповещение
Долгими зимними вечерами делала я интернет-магазин. Задача: при добавлении товара в корзину должно появляться привлекающее внимание оповещение. Внизу экрана по центру. И висеть там, как бы пользователь ни прокручивал страницу, до тех пор, пока он сам, ручками, оповещалку не закроет.
Мое решение:
Где-то в html-коде заготовлен контейнер для будущей всплывалки. С абсолютным позиционированием, иначе "кина не будет".
<div id="basketPopUp" style="position:absolute;">&nbsp;</div>   

Показываем оповещение, когда товар добавлен в корзину. Например, в callback-функции ajax-запроса, этот товар добавляющего:

var itemTitle = "Какая-то фиговина";   //заглушка на месте реального названия товара
var popupText = 'Товар ' + itemTitle + 'добавлен в заказ! <a href="#">Оформить заказ</a> | <a href="javascript:closeBasketPopUp()">Закрыть</a>';
$('#basketPopUp').empty().append(popupText);

//высчитываем координаты
CalculatePosition();

//показываем с "прыгающим" эфектом
$('#basketPopUp').show("bounce", {}, 500);

//координаты оповещалки будут пересчитываться каждый раз, как пользователь скролит страницу
$(window).scroll(function() { CalculatePosition(); });

Расположить див basketPopUp нужно внизу видимой части экрана и горизонтально выровнять по центру. Для этого получаем высоту и ширину клиентской области, зачения вертикального и горизонтального скроллов; вычисляем координаты центра экрана. И уже относительно центра рассчитываем left и top для нашего дива:

function CalculatePosition(){
    //центр видимой области экрана
    var centerX = parseInt($(window).width() / 2) + $(window).scrollLeft();
    var centerY = $(window).height() + $(window).scrollTop();
    
    //горизонтально - по-центру
    var left = centerX - ( $('#basketPopUp').width() / 2) + 'px';
    //вертикально - 5 пикселей до нижней границы
    var top = centerY -  $('#basketPopUp').height() - 5 + 'px';
    
    $('#basketPopUp').css('left', left);
    $('#basketPopUp').css('top',  top);
}

З.Ы. Замечен странный баг: если, не дождавшись пока див отпрыгает свое в рамках bounce эфекта, начать прокручивать страницу, его проглючивает и на пару секунд он улетает вправо. В коде самого эфекта не рылась за неимением времени. Если кто в курсе чё так, подскажите.

 
Комментарии (0)
Оставте свой комментарий
Ваше имя:
Сайт (без http://):