Красота спасет мир
Обладатели компьютеров 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: По наводке я решил попробовать видоизменить и дополнить имеющийся функционал. Попробую добавить вложенные иконки и динамические информационные доклеты.
