实现 Show()和 Hide()方法,基于MooTools

MooTools最大的灵活性就是可以自由的扩展类,实际上确实有MooTools的plug-ins在帮你完成这些动作:jQuery syntax for MooTools。 MooTools着重在延伸能力上,这意味着你可以做任何你想做的事情,这是jQuery没办法办到的。 MooTools可以模仿jQuery,但是jQuery没办法模仿MooTools,如果你想要用类别或是延伸的原生原型物件等等MooTools的功能,你就得自己手动去写额外的程式。

接下来,我们就通过扩展Element class来实现show 和 hide ,通过扩展显示和隐藏方法,我可以在任何元素上使用 Show()和Hide();

Basic Example – MooTools Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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');
		}
	});
});

Basic Example – XHTML / Usage

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

 

MooTools Demo1

 

正如你所看到的,这个图像元素就可以使用显示和隐藏方法。

Fancy Example – MooTools Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//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');
		}
	});
});

Fancy Example – XHTML / Usage

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

 

MooTools Demo2

 

取而代之的不是第一个那样微妙的显示和隐藏,我选择使用一种淡入和淡出效果。实施办法是这么简单!

站点统计