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

2147
10 из 10
Проголосовало: 2




  • Скачать с сервера
  • Скачать
  • Смотреть демо

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

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

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 class="slide-out-div">  
  <a class="handle" href="http://link-for-non-js-users.html">Content</a>  
  <h3>Контакты</h3>  
   

Тут может быть все, что угодно!!!  
  </p>  
   

Даже форма обратной связи</p>  
  </div>

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

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 2

LinchezZz
0
LinchezZz написал: Написано 09 Апреля 2011 в 18:11
Комментарий №1
Обьясните, куда, что вставлять

Вовчик
0
Вовчик написал: Написано 09 Апреля 2011 в 19:21
Комментарий №2

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: