Pull to refresh

Dock панель для сайта. Выбор подходящего jQuery плагина и руководство по установке

Reading time 5 min
Views 1.2K
image

Красота спасет мир


Обладатели компьютеров Apple давно пользуются красивой и удобной dock панелью. В отличие от этих счастливчиков, я вырос глубоко в сибири и до недавнего времени видел Мак исключительно на картинках.
Но несмотря на это, о dock панели я все же узнал, хоть и случайно, из статьи в одном журнале за 2003 год о dock панелях для Windows. Я поигрался с предложенной программой пару дней, а потом удалил и навсегда забыл о ней. Панель безусловно произвела на меня впечатление приятной внешностью, но все же не несла для меня ощутимой практической пользы.

Дальше — по существу.


За все прошедшее время мне ни разу не пришлось вспоминать об этом небольшом опыте, пока не пришел «заказ» на добавление подобной панели в очередной разрабатываемый вебсайт. Так как библиотека jQuery уже использовалась на этом сайте, я интуитивно начал поиск нужного плагина. Интуиция не подвела, было обнаружено множество внешне не отличимых друг от друга «примочек». Осталось выбрать один единственный вариант и привинтить к странице.

Приведу краткий обзор найденного, расскажу, чем я руководствовался при выборе и дам инструкции по установке выбранного мной плагина.

Плагины практически не различаются по своему устройству, возможностям и внешнему виду, поэтому критерии выбора определились так:
  • Размер подключаемого скрипта и, если необходимо, стилей.
  • Максимально упрощенное дефолтное оформление, ввиду специфичного дизайна сайта, .
  • Простота установки и настройки.
  • Нормальная работа при кастомизации.

Посмотрим, что мы имеем.


Расскажу только о трех популярных плагинах, так как другие либо сильно на них похожи, либо не удовлетворяют каким-то требованиям. И как я уже говорил, нужна была реализация на jQuery, поэтому другие варианты не рассматривались.

jqDock

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

Это видоизмененный и доработанный iconDock, о котором я пойдет речь чуть ниже. Автора мне найти не удалось.
Судя по поисковой выдаче и обсуждениям на форумах, это самый популярный плагин. Сразу предоставляет разные варианты расположения на странице и выравнивания значков относительно самой панели. Есть инструкции по установке и настройке поведения плагина.

Почему-то на сайте недоступны примеры CSS, необходимые для правильного отображения и работы (может быть, это временная проблема). Недолгие ковыряния в исходниках готовых примеров не дали положительного результата, а самому изучать элементы и писать стили не хотелось, поэтому плагин так и не удалось заставить правильно работать и выполнять главную функцию — быть красивым. Хотя, конечно, потратив больше времени, можно его наладить.

CSS Dock Menu от N.Design Studio


Это реализация dock панели от N.Design Studio с помощью плагина Interface
Понравился внешний вид, достаточно гармоничный и проработанный. Довольно легко встраивается в страницу.

Панель по умолчанию фиксированная, «прилипает» либо к верху, либо к низу страницы. Такой вариант меня не устраивал, но попытки расположить панель в любом другом месте ломали ее, вид портился и работа плагина нарушалась.

На мой взгляд, отличный вариант, если нужна привязанная к краю панель. На странице с описанием дают простую и понятную инструкцию, хоть и на английском.

iconDock


Как я писал выше, на основе этого плагина был написан плагин jqDock. Автор Isaac Roca.

Самый простой и понятный для установки и настройки плагин. Всего один файл скрипта (5KB), никаких CSS, всё можно настроить в индивидуальном порядке, по своему вкусу. Простые, немногочисленные параметры для настройки не дадут запутаться.

Размещение панели в нужном мне месте на странице не вызвало проблем. Поигрался с настройками и оформлением — все работает так, как хочется.

Остановлюсь здесь подробнее.

Инструкция по установке iconDock jQuery plugin


Шаг 1-й.

Подготавливаем по две картинки для каждой иконки, называем их image_x.jpg и image_y.jpg (это может быть и png и gif), где x — минимальный изначальный размер, а y — максимальный размер, до которого будет растягиваться иконка.

Шаг 2-й.

Создаем DOM элемент (HTML тэг — контейнер), прописыаем ему id, и складываем внутри него все картинки в виде <img>, все картинки должны находиться внутри тега <a>.

<div id="Bar">
<a href="http://siknus.com/1" name="Alertes_name" title="Google alertes">
<img src="img/alerts_35.gif" alt="Campana_alt" border="0" />
</a>
<a href="http://siknus.com/2" name="Escriptori_name" title="Google Escriptori">
<img src="img/desktop_35.gif" alt="Escriptori_alt" border="0" />
</a>
<a href="http://siknus.com/3" name="Compres_name" title="Google compres">
<img src="img/froogle_35.gif" alt="Froogle_alt" border="0" />
</a>
<a href="http://siknus.com/4" name="GMail_name" title="Google mail">
<img src="img/gmail_35.gif" alt="Gmail_alt" border="0" />
</a>
<a href="http://siknus.com/5" name="Grups_name" title="Google grups">
<img src="img/groups_35.gif" alt="Grups_alt" border="0" />
</a>
<a href="http://siknus.com/6" name="Linux_name" title="Linux"><br>
<img src="img/special_35.gif" alt="Especial_alt" border="0" />
</a>
</div>


Шаг 3-й.

Скачиваем плагин iconDock (по ссылке выше), скачиваем необходимую библиотеку jQuery.
Подключаем эти скрипты. Для этого добавляем внутри тега <head> две строчки:




Шаг 4-й.

Собственно, включаем панель с помощью метода jQuery('#idOfTheSelectedElement').addDockEffect(confObject);
Для этого после предыдущих строк добавляем:



Жирным шрифтом выделены настройки, которые можно менять:

iconMinSide: размер маленькой картинки, рекомендуется 20 — 50 px (у меня 90 без проблем).
iconMaxSide: размер большой катинки, рекомендуется 70 — 140 px (180 без проблем).
distAttDock: включается эффект при приближении курсора на это расстояние, рекомендуется выставлять треть от размера всей панели в «спокойном» состоянии.
veloOutDock: время в милисекундах, задержка после того, как курсор покидает зону действия, рекомендуется 500 — 2000 мс.
valign: выравнивание картинок относительно панели, может принимать значения 'top', 'bottom' or 'middle'.

Желаю успехов.

UPD: По наводке я решил попробовать видоизменить и дополнить имеющийся функционал. Попробую добавить вложенные иконки и динамические информационные доклеты.
Tags:
Hubs:
+13
Comments 6
Comments Comments 6

Articles