Скрипты для uCoz, шаблоны ucoz - Выплывающий блок с помощью jQuery - 5 Апреля 2010 - Выплывающий блок с помощью jQuery
Меню сайта
Обои, картинки, темы для windows...
Категории раздела
Шаблоны для uCoz [24]
Скрипты для uCoz [263]
Иконки форума [1]
Иконки групп [0]
Ранги для uCoz [5]
Софт веб-мастеру [1]
Статьи веб-мастеру [103]
Видеоуроки [10]
Всё для фотошопа [0]
Мини-чат
200
Наш опрос
Оцените работу AleksX'a
Всего ответов: 24
Теги
На нашем сайте вы найдёте: самые новые и просты скрипты для ucoz,и очень красивые и новые шаблоны для uCoz,Иконки групп,очень красивые кисти для photoshopa,много шрифтов для photoshopa,много псд исходников,интересные статьи для веб мастеров,а также вы сможете всегда получить нужную вам помощь по uCoz, всегда получите ответ на ваш интересующий вопрос. Скрипты для uCoz,Иконки групп,Софты для uCoz,Статьи для Веб мастеров,Фотошоп Скрипты для uCoz,Все для юкоз, Шаблоны для uCoz,Иконки для uCoz
| sitemap | sitemap-forum |

Скрипты и шаблоны для uCoz, Скачать шаблоны юкоз, ucoz шаблон, шаблоны ucoz, ucoz скрипты

Выплывающий блок с помощью jQuery


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

Первым делом подключаем скрипты и инициализируем функцию:

Code
<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>

Подробно о каждой опции Вы можете прочитать в комментариях к коду.

Еще нам понадобится немного стилей оформления:

Code
<style>  

.slide-out-div {  
padding: 20px;  
width: 250px;  
background: #ccc;  
border: #29216d 1px solid;  
}  
</style>

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

Как Вы можете заметить в коде сверху присутствует ссылка. Она будет показана пользователям, у которых отключен javascript.

Автор: Лука



Категория: Скрипты для uCoz | Просмотров: 490 | Добавил: Aleks | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]



Твой профиль

Поиск
На форуме
RSS
Статистика
Счетчик посещений

OnLine
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Нас посетили:
Зарег. на сайте:
Всего: 103
За месяц: 0
За неделю: 0
Вчера: 0
Сегодня: 0
Поиск
Архив записей
Календарь
«  Апрель 2010  »
Пн Вт Ср Чт Пт Сб Вс
   1234
567891011
12131415161718
19202122232425
2627282930
Хостинг от uCoz | Скрипты для uCoz | Шаблоны для uCoz