mootools

One of my favorite Firefox plugins is called . LinkAlert shows the user an icon when they hover over a special link, like a link to a Microsoft Word DOC or a PDF file. I love that warning because I hate the surprise of opening a PDF file. The problem with LinkAlert in its current state is that it's only available with Firefox...until now. Armed with my favorite JavaScript library, MooTools, I've duplicated the functionality of LinkAlert.

我最喜欢的Firefox插件之一叫做 。 将鼠标悬停在特殊链接上时，LinkAlert会向用户显示一个图标，例如指向Microsoft Word DOC或PDF文件的链接。 我喜欢这个警告，因为我讨厌打开PDF文件的惊奇。 LinkAlert当前状态的问题是，它仅在Firefox中可用...直到现在。 借助我最喜欢JavaScript库MooTools，我复制了LinkAlert的功能。

MooTools JavaScript类 (The MooTools JavaScript Class)

var LinkAlert = new Class({	//implements	Implements: [Options,Events],	//options	options: {		container: document.body,		extensions: {},		offsets: { x:6, y:-15 },		preloadImages: true,		protocols: {},		sticky: false,		onShow: function(el,image) {			this.image.setStyle('display','');		},		onHide: function(el,image) {			this.image.setStyle('display','none');		}	},		//initialization	initialize: function(options) {		//set options		this.setOptions(options);		this.extensions = new Hash(this.options.extensions);		this.protocols = new Hash(this.options.protocols);		this.image = new Element('img',{			src: '',			styles: {				position: 'absolute',				top: -200,				left: -200,				visibility: 'hidden'			}		}).inject(document.id(document.body));		//preload images, if necessary		if(this.options.preloadImages) { this.preloadImages(); }		//add the listeners		this.addListeners(this.extensions,'$=','extensions');		this.addListeners(this.protocols,'^=','protocols');	},		//give direction to links	addListeners: function(items,sep,type) {		//for every item		items.each(function(image,extension,type) {			//for every link of that type			$$('a[href' + sep + '\'' + extension + '\']').each(function(el) {				//if the same protocol, don't bother showing				if(type == 'protocol' && window.location.protocol == extension + ':') { return; }				//add the show/hide events				el.addEvents({					mouseenter: function(e) {						//position the image and give it the proper SRC						this.reposition(e).set('src',image);						//fire the event						this.fireEvent('show',[el,image]);					}.bind(this),					mouseleave: function(e) {						//fire the event						this.fireEvent('hide',[el,image]);					}.bind(this)				});				//sticky?				if(this.options.sticky) {					el.addEvent('mousemove',function(e) {						this.reposition(e);					}.bind(this));				}			},this);		},this);	},		//repositions	reposition: function(e) {		return this.image.setStyles({			left: e.page.x + this.options.offsets.x,			top: e.page.y + this.options.offsets.y		});	},		//preloads necessary images	preloadImages: function() {		var images = [this.protocols.getValues(),this.extensions.getValues()].flatten();		new Asset.images(images);	}});

Options for LinkAlert include:

LinkAlert的选项包括：

• container: (defaults to document.body) The container to search for links within.

  container ：( 默认为document.body)用于在其中搜索链接的容器。

• extensions: (defaults to {}) An object container file extensions and images to look for.

  扩展名：( 默认为{})要查找的对象容器文件扩展名和图像。

• offsets: (defaults to { x:6, y:-15 }) The x and y offset from the mouse the icon should display.

  offsets ：( 默认为{x：6，y：-15})图标应显示的与鼠标的x和y偏移量。

• preloadImages: (defaults to false) Whether or not to preload all file extension and protocol icons.

  preloadImages：( 默认为false)是否预加载所有文件扩展名和协议图标。

• protocols: (defaults to {}) An object container protocols and images to look for.

  协议：( 默认为{})要查找的对象容器协议和图像。

• sticky: (defaults to false) Defines whether the icon should follow the mouse while the mouse is hovered over a link.

  sticky ：( 默认为false)定义当鼠标悬停在链接上时图标是否应该跟随鼠标。

Events for LinkAlert include:

LinkAlert的事件包括：

• Show: Fires when an icon shows.

  显示：图标显示时触发。

• Hide: Fires when an icon hides.

  隐藏：隐藏图标时触发。

样品用量 (Sample Usage)

/* do it */window.addEvent('domready', function() {	var graphicsDir = 'link-alert/';	var context = new LinkAlert({		extensions: {			doc: graphicsDir + 'word.png',			js: graphicsDir + 'js.png',			pdf: graphicsDir + 'pdf.png',			txt: graphicsDir + 'text.gif',			xls: graphicsDir + 'xls.png',			jpg: graphicsDir + 'jpg.png'		},		protocols: {			ftp: graphicsDir + 'ftp.png',			https: graphicsDir + 'secure.png',			'javascript:': graphicsDir + 'js.png'		},		preloadImages: true,		sticky: true,		onShow: function(el,image) {			this.image.fade('in');		},		onHide: function(el,image) {			this.image.fade('out');		}	});});

I use a few of the options and custom show and hide functionality.

我使用了一些选项以及自定义显示和隐藏功能。

I don't know if this plugin has practical usage for all users but I'll definitely be using it for sites that are in-development. Have any any other uses for this? Share them!

我不知道该插件是否对所有用户都实用，但是我肯定会在开发中的网站上使用它。 还有其他用途吗？ 分享他们！

翻译自:

mootools