http://open.freedom-vrn.ru/demo/23/index.html
Данное решение идеально использовать для контактных форм или
опросов на сайте. Расположить его можно с любого края страницы. Кроме
этого, можно использовать красивую картинку для повышения
кликабельности.
Первым делом подключаем скрипты и
инициализируем функцию:
<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>
<a href="http://link-for-non-js-users.html">Content</a>
<h3>Контакты</h3>
<p>Тут может быть все, что
угодно!!!
</p>
<p>Даже форма обратной
связи</p>
</div>
Как Вы можете заметить в коде сверху присутствует ссылка. Она
будет показана пользователям, у которых отключен javascript.
|
