Dock panel for the site. Choosing the right jQuery plugin and installation guide

Beauty will save the world

Owners of Apple computers have long been using a beautiful and convenient dock panel. Unlike these lucky ones, I grew up deep in Siberia and until recently I saw Mack exclusively in pictures.
But despite this, I still found out about the dock panel, albeit by accident, from an article in a 2003 magazine about dock panels for Windows. I played around with the proposed program for a couple of days, and then deleted it and forgot about it forever. The panel certainly impressed me with its pleasant appearance, but still did not bring tangible practical benefits to me.

Further - in essence.

For all the time I have never had to recall this little experience, until I came up with an “order” to add a similar panel to the next website being developed. Since the jQuery library was already used on this site, I intuitively started searching for the right plug-in. Intuition did not disappoint; a lot of seemingly indistinguishable “lotions” were discovered. It remains to choose one single option and screw to the page.

I’ll give a brief overview of what I’ve found, tell you what I was guided by when choosing and give instructions for installing the plugin I selected.

Plugins practically do not differ in their device, capabilities and appearance, so the selection criteria were defined as follows:

• The size of the connected script and, if necessary, the styles.
• The most simplified default design, due to the specific design of the site,.
• Easy to install and configure.
• Normal work with customization.

Let's see what we have.

I’ll tell you only about three popular plugins, since others either look very similar to them or do not satisfy some requirements. And as I said, I needed a jQuery implementation, so no other options were considered.

jqDock

• The home page , on it live examples of use, in several versions, and the documentation in English.
• You can download from here.

This is a modified and modified iconDock , which I will discuss below. I could not find the author.
Judging by search results and discussions on forums, this is the most popular plugin. Immediately provides various options for positioning on the page and aligning the icons relative to the panel itself. There are instructions for installing and configuring the behavior of the plugin.

For some reason, the CSS examples necessary for the correct display and operation are not available on the site (maybe this is a temporary problem). Short picks in the source code of the finished examples did not give a positive result, and I didn’t want to study the elements and write styles myself, so the plugin was not able to get it to work correctly and perform the main function - to be beautiful. Although, of course, spending more time, you can fix it.

CSS Dock Menu by N.Design Studio

• English homepage .
• Living example
• Archive with plugin, examples and some icons.

This is an implementation of the dock panel from N.Design Studio using the Interface plugin.
I liked the look, quite harmonious and elaborated. It is quite easy to integrate into the page.

The default panel is fixed, “sticks” to either the top or bottom of the page. This option did not suit me, but attempts to place the panel in any other place broke it, the view deteriorated and the plug-in worked.

In my opinion, a great option if you need a panel tied to the edge. The description page gives simple and clear instructions, albeit in English.

iconDock

• Home page with descriptions and instructions in English.
• Living example.
• Direct link to a compressed version of the script.

As I wrote above, the jqDock plugin was written based on this plugin. Posted by Isaac Roca.

The simplest and easiest to install and configure the plugin. Just one script file (5KB), no CSS, everything can be customized individually, to your liking. Simple, few options for tuning will not let you get confused.

Placing the panel in the right place on the page did not cause any problems. I played around with the settings and design - everything works the way I want.

I will dwell here in more detail.

IconDock jQuery plugin installation guide

Step 1

We prepare two pictures for each icon, call them image_x.jpg and image_y.jpg (this can be png and gif), where x is the minimum initial size and y is the maximum size to which the icon will stretch.

Step 2

Create a DOM element (HTML tag - container), write an id for it, and put all the pictures inside it in the form , all the pictures should be inside the tag .

Step 3

Download the iconDock plugin (from the link above), download the necessary jQuery library .
We connect these scripts. To do this, add two lines inside the tag:




Step 4

Actually, enable the panel using the jQuery ('# idOfTheSelectedElement') method. AddDockEffect (confObject);
To do this, add the following lines after the previous lines: The



settings that can be changed are highlighted in bold:

iconMinSide : the size of the small picture, it is recommended 20 - 50 px (I have 90 without problems).
iconMaxSide : the size of a large coil, recommended 70 - 140 px (180 no problem).
distAttDock : the effect is turned on when the cursor approaches this distance, it is recommended to set a third of the size of the entire panel in a "calm" state.
veloOutDock : time in milliseconds, a delay after the cursor leaves the coverage area, 500 to 2000 ms is recommended.
valign: alignment of pictures relative to the panel, can take the values ​​'top', 'bottom' or 'middle'.

Wish you success.

UPD: On a tip, I decided to try to modify and complement the existing functionality. I'll try to add nested icons and dynamic informational reports.