mootools_MooTools剪贴板插件

mootools

The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse. Here's how to use the MooTools Clipboard plugin enhanced by a "messenger" DIV that pops in when content has been copied.

将内容放置到用户剪贴板中的功能对于用户而言非常方便。 用户可以单击鼠标来复制特定区域的内容，而不必单击并向下拖动可能是冗长的文档。 这是使用MooTools剪贴板插件的方法，该插件由复制内容后弹出的“ messenger” DIV增强。

View Demo 查看演示 Download 下载

CSS (The CSS)

.messenger	{ width:150px; text-align:center; padding:5px 8px; font-weight:bold; position:absolute; right:2%; top:2%; font:12px arial; }

You can make the messenger look however you'd like. The messenger isn't core to the plugin, so this CSS may not be needed.

您可以根据需要使Messenger外观。 Messenger不是插件的核心，因此可能不需要此CSS。

MooTools JavaScript (The MooTools JavaScript)

var ClipBoard = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		swfLocation: 'copy.swf',
		clipboardID: 'flashcopier'
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//add the copier to the page
		this.createCopier();
	},
	
	//put it in the page
	createCopier: function() {
		if(!$(this.options.clipboardID)) {
			new Element('div',{
				id: this.options.clipboardID
			}).inject(document.body);
		}
	},
	
	//a method that does whatever you want
	save: function(text) {
		if (window.clipboardData)
		{
			window.clipboardData.setData('Text',text);
		}
		else
		{
			$(this.options.clipboardID).set('html','');
		}
	}
});

The small plugin accepts two parameters: swfLocation, which is the path to the needed "copy.swf" file and clipboardID, the ID of the injected clipboard element.

这个小插件接受两个参数： swfLocation (它是所需的“ copy.swf”文件的路径)和剪贴板 ID(注入的剪贴板元素的ID)。

MooTools的用法 (The MooTools Usage)

//do it!
window.addEvent('domready',function() {
	
	//messenger
	var messenger = new Element('div',{ 'opacity':0, 'class':'messenger' }).inject(document.body,'top');
	var myMorph = new Fx.Morph(messenger,{'duration':700,'link':'chain'});
	
	var clipboard = new ClipBoard();
	$$('textarea').addEvent('focus',function() {
		//save to clipboard and select
		clipboard.save(this.value);
		this.select();
		
		//pop in the notifier, then hide it
		messenger.set('text','The text has been copied!');
		myMorph.start({'opacity':1,'background-color':'#90ee90'});
		var jj = function() { myMorph.start({'opacity':0,'background-color':'#90ee90'}); };
		jj.delay(1000)
	});
});

For every textarea on the page, I copy the contained text when the element receives focus. You'll also see my messenger code which isn't core to the plugin.

对于页面上的每个文本区域，当元素获得焦点时，我都会复制包含的文本。 您还将看到我的Messenger代码，它不是插件的核心。

神秘的copy.swf文件 (The Mysterious copy.swf File)

When I first found the file, I couldn't help but wonder what Actionscript code was needed to achieve the OS copy functionality. Turns out all you need is the following Actionscript at the first slide of the SWF:

当我第一次找到该文件时，我不禁想知道要实现OS复制功能需要什么Actionscript代码。 事实证明，您所需要做的只是SWF的第一张幻灯片中的以下Actionscript：

if (clipboard.length)
{
	System.setClipboard(clipboard);
} // end if

View Demo 查看演示 Download 下载

If you want to use it on your own site, download the plugin and download the copy.swf file.

如果要在自己的网站上使用它，请下载插件并下载copy.swf文件 。

翻译自: https://davidwalsh.name/mootools-clipboard-plugin

mootools