IconDock Es
De Wikicon
Aquest article també està disponible en català.
This article is also avaliable in english.
Contingut |
[edita] iconDock jQuery Plugin
iconDock es un plugin de la librería jQuery de JavaScript que permite crear para web el efecto dock del menú del sistema operativo Mac OS X.
La idea está basada en Google X, una primera aproximación que Google hizo para hacer dicho efecto para web.
[edita] Ejemplo
Puedes ver un ejemplo de su funcionamiento aquí: http://icon.cat/software/iconDock/0.8b/dock.html
[edita] Descarga de la versión 8.0 beta (actual)
- Versión comprimida (3KB)
- Versión descomprimida (código fuente) (8KB)
[edita] Descarga de anteriores versiones
0.8b.
[edita] To Do List (listado de cosas por hacer)
- Poder ordenar los elementos del menú Drag&Drop.
- Poder añadir y quitar elementos.
- Añadir una capa informativa (globo) al hacer rollover en cada icono.
[edita] Bugs To Fix (listado de correcciones pendientes)
[edita] Grupo del proyecto
He creado un grupo de distribución de correo del proyecto en Google por si alguien se anima a colaborar o tiene alguna consulta.
Enlace al grupo: http://groups.google.com/group/icondock/
[edita] Uso
- Paso 1.- Incrustar la librería jQuery en el HEAD de la página y el plugin iconDock a continuación.
<html> <head> [...] <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dock.js"></script> </head> <body> [...] </body> <html>
- Paso 2.- Generar dos imágenes para cada icono: codigoimagen_x.gif (o .jpg o .png) y codigoimagen_X.gif (o .jpg o .png), dónde x es el tamaño del lado de la imagen pequeña, y X el de la imagen grande.
- Paso 3.- Crear un elemento HTML (DOM) con una id determinada que contenga una lista de elementos <img> dentro de elementos <a> con el enlace.
<div id="BarraPersonalitzada"> <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>
- Paso 4.- (opcional) Configurar el menú (leer la siguiente sección para conocer las opciones de configuración).
- Paso 5.- Añadir cada menú con el método jQuery('#idOfTheSelectedElement').addDockEffect(confObject);
<script type="text/javascript">
var confObject = {
iconMinSide : 35,
iconMaxSide : 70,
distAttDock : 100,
coefAttDock : 2,
veloOutDock : 500,
valign: 'bottom'
}
jQuery(function() {
jQuery("#BarraPersonalitzada").addDockEffect(confObject);
});
</script>
[edita] Configuración
var conf = {
iconMinSide : 35,
iconMaxSide : 70,
distAttDock : 100,
coefAttDock : 2,
veloOutDock : 500,
valign: 'bottom'
}
[edita] iconMinSide
Tamaño mínimo de los iconos.
Valores recomendados: entre 20 y 50 píxeles.
[edita] iconMaxSide
Tamaño máximo de los iconos.
Valores recomendados: entre 70 y 140 píxeles.
[edita] distAttDock
Distancia de atenuación del efecto. Distancia entre el cursor y cada uno de los extremos donde ya no hay efecto de ampliación.
Valores recomendados: depende del número de iconos y el tamaño mínimo de éstos. Un buen valor seria una tercera parte de la medida del menú cuando no hay el cursor encima.
[edita] coefAttDock
Coeficiente de atenuación del dock. Si la atenuación es más progresiva o menos progresiva.
Valores recomendados: Entre 0,5 y 2,5.
[edita] veloOutDock
Velocidad de reinicio del menú. Tiempo que se tarda entre que el cursor sale del menú hasta que éste vuelve a su posición inicial.
Valores recomendados: Entre 0,5 y 2 segundos.
[edita] valign
Alineación vertical de los iconos.
Valores: 'top', 'bottom' o 'middle'.
[edita] Navegadores probados
- 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] Licencia
iconDock jQuery Plugin se publica con las mismas licencias que la librería jQuery:
/* * 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 * */
Licencia MIT
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.
Licencia GPL
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.
