实现 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> |
正如你所看到的，这个图像元素就可以使用显示和隐藏方法。
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> |
取而代之的不是第一个那样微妙的显示和隐藏，我选择使用一种淡入和淡出效果。实施办法是这么简单！
文章评论 已经有 0 条评论！