Geekly Articles each Day
📜 ⬆️ ⬇️

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

image

Beauty will save the world


Owners of Apple computers have long enjoyed a beautiful and comfortable dock panel. Unlike these lucky ones, I grew up deep in Siberia and, until recently, I saw Mac exclusively in pictures.
But despite this, I still learned about the dock panel, though by chance, from an article in one magazine in 2003 about the dock panels for Windows. I played with the proposed program a couple of days, and then deleted and forgot about it forever. The panel certainly impressed me with a pleasant appearance, but still did not carry any tangible practical benefits to me.

Further - in essence.


For all the past time, I never had to remember about this little experience, until the “order” came to add such a panel to the next developed website. Since the jQuery library has already been used on this site, I intuitively began searching for the right plugin. Intuition did not let down; a lot of outwardly indistinguishable “lotions” were discovered. It remains to choose one single option and screw it to the page.
')
I will give a brief overview of what was found, tell you what I was guided by when choosing and give instructions for installing the plugin I chose.

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

Let's see what we have.


I’ll tell you about three popular plugins, because others are either very similar to them or do not satisfy some requirements. And as I said, we needed an implementation on jQuery, so other options were not considered.

jqDock


This is a modified and modified iconDock , which I will discuss below. I could not find the author.
Judging by the search results and discussions on the forums, this is the most popular plugin. Immediately provides different options for the location on the page and the alignment of 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 proper display and operation are not available on the site (maybe this is a temporary problem). Short tinkering in the source code of ready-made examples did not give a positive result, and I didn’t want to study the elements myself and write styles, so the plug-in could not be made to work properly and perform the main function - to be beautiful. Although, of course, spending more time, you can adjust it.

CSS Dock Menu by N.Design Studio


This is the implementation of the dock panel from N.Design Studio using the Interface plug-in.
I liked the look, quite harmonious and worked. Pretty easy to fit into the page.

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

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

iconDock


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

The simplest and easiest to install and configure plugin. Only one script file (5KB), no CSS, everything can be customized individually, to your liking. Simple, few settings to configure will not be confused.

Placing the panel in the right place on the page did not cause any problems. Played with the settings and design - everything works as you want.

I will stop here in more detail.

Installation Instructions for iconDock jQuery plugin


Step 1

Prepare two pictures for each icon, call them image_x.jpg and image_y.jpg (it 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), set id to it, and add all the images in the form of <img> inside it, all the images must be inside the <a> tag.

<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>


Step 3

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




Step 4

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



The bold font indicates settings that can be changed:

iconMinSide : the size of a small picture, 20 - 50 px is recommended (I have 90 without problems).
iconMaxSide : the size of a large cathinka, 70 - 140 px (180 without problems) are recommended.
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 “quiet” state.
veloOutDock : time in milliseconds, delay after the cursor leaves the zone of action, 500 - 2000 ms are recommended.
valign : alignment of pictures relative to the panel; it can take the values ​​'top', 'bottom' or 'middle'.

I wish you success.

UPD: On a tip, I decided to try to modify and add to the existing functionality. I will try to add nested icons and dynamic informational doclets.

Source: https://habr.com/ru/post/95877/

More articles:


All Articles