Фрилансеры предложат решение вашей задачи уже через несколько минут!

Публикация заказа на фриланс бирже не займет много времени.

8 лет назад
Артем С.
43 года, Украина
13 лет в сервисе
Был онлайн 4 года назад
8 лет назад

Знаю, это просто, но не хочется тратить полдня так как не спец по 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/ - кнопка "вход"

  • Рекламное место свободно
    14 дней за $5
Денис Скичко
31 год, Украина
8 лет в сервисе
Был онлайн 5 лет назад
8 лет назад

Другие заказы в категории «Веб-программирование»