Плавающая панель для сайта с использованием jQuery

Have a question? Ask in chat with AI!

jixedbar logoСегодня хочу рассказать о замечательном маленьком, но уже набравшем обороте проекте под названием jixedbar. Плагин основан на jQuery и позволяет реализовать плавающую панель (fixed bar) у себя на сайте или в программе. Преимуществом jixedbar является возможность кастомизации — задание собственных стилей CSS, использование иконок, различная компоновка панели. О том, где скачать и как установить плавающую панель на jQuery jixedbar и будет эта статья.

[adsense]

Установка jixedbar

Для установки необходимо скачать архив с официального сайта проекта.

Архив содержит файл библиотеки jQuery, файл скрипта jixedbar, несколько стандартных тем с файлом стилей CSS и иконками и демо страничку, с которой можно позаимствовать код и иконки.

Нужно скопировать файлы jquery-1.4.2.min.js, jquery.jixedbar.js, jx.bar.css в каталог вашего шаблона. Картинки из определенной темы необходимо скопировать в каталог img, также в папку вашего шаблона.

Далее файлы js и css нам надо подключить в файле header.php до закрывающего тэга head:

Если вы уже используете на сайте jQuery библиотеку, то подключать ее второй раз не нужно.

Так же необходимо подключить наш модуль:

После этого остается добавить код для плавающей панели в файл index.php.
Лучше сделать это сразу после открывающего тэга body. Вставить нужно следующий код:

  • Get Social
    • Facebook
    • Twitter
    • Flickr
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Content Feed
    • Comment Feed

Пункты меню вы можете отредактировать под ваши потребности. Сделать это достаточно легко, так как вся структура основана на списках ul.

Настройка jixedbar

Для того, чтобы настроить jixedbar нужно отредактировать файл jquery.jixedbar.js. Найдите строку 25:

var defaults = {
			showOnTop: true,
			transparent: false,
			opacity: 0.6,
			opaqueSpeed: "fast",
			slideSpeed: "fast",
			roundedCorners: true,
			roundedButtons: true,
			menuFadeSpeed: 250,
			tooltipFadeSpeed: "slow",
			tooltipFadeOpacity: 0.8
		};

Это настройки по умолчанию. Рассмотрим каждый параметр:

  • showOnTop — позволяет отображать панель сверху экрана. По умолчанию панель отображается внизу экрана.
  • transparent — делает панель прозрачной.
  • opacity — параметр прозрачности — принимает значение от 0.0 до 1.0.
  • slideSpeed — задает скорость скрытияпоказа панели. значения от 200 до 600. по умолчанию fast.
  • roundedCorners — дает возможность сделать края панели закругленными.
  • roundedButtons — дает возможность сделать края кнопок закругленными.
  • menuFadeSpeed — задает скорость скрытияпоказа меню. значения от 200 до 600. по умолчанию fast.
  • tooltipFadeSpeed — задает скорость скрытияпоказа подсказок. значения от 200 до 600. по умолчанию fast.
  • tooltipFadeOpacity — задает прозрачность поля с подсказкой. значения от 0.0 до 1.0

Если вы хотите настроить внешний вид плавающей панели, то можете отредактировать файл стилей jx.stylesheet.css. Вот описание классов этого файла:

  • jx-bar — стиль главной панели
  • jx-bar span — разделители
  • jx-bar-button li — определяет стиль кнопки панели
  • jx-bar-button li:hover — стиль кнопки при наведении
  • jx-bar-button li a:* — стиль анкора кнопки
  • jx-bar-button-tooltip — стиль подсказки при наведении на кнопку
  • jx-bar div — стиль текстового контейнера и стрелки
  • jx-nav-menu — стиль выпадающего меню
  • jx-nav-menu ul li a — стиль пунктов меню
  • jx-arrow-up — стиль стрелки в состоянии up
  • jx-arrow-down — стиль стрелки в состоянии down
  • jx-hide — стиль для скрытия панели
  • jx-show — стиль для показа панели

Данная панель тестировалась на браузерах Google Chrome, Opera, Firefox, Safari, IE7, 8, 9. Проблемы возможны при работе с браузером IE6.

Посмотреть панель в действии можно на демо сайте. Есть вопросы по установке — задавайте в комментариях.


7 комментариев для “0

  1. Уведомление: Плавающая панель для сайта с использованием jQuery | Grabr
  2. Копипастом здесь сделать не получится…так как автор данной статьи допускал ошибки…

    1. просто копипастить смысла нет — всегда надо стремиться понять хоть что-нибудь) да и на дату статьи посмотрите — уверен плагин уже претерпел массу изменений.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись CSS3 для начинающих. Часть 2. Бэкграунды (фоны) и границы
Следующая запись Woopra — сервис статистики. Анализ сайта в реальном времени.