Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Знаю, это просто, но не хочется тратить полдня так как не спец по JQuery.

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

Я хотел сделать появление слоя для авторизации, примерно как тут: http://vkarpati.com/

Важные моменты:

1) Хотелось бы получить некий универсальный JQ-модуль, что бы можно было его подключать и передавать параметры:

$('.supertooltip').supertooltip({

id : 'supertooltipLayer', // задаем вручную ID вспл. слоя

event : 'hover', // click

position : 'bottom', // top/left/right/bottom

ajaxLoad : 'href', // HREF в ссылке для загрузки HTML-данных, но можно задать любой параметр тега, что к примеру в кнопке указывать data-href="...."

delay : 0, // время до показа слоя, милисек

duration : 500, // время перед пропаданием слоя, милисек

xOffset : 15, // X offset will allow the tooltip to appear offset by x pixels.

yOffset : 15, // Y offset will allow the tooltip to appear offset by y pixels.

opacity : 0, // 0 is completely opaque and 100 completely transparent

});

2) Если параметр "ajaxLoad" не указан, смотрится параметр тега TITLE, если пустой тогда ALT и если не пустой - показывается всплывающим слоем.

3) Слой должен плавно выезжать при нажатии или наведении на "вход", события нажатия/наведения надо выбирать в конфиге модуля;

Вроде все написал..

Нужно дешевое решение с минимум кода.

В качестве красоты можно в CSS забить нечто:

.supertooltipLayer{

background: none repeat scroll 0 0 #FAFAFA;

border-radius: 0 7px 7px 7px;

border-top: medium none;

box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), -1px 0 0 #FFFFFF inset, 1px -1px 0 #FFFFFF inset;

padding: 5px 0;

text-shadow: 0 1px 0 #FFFFFF;

}

Я немного поковырял какой то из бесплатных решений, но что то не пошло, можете скачать и посмотреть наброски во вложении "supertooltip.rar" ...

Можете взглянуть на решения, которые я нашел:

http://craigsworks.com/projects/simpletip/,

http://hernan.amiune.com/labs/jQuery-Tooltip-Plugin/jQuery-Tooltip-Plugin.html,

http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html,

http://jqueryfordesigners.com/demo/coda-bubble.html,

http://freelance.ru/ - кнопка "вход"

12 лет назад
amixen
Артем 
47 летУкраина
17 лет в сервисе
Был
8 лет назад