Скрипт кнопки выдвижного чата uCoz

Рейтинг:3.7

Отличная кнопка для выдвижного мини-чата, подойдёт для сайтов, в котором важно экономия места и простота использования того или иного скрипта

Шаг 1 - Установим JS:
И так для того чтобы наша с вами кнопка появилась с правой стороны вашего экрана монитора, нам следует разместить перед закрывающим тегом следующий js:

JS

Code

в котором для изменения настроек выдвижной кнопки нам понадобятся следующие строки:

JS

Code

$(function(){
  $('.center_dm_ru_chat').tabSlideOut({
  tabHandle: '.handle',
  pathToTabImage: 'http://center-dm.ru/knopka_mini_chat.png',
  imageHeight: '93px',
  imageWidth: '20px',
  tabLocation: 'right',
  speed: 250,
  action: 'click',
  topPos: '50px',
  fixedPosition: true
  });
});

Code

pathToTabImage:

- ссылка на выдвижную кнопку
imageHeight: - высота выдвижной кнопки
imageWidth: - ширина выдвижной кнопки
tabLocation: - прижимаем кнопку к правому краю экрана
speed: - скорость появления контейнера с чатом
topPos: - верхний отступ
fixedPosition: - фиксируем блок с чатом

Шаг 2 - Установим HTML:
Отлично теперь устанавливаем в низ вашей странице следующий html код, в который помещаем системную переменную чата:

HTML

Code

<div class="center_dm_ru_chat">
  <a class="handle" href="#">Мини-чат</a>
  $CHAT_BOX$
</div>

Шаг 3 - Установим CSS:
Наша кнопка почти готова, осталось ей запретить внешние и внутренние отступы и прописать стили контейнеру в котором будет размещён ваш чат:

CSS-Code

Code

/* Плавающая кнопка
------------------------------------------*/
.center_dm_ru_chat {
  padding:0;
  width:388px;
  background:#F4F5F6;
  border:#7c7c7c 1px solid;
}

.handle{
  margin:0;
  padding:0
}

Примечание:
Не забывайте, что для того чтобы выдвижная кнопка работала правильно, следует зайти в Админ панель => Общие настройки => Версия библиотеки jQuery => jQuery-1.6.1.js

На этом всё, спасибо за внимание!