mootools_MooTools覆盖插件

mootools

Overlays have become a big part of modern websites; we can probably attribute that to the numerous lightboxes that use them. I've found a ton of overlay code snippets out there but none of them satisfy my taste in code. Many of them are bloated, inflexible, or nonfunctional. The only way to make myself happy was to create one of my own.

重叠式广告已成为现代网站的重要组成部分； 我们可能可以将其归因于使用它们的众多灯箱。 我发现了很多覆盖代码片段，但是没有一个能满足我的代码需求。 他们中的许多人are肿，僵硬或无功能。 使自己快乐的唯一方法就是创造自己的一个。

View Demo 查看演示 Download 下载

MooTools JavaScript (The MooTools JavaScript)

var Overlay = new Class({
	
	Implements: [Options,Events],
	
	options:  {
		id: 'overlay',
		color: '#000',
		duration: 500,
		opacity: 0.5,
		zIndex: 5000/*,
		onClick: $empty,
		onClose: $empty,
		onHide: $empty,
		onOpen: $empty,
		onShow: $empty
		*/
	},
	
	initialize: function(container,options) {
		this.setOptions(options);
		this.container = document.id(container);
		this.overlay = new Element('div',{
			id: this.options.id,
			opacity: 0,
			styles: {
				position: 'absolute',
				background: this.options.color,
				left: 0,
				top: 0,
				'z-index': this.options.zIndex
			},
			events: {
				click: function() {
					this.fireEvent('click');
				}.bind(this)
			}
		}).inject(this.container);
		this.tween = new Fx.Tween(this.overlay,{ 
			duration: this.options.duration,
			link: 'cancel',
			property: 'opacity',
			onStart: function() {
				var size = this.container.getScrollSize();
				this.overlay.setStyles({
					width: size.x,
					height: size.y
				});
			}.bind(this),
			onComplete: function() {
				this.fireEvent(this.overlay.get('opacity') == this.options.opacity ? 'show' : 'hide');
			}.bind(this)
		});
	},
	open: function() {
		this.fireEvent('open');
		this.tween.start(this.options.opacity);
	},
	close: function() {
		this.fireEvent('close');
		this.tween.start(0);
	}
});

Arguments for Overlay include:

重叠的参数包括：

• container: The container of that will host the overlay.

  container：的容器将托管叠加层。

• options: The class' options.

  选项：班级的选项。

Options for Overlay include:

叠加选项包括：

• id: (defaults to 'overlay') The ID of the overlay to be created.

  id ：( 默认为“ overlay”)要创建的叠加层的ID。

• color: (defaults to '#000') The background color of the overlay.

  color ：( 默认为'＃000')叠加层的背景色。

• duration: (defaults to 500) The open/close duration of the overlay.

  持续时间：( 默认为500)覆盖层的打开/关闭持续时间。

• opacity: (defaults to 0.5) The destination opacity level of the overlay.

  opacity ：( 默认值为0.5)叠加层的目标不透明度级别。

• zIndex: (defaults to 5000) The z-index of the overlay.

  zIndex ：( 默认为5000)叠加层的z-index。

Events for Overlay include:

叠加事件包括：

• onClick: Executes when the overlay is clicked

  onClick：单击叠加层时执行

• onClose: Executes when the close directive has been given

  onClose：在给出close指令后执行

• onHide: Executes when the overlay is completely hidden

  onHide：当叠加层完全隐藏时执行

• onOpen: Executes when open directive is given

  onOpen：在给出open指令时执行

• onShow: Executes when overlay has faded into view

  onShow：在叠加层淡入视图时执行

用法 (The Usage)

var overlay = new Overlay(document.body,{
	id: 'overlay',
	color: '#000',
	duration: 300,
	opacity: 0.4,
	onClick: function() {
		this.close();
	},
	onShow: function() {
		//make ajax call while the overlay is happening...?
		//var Request = new Request()....
	}
});

As simple as it gets. Be sure to set the "id" option if you plan on using more than one overlay in the page (boooo).

就这么简单。 如果您打算在页面中使用多个叠加层，请务必设置“ id”选项(boooo)。

View Demo 查看演示 Download 下载

叠加准则 (Overlay Guidelines)

A few notes about overlays:

有关叠加层的一些注意事项：

• Please, please, please use the click event above to hide the overlay:

  拜托，拜托，请使用上面的click事件隐藏叠加层：

  
  onClick: function() {
  	this.close();
  }
  Nothing bugs me more than clicking on an overlay and nothing happening.

• Use the same background color for your overlays -- consistency is key.
  为您的叠加层使用相同的背景色-一致性是关键。
• Try to stick to using/re-using the same overlay -- creating a bunch of them only pollutes the DOM.
  尝试坚持使用/重复使用相同的叠加层-创建大量叠加层只会污染DOM。

Now your body can easily get overlaid! Sweet!

现在，您的身体可以轻松覆盖！ 甜！

翻译自: https://davidwalsh.name/mootools-overlay

mootools