mootools_在MooTools 1.2中实现基本和精美的显示/隐藏

mootools

One of the great parts of MooTools is that the library itself allows for maximum flexibility within its provided classes. You can see evidence of this in the "Class" class' implement method. Using the implement method, you can add your own methods to custom or core classes.

MooTools的一大优点是库本身允许在其提供的类中提供最大的灵活性。 您可以在“类”类的实现方法中看到这一点的证据。 使用Implement方法，可以将自己的方法添加到自定义或核心类。

I've created a really basic example and more advanced example of implementing show and hide on the Element class. By implementing show and hide, I can call show() and hide() on any element of any type that I want!

我已经创建了一个非常基本的示例，并在Element类上实现了显示和隐藏的更高级的示例 。 通过实现show和hide，我可以在我想要的任何类型的任何元素上调用show()和hide() ！

View Demo 观看演示

基本示例-MooTools JavaScript (Basic Example - MooTools JavaScript)

//when the dom is ready...
window.addEvent('domready', function() {
	//time to implement basic show / hide
	Element.implement({
		//implement show
		show: function() {
			this.setStyle('display','');
		},
		//implement hide
		hide: function() {
			this.setStyle('display','none');
		}
	});
});

基本示例-XHTML /用法 (Basic Example - XHTML / Usage)

<p>
	<strong>Basic: </strong><a href="javascript:$('blove').show();">Show</a> | <a href="javascript:$('blove').hide();">Hide</a><br />
	<img src="/demo/beatles-love.jpg" id="blove" />
</p>

As you can see, the links call the image element's show and hide methods.

如您所见，这些链接调用了图像元素的show和hide方法。

花式示例-MooTools JavaScript (Fancy Example - MooTools JavaScript)

//when the dom is ready...
window.addEvent('domready', function() {
	//time to implement fancy show / hide
	Element.implement({
		//implement show
		fancyShow: function() {
			this.fade('in');
		},
		//implement hide
		fancyHide: function() {
			this.fade('out');
		}
	});
});

花式示例-XHTML /用法 (Fancy Example - XHTML / Usage)

<p>
	<strong>Fancy: </strong><a href="javascript:$('blove2').fancyShow();">Show</a> | <a href="javascript:$('blove2').fancyHide();">Hide</a><br />
	<img src="/demo/beatles-love.jpg" id="blove2" />
</p>

View Demo 观看演示

Instead of the not-so-subtle show and hide that we used in the basic example, I've chosen to use a softer fade in and fade out effect. Implementing methods is that easy!

我选择了使用更柔和的淡入和淡出效果，而不是我们在基本示例中使用的不太细腻的显示和隐藏。 实现方法就这么简单！

翻译自: https://davidwalsh.name/mootools-show-hide

mootools