Сегодня хочу рассказать о замечательном маленьком, но уже набравшем обороте проекте под названием 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
. Вставить нужно следующий код:
-
- Flickr
Пункты меню вы можете отредактировать под ваши потребности. Сделать это достаточно легко, так как вся структура основана на списках 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.
Посмотреть панель в действии можно на демо сайте. Есть вопросы по установке — задавайте в комментариях.
Копипастом здесь сделать не получится…так как автор данной статьи допускал ошибки…
просто копипастить смысла нет — всегда надо стремиться понять хоть что-нибудь) да и на дату статьи посмотрите — уверен плагин уже претерпел массу изменений.
и где там дему?
уже нет к сожалению) не очень эта панель удобна)
имисис
Эм… Помогите. Как в эту панельку вставить плеер онлайн радио?!