Реклама





РЕКЛАМА

UpgradeHost


недорогая реклама в интернете
ОНЛАЙН НА САЙТЕ
Всего на сайте: 2
Пользователей: 0
Гостей: 2
Выплывающий блок с помощью jQuery
Автор: Hitman | Дата: 6-08-2012, 20:33 | Комментариев: 0 | Просмотров: 1216
Выплывающий блок с помощью jQuery

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

Первым делом подключаем скрипты и инициализируем функцию:
<script src="hjquery.min.js" type="text/javascript"></script>
<script src="jquery.tabSlideOut.v1.2.js">

<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //класс элемента вкладки
pathToTabImage: 'images/contact_tab.gif', //путь к изображению "обязательно"
imageHeight: '122px', //высота изображения "обязательно"
imageWidth: '40px', //ширина изображения "обязательно"
tabLocation: 'left', //сторона на которой будет вкладка top, right, bottom, или left
speed: 300, //скорость анимации
action: 'click', //опции=: 'click' или 'hover', анимация при нажатии или наведении
topPos: '200px', //расположение от верхнего края/ использовать если tabLocation = left или right
leftPos: '20px', //расположение от левого края/ использовать если tabLocation = bottom или top
fixedPosition: false //опции: true сделает данную вкладку неподвижной при скролле
});

});
</script>


Еще нам понадобится немного стилей оформления:
<style>
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: #29216d 1px solid;
}
</style>


И конечно же div с кодом, кстати его вставлять можно в любое место вашего документа:
<div>
<a href="http://link-for-non-js-users.html">Content</a>
<h3>Контакты</h3>
<p>Тут может быть все, что угодно!!!
</p>
<p>Даже форма обратной связи</p>
</div>


Вот DEMO

Качаем архив....

Скачивание на максимальной скорости и без рекламы, доступно только для пользователей - зарегистрируйтесь!
Для Гостей, доступно скачивание только через DepositFiles!




Теги: Выплывающий блок с помощью jQuery, контакты для букса, окно контакты для bux

 (голосов: 1)
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.