Micaela 19 de Septiembre de 2009 a las 09.04
   Imprimir artículo
elWebmaster.com

Mootools: Avisa con íconos emergentes a qué tipo de archivo apunta el enlace

Firefox, javascript, enlace, diseño web, archivo, mootools, linkalert, emergente, tipo, apuntar

mootoolsLinkAlert es un plugin Firefox que le muestra al usuario un ícono cuando hacen hover sobre un link especial, como un link a un archivo Microsoft Word (.DOC) o a un PDF.

El problema de tener a LinkAlert sólo disponible para Firefox actualmente, ha dejado de serlo ya que te presentamos un duplicado de su funcionalidad armado con Mootools.

La clase Javascript de MooTools

PLAIN TEXT
  1. var LinkAlert = new Class({
  2.  
  3. //implements
  4. Implements: [Options,Events],
  5.  
  6. //options
  7. options: {
  8. container: document.body,
  9. extensions: {},
  10. offsets: { x:6, y:-15 },
  11. preloadImages: true,
  12. protocols: {},
  13. sticky: false,
  14. onShow: function(el,image) {
  15. this.image.setStyle('display','');
  16. },
  17. onHide: function(el,image) {
  18. this.image.setStyle('display','none');
  19. }
  20. },
  21.  
  22. //initialization
  23. initialize: function(options) {
  24. //set options
  25. this.setOptions(options);
  26. this.extensions = new Hash(this.options.extensions);
  27. this.protocols = new Hash(this.options.protocols);
  28. this.image = new Element('img',{
  29. src: '',
  30. styles: {
  31. position: 'absolute',
  32. top: -200,
  33. left: -200,
  34. visibility: 'hidden'
  35. }
  36. }).inject(document.id(document.body));
  37. //preload images, if necessary
  38. if(this.options.preloadImages) { this.preloadImages(); }
  39. //add the listeners
  40. this.addListeners(this.extensions,'$=','extensions');
  41. this.addListeners(this.protocols,'^=','protocols');
  42. },
  43.  
  44. //give direction to links
  45. addListeners: function(items,sep,type) {
  46. //for every item
  47. items.each(function(image,extension,type) {
  48. //for every link of that type
  49. $$('a[href' + sep + '\'' + extension + '\']').each(function(el) {
  50. //if the same protocol, don't bother showing
  51. if(type == 'protocol' && window.location.protocol == extension + ':') { return; }
  52. //add the show/hide events
  53. el.addEvents({
  54. mouseenter: function(e) {
  55. //position the image and give it the proper SRC
  56. this.reposition(e).set('src',image);
  57. //fire the event
  58. this.fireEvent('show',[el,image]);
  59. }.bind(this),
  60. mouseleave: function(e) {
  61. //fire the event
  62. this.fireEvent('hide',[el,image]);
  63. }.bind(this)
  64. });
  65. //sticky?
  66. if(this.options.sticky) {
  67. el.addEvent('mousemove',function(e) {
  68. this.reposition(e);
  69. }.bind(this));
  70. }
  71. },this);
  72. },this);
  73. },
  74.  
  75. //repositions
  76. reposition: function(e) {
  77. return this.image.setStyles({
  78. left: e.page.x + this.options.offsets.x,
  79. top: e.page.y + this.options.offsets.y
  80. });
  81. },
  82.  
  83. //preloads necessary images
  84. preloadImages: function() {
  85. var images = [this.protocols.getValues(),this.extensions.getValues()].flatten();
  86. new Asset.images(images);
  87. }
  88. });

Opciones incluidas para LinkAlert:

  • container: (por defecto: document.body) El container para buscar links.
  • extensions: (por defecto: {}) Un archive objeto contenedor de extensiones e imágenes para buscar.
  • offsets: (por defecto { x:6, y:-15 }) La compensación x e y del mouse que el ícono debería mostrar.
  • preloadImages: (por defecto false) Si es necesario o no precargar todas las extensiones de archivo e íconos de protocolo.
  • protocols: (por defecto {}) Un objeto container de protocolos e imágenes para buscar.
  • sticky: (por defecto false) Define si el ícono debe seguir al mouse mientras este hace hover sobre un link.

Eventos incluidos para LinkAlert:

  • Show: Se activa cuando un ícono se muestra.
  • Hide: Se activa cuando un ícono se oculta.

Ejemplo de Implementación

PLAIN TEXT
  1. /* do it */
  2. window.addEvent('domready', function() {
  3. var graphicsDir = 'link-alert/';
  4. var context = new LinkAlert({
  5. extensions: {
  6. doc: graphicsDir + 'word.png',
  7. js: graphicsDir + 'js.png',
  8. pdf: graphicsDir + 'pdf.png',
  9. txt: graphicsDir + 'text.gif',
  10. xls: graphicsDir + 'xls.png',
  11. jpg: graphicsDir + 'jpg.png'
  12. },
  13. protocols: {
  14. ftp: graphicsDir + 'ftp.png',
  15. https: graphicsDir + 'secure.png',
  16. 'javascript:': graphicsDir + 'js.png'
  17. },
  18. preloadImages: true,
  19. sticky: true,
  20. onShow: function(el,image) {
  21. this.image.fade('in');
  22. },
  23. onHide: function(el,image) {
  24. this.image.fade('out');
  25. }
  26. });
  27. });

Haz clic aquí para ver una demostración »

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Artículos relacionados

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión