LightFace：用于MooTools的Facebook灯箱

One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox clone for MooTools.  LightFace and its family of classes work well with iFrames, images, AJAX-requested content, static positioning, and static content.

我一直喜欢的Web组件之一是Facebook的模式对话框。 这个“灯箱”与其他的灯箱不同：没有深色的覆盖层，没有令人讨厌的动画大小，并且它并没有尝试“做太多”。 考虑到Facebook的对话框，我创建了LightFace：MooTools的Facebook灯箱克隆。 LightFace及其一系列类可与iFrame，图像，AJAX请求的内容，静态定位和静态内容很好地配合使用。

View Demos 查看演示 Download LightFace 下载LightFace Updated Documentation 更新的文档

LightFace功能 (LightFace Features)

LightFace has a lot of backed in goodness!

LightFace有很多优点！

• Five compact classes: LightFace, LightFace.Request, LightFace.IFrame, LightFace.Image, and LightFace.Static

  五个紧凑类： LightFace ， LightFace.Request ， LightFace.IFrame ， LightFace.Image和LightFace.Static

• Constrains image sizes with window resizes
  用窗口调整大小限制图像大小
• Provides a host of options to customize each instance
  提供许多选项以自定义每个实例
• Responds to designated keyboard events
  响应指定的键盘事件

• Works with MooTools More's Drag class to make the lightbox movable (Drag is *not* included within the repo)

  与MooTools More的Drag类一起使用，以使灯箱可移动(回购中不包含“拖动”功能)

• Add as many buttons as you'd like
  添加任意数量的按钮
• Adds and removes events as needed to minimize strain on the browser
  根据需要添加和删除事件，以最大程度地减少浏览器的负担
• Automatically positions and resizes with window resizing and scrolling
  通过窗口大小调整和滚动自动定位和调整大小
• Supports IE6+, Safari, Chrome, Opera, and iPad/iPhone
  支持IE6 +，Safari，Chrome，Opera和iPad / iPhone

LightFace核心 (LightFace Core)

LightFace.js is the core piece of LightFace.  All subsequent classes extend the core functionality provided by LightFace.  Creating a new LightFace lightbox is as easy as:

LightFace.js是LightFace的核心部分。 所有后续类都扩展了LightFace提供的核心功能。 创建新的LightFace灯箱非常简单：

// Create instance
var modal = new LightFace({
	height: 200,
	width: 300,
	title: 'My Profile,
	content: 'Lorem ipsum....'
});

// Open Sesame!
modal.open();

//Update Content
modal.load('This is different content....');

LightFace provides a wealth of flexibility by providing numerous options to customize the lightbox as you'd like:

LightFace通过提供许多选项来自定义灯箱，从而提供了极大的灵活性：

• width - (*integer|string*, defaults to 'auto') The desired width of the of the modal box.

  width - (* integer | string *，默认为'auto')模态框的所需宽度。

• height - (*string|string*, defaults to 'auto') The desired height of the of the modal box.

  height - (* string | string *，默认为'auto')模态框的期望高度。

• draggable - (*boolean*, defaults to false) Should the modal box be draggable by its title?

  draggable - (*布尔值*，默认为false)模式框是否可以按其标题拖动？

• title - (*string*, defaults to '') The modal's initial title.

  title - (* string *，默认为'')模态的初始标题。

• content - (*string*, defaults to '<p>Message not specified.</p>') The modal's initial content.

  内容 - (* string *，默认为'<p>未指定消息。</ p>')模态的初始内容。

• buttons - (*array*, defaults to []) An array containing any number of objects containing button information.

  按钮 - (* array *，默认为[])一个数组，其中包含任意数量的包含按钮信息的对象。

• fadeDelay - (*integer*, defaults to 150) The delay before instructing the overlay to fade in/out.

  fadeDelay - (* integer *，默认为150)指示覆盖淡入/淡出之前的延迟。

• fadeDuration - (*integer*, defaults to 150) The duration of overlay fade while content is loading.

  fadeDuration - (* integer *，默认为150)加载内容时叠加淡入的持续时间。

• keys - (*object*, defaults to object w/ esc key handler) Key handlers to add events to while the modal box is open.

  键 - (* object *，默认为带esc键处理程序的对象)键处理程序，用于在模式框打开时向其中添加事件。

• zIndex - (*integer*, defaults to 9001) The desired zIndex of the modal.

  zIndex - (*整数*，默认为9001)模态的所需zIndex。

• constrain - (*boolean*, defaults to false) Should the modal box constrain content when the window is resized?

  约束 - (*布尔值*，默认为false)调整窗口大小时，模式框是否应约束内容？

• errorMessage - (*string*, defaults to '

  The requested file could not be found.

  ') The error message displayed if a resource is not found.

• errorMessage - (* string *，默认为'

  找不到请求的文件。

  ')如果找不到资源，则显示错误消息。

• resetOnScroll - (*boolean*, defaults to true) Keeps the modal box in the same place on the screen if the user scrolls.

  resetOnScroll - (*布尔值*，默认为true) ，如果用户滚动，则将模式框保持在屏幕上的同一位置。

LightFace features many methods to let you control the content and flow of each LightFace instance:

LightFace具有许多方法，可让您控制每个LightFace实例的内容和流程：

• load(content,title?) - loads specified content into the lightbox

  load(content，title？) -将指定的内容加载到灯箱中

• open(fast?) - opens the lightbox

  打开(快速？) -打开灯箱

• close - closes the lightbox

  关闭 -关闭灯箱

• fade - fades in the "loading" overlay

  淡入淡出 -在“加载”叠加层中淡入淡出

• unfade - fades out the "loading" overlay

  不褪色 -淡出“正在加载”的叠加层

• getBox - returns the entire DOM node so you may update the node itself at will

  getBox-返回整个DOM节点，因此您可以随意更新节点本身

• addButton - adds a button to the lightbox footer

  addButton-向灯箱页脚添加按钮

• showButton - shows a button

  showButton-显示一个按钮

• hideButton - hides a button

  hideButton-隐藏一个按钮

LightFace.Request (LightFace.Request)

LightFace.Request merges the powers of LightFace and MooTools' Request (AJAX) class to load content into the lightbox when desired.  LightFace features an internal overlay and Facebook-style indicator which elegantly fades in and out during the time the AJAX request is running.  LightFace adds two additional options:  url and request.  The request option represents the object to be passed directly to LightFace's internal Request class instance.  Here's what a usage of LightFace.Request would look like:

LightFace.Request将LightFace和MooTools的Request(AJAX)类的功能合并在一起，以便在需要时将内容加载到灯箱中。 LightFace具有内部叠加层和Facebook样式的指示器，该指示器在AJAX请求运行期间优雅地淡入和淡出。 LightFace添加了两个附加选项： url和request 。 request选项代表直接传递给LightFace内部Request类实例的对象。 以下是LightFace.Request的用法：

// Create the instance
var modal = new LightFace.Request({
	width: 400,
	height: 300,
	title: 'User Information',
	url: 'user.php',
	request: {
		method: 'post',
		data: {
			userID: 3
		}
	}
});

// Open!
modal.open();

// Load a different url!
modal.load('content.php','Static Content');

An AJAX request is made to the url provided.  LightFace.Request mixes the settings provided with the internal Request class' default settings so you always have callbacks once the request is complete!

将对提供的URL进行AJAX请求。 LightFace.Request将内部Request类的默认设置提供的设置混合在一起，因此一旦请求完成，您将始终具有回调！

LightFace.Image (LightFace.Image)

LightFace.Image specializes in loading images within the lightbox.  The advantage to using LightFace.Image is that the lightbox will constrain the images to appropriate height and width with relation to the window size.  If the user resizes their browser, the image will resize appropriately.

LightFace.Image专门用于在灯箱内加载图像。 使用LightFace.Image的优点是，灯箱会将图像限制为与窗口大小相关的适当高度和宽度。 如果用户调整浏览器的大小，则图像将适当调整大小。

var light = new LightFace.Image({
	title: 'Image ' + (index + 1),
	fadeDuration: 100,
	fadeDelay: 400,
	keys: {
		left: function() { //load the previous image
			if(index!= 0) this.load(images[--index],'Image ' + (index + 1));
		},
		right: function() { //load the next image
			if(index != images.length-1) this.load(images[++index],'Image ' + (index + 1));
		},
		esc: function() {
			this.close();
		}
	}
});

If you want certain images to load in an IFrame, with the following HTML format:

如果您希望某些图像以以下HTML格式加载到IFrame中：

<a href="large.jpg" rel="lightface"><img src="thumb.jpg" alt="My Image" title="Click for larger view" /></a>

...you could easily code the following:

...您可以轻松编写以下代码：

var modal = new LightFace.Image();
$$('a[rel="lightface"]').addEvent('click',function() {
	modal.load(this.get('src'),this.get('alt'));
});

LightFace does not internally look for links with specific rel attributes.  My opinion is that those techniques are bad practice.

LightFace不会在内部查找具有特定rel属性的链接。 我的观点是这些技术是不好的做法。

LightFace.IFrame (LightFace.IFrame)

LightFace.IFrame provides a simple method for loading content from within an IFrame.  No thrills here, but the original LightFace class has been modified to look more elegant.  An example usage would be:

LightFace.IFrame提供了一种从IFrame中加载内容的简单方法。 这里没有任何刺激，但是原始的LightFace类已经过修改，看起来更加优雅。 一个示例用法是：

var modal = new LightFace.IFrame({ 
	height:400, 
	width:800, 
	url: 'http://google.com', 
	title: 'Google!' 
}).addButton('Close', function() { 
	light.close(); 
},true).open();

I recommend setting a fixed height and width when creating LightFace.IFrame instances.

我建议在创建LightFace.IFrame实例时设置固定的高度和宽度。

静态光面 (LightFace.Static)

All LightFace classes automatically size and center the modal dialog. LightFace.Static bucks the trend by allowing for absolute positioning of the lightbox so you can place dialog anywhere you'd like!  Provide x and y coordinates to place the LightFace and it will appear exactly where you would like it to, plus offsets provided within the instance options:

所有LightFace类都会自动调整模式对话框的大小并居中。 LightFace.Static通过允许绝对定位灯箱来逆转趋势，因此您可以将对话框放置在任何位置！ 提供x和y坐标以放置LightFace，它将精确显示在您想要的位置，以及实例选项中提供的偏移量：

//Create context menu
var contextFace = new LightFace.Static({
	title: 'Context',
	content: 'Hello!',
	width: 80,
	height: 100
});

//Open when context-link is clicked
document.id('context-link').addEvent('click',function(e){
	if(e) e.stop();
	contextFace.open(false,e.page.x,e.page.y);
});

//Close if clicked outside
var closer = function(e) {
	var parent = document.id(contextFace).getParent('.lightface');
	if(e.target != parent && !parent.contains(e.target)) {
		contextFace.close();
	}
};
document.id(document.body).addEvent('click',closer);

LightFace.Static is a perfect candidate for your next context menu or "toaster" functionality.

LightFace.Static是您下一个上下文菜单或“烤面包机”功能的理想选择。

View Demos 查看演示 Download LightFace 下载LightFace Updated Documentation 更新的文档

还有更多！ (More To Come!)

Look forward to more demos of how you can use LightFace in the future (like photo tagging).  In the mean time, please feel free to fork on GitHub to help me improve LightFace and file bug reports on LightFace issues.

期待将来有更多关于如何使用LightFace的演示(如照片标记)。 同时，请随时在GitHub上进行分叉，以帮助我改善LightFace并提交有关LightFace问题的错误报告。

翻译自: https://davidwalsh.name/facebook-lightbox