IconDock En
De Wikicon
Este artículo también está disponible en castellano.
Aquest article també està disponible en català.
Contingut |
[edita] iconDock jQuery Plugin
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)
- Compressed version (3KB)
- Uncompressed version (source code) (8KB)
[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/
[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.
