IconDock En

De Wikicon

Dreceres ràpides: navegació, cerca

Este artículo también está disponible en castellano.
Aquest article també està disponible en català.

Contingut

[edita] iconDock jQuery Plugin

iconDock logo
iconDock logo


Image:Dockexample.png

iconDock is a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one.

It is based on the Google X menu, an approach that Google did to create this effect on the web.

[edita] Example

You can see an example of the plugin here: http://icon.cat/software/iconDock/0.8b/dock.html


[edita] Download 8.0 beta version (current)

[edita] Download older versions

0.8b.


[edita] To Do List

  • Order the icons in a Drag&Drop way.
  • Drag&Drop new elements on the menu (same as googlex.jayssite.com).
  • Add contextual help (tip) on roll over an icon.


[edita] Bugs To Fix

[edita] Project group

I created a mail group for the project at Google Groups.

Link to the group: http://groups.google.com/group/icondock/

groups_medium.gif

[edita] How to use it

  • Step 1.- Add the plugin iconDock (jquery.dock.js) in the HEAD section of the web, after the jQuery library.
<html>
	<head>
		[...]
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="jquery.dock.js"></script>
	</head>
	<body>
		[...]
	</body>
<html>
  • Step 2.- Generate two images for each icon: imagecode_x.gif (or .jpg or .png) and imagecode_X.gif (or .jpg or .png), where x is the minimum size of the icon side, and X the maximum.
  • Step 3.- Create a DOM Element (HTML Tag) with an id attribute containing the list of all the <img> tags. Each of them must be inside an <a> tag with the chosen link.
<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">
		<img src="img/special_35.gif" alt="Especial_alt" border="0" />
	</a>
</div>
  • Step 4.- (optional) Configure the menu (read the next section to know all the configuration parameters).
  • Step 5.- Add the effect to each desired menu with the jQuery('#idOfTheSelectedElement').addDockEffect(confObject); method.
<script type="text/javascript">
	var confObject = {
		iconMinSide : 35,
		iconMaxSide : 70,
		distAttDock : 100,
		coefAttDock : 2,	
		veloOutDock : 500,
		valign: 'bottom'
	}
	jQuery(function() {
 		jQuery("#Bar").addDockEffect(confObject);
	});
</script>

[edita] Configuration

var conf = {
	iconMinSide : 35,
	iconMaxSide : 70,
	distAttDock : 100,
	coefAttDock : 2,	
	veloOutDock : 500,
	valign: 'bottom'
}

[edita] iconMinSide

Minimum length -in pixels- of the menu icons side.

Recommended values range: 20-50 pixels.


[edita] iconMaxSide

Maximum length -in pixels- of the menu icons side.

Recommended values range: 70-140 pixels.


[edita] distAttDock

Attenuation distance of the effect. Distance between the cursor position and the position where the effect ends.

Recommended values: They depend on the number of icons and the minimum size of them. A good value could be a third of the whole menu size when the mouse is not over it.

[edita] coefAttDock

Attenuation coefficient. Whether the attenuation is less or more progressive.

Recommended values range: 0.5-2.5.


[edita] veloOutDock

Restart velocity. Time between the mouse goes out of the menu and the icons get the initial position.

Recommended values range: 0.5-2 seconds.

[edita] valign

Vertical align of the menu icons.

Values: 'top', 'bottom' or 'middle'.

[edita] Tested browsers

  • PC & Windows XP
    • Mozilla Firefox 2.0
    • Internet Explorer 6.0
    • Internet Explorer 7.0
  • Apple Mac & Mac OS X
    • Mozilla Firefox 1.5
    • Safari 2.0


[edita] License

iconDock jQuery Plugin uses the same licenses as the jQuery library:

/*
 * iconDock jQuery plugin 
 * http://icon.cat/software/iconDock
 *
 * Copyright (c) 2007 Isaac Roca & icon.cat (iroca@icon.cat)
 * Dual licensed under the MIT and GPL licenses.
 *
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 * 
 */

MIT License

iconDock jQuery plugin
http://icon.cat/software/iconDock

Copyright (c) 2007 Isaac Roca & icon.cat (iroca@icon.cat)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

GPL License

iconDock jQuery plugin
http://icon.cat/software/iconDock

Copyright (C) 2007  Isaac Roca & icon.cat (iroca@icon.cat)

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
Wikicon
Enllaços externs