mootools_使用MooTools或jQuery的WordPress样式的注释控件

mootools

WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery.

当您将鼠标移到记录容器上或从记录容器中移出时，WordPress对显示和隐藏评论控件链接的Admin Dashboard几乎没有什么影响。 这是使用MooTools或jQuery实现这种效果的方法。

View Demo 观看演示

XHTML (The XHTML)

<!-- more records above -->
<div class="record">
	<p>
		<strong>Comment Person 2</strong><br />
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<div class="record-controls">
		<a href="#" class="unapprove">Unapprove</a> |
		<a href="#">Edit</a> |
		<a href="#">Reply</a> |
		<a href="#">Spam</a> |
		<a href="#" class="delete">Delete</a>
	</div>
</div>
<div class="record">
	<p>
		<strong>Comment Person 3</strong><br />
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<div class="record-controls">
		<a href="#" class="unapprove">Unapprove</a> |
		<a href="#">Edit</a> |
		<a href="#">Reply</a> |
		<a href="#">Spam</a> |
		<a href="#" class="delete">Delete</a>
	</div>
</div>
<!-- more records below -->

Notice that we place the links into the pageand DO NOT inject them using MooTools or jQuery. Why? So that if the user doesn't have JavaScript enabled, they can still see the links.

请注意，我们将链接放置到页面中，请勿使用MooTools或jQuery注入链接。 为什么？ 这样，如果用户未启用JavaScript，他们仍然可以看到链接。

CSS (The CSS)

.record				{ width:700px; border:1px solid #ccc; padding:15px; margin:0 0 15px 0; }
.record:hover		{ background:#eee; }
.record-controls	{ font-size:10px; }
.unapprove			{ color:#d98500; }
.delete				{ color:#bc0b0b; }

You may modify the above CSS any way you'd like.

您可以根据需要修改上述CSS。

MooTools JavaScript (The MooTools JavaScript)

/* when the dom is ready... */
window.addEvent('domready',function() {
	/* hide all controls right away */
	$$('div.record-controls').setStyle('visibility','hidden');
	/* add events for show/hide */
	$$('div.record').each(function(rec) {
		var controls = rec.getFirst('div.record-controls');
		rec.addEvents({
			mouseenter: function() { controls.fade('in') },
			mouseleave: function() { controls.fade('out') }
		});
	});
});

Once the DOM is ready, we hide all controls and direct MooTools to show and hide the record controls on the mouseover and mouseout events.

DOM准备就绪后，我们将隐藏所有控件，并指示MooTools在mouseover和mouseout事件上显示和隐藏记录控件。

jQuery JavaScript (The jQuery JavaScript)

/* when the dom is ready... */
$(document).ready(function(){
	/* hide all controls right away */
	$('div.record-controls').css('visibility','hidden');
	/* add events for show/hide */
	$('div.record').each(function() {
		var controls = $(this).children('div.record-controls');
		$(this).hover(
			function() { $(controls).css('visibility','visible') },
			function() { $(controls).css('visibility','hidden') }
		);
	});
});

The above achieves a similar effect using jQuery.

上面使用jQuery实现了类似的效果。

View Demo 观看演示

I like hiding these links by default because the link colors can be distracting. What do you think?

我喜欢默认隐藏这些链接，因为链接颜色可能会分散注意力。 你怎么看？

翻译自: https://davidwalsh.name/comment-mootools-jquery

mootools