使用 MooTools 动画 AJAX 记录删除

我非常喜欢 WordPress 删除单个文章的方法。您单击删除链接，菜单项呈红色动画，然后该项消失。下面介绍如何使用 MooTools JavaScript 实现该功能。

PHP – 内容和标题

以下代码段位于页面顶部：

if(isset($_GET['delete']))
{
	$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
	$result = mysql_query($query,$link);
}

下面是用来显示记录的：

$query = 'SELECT * FROM my_table ORDER BY title ASC';
$result = mysql_query($query,$link);
while($row = mysql_fetch_assoc($result))
{
	echo '<div  id="record-',$row['item_id'],'">
				<a href="?delete=',$row['item_id'],'" >Delete</a>
				<strong>',$row['title'],'</strong>
			</div>';
}

MooTools JavaScript

window.addEvent('domready',function() {
	$$('a.delete').each(function(el) {
		el.addEvent('click',function(e) {
			e.stop();
			var parent = el.getParent('div');
			var request = new Request({
				url: 'mootools-record-delete.php',
				link: 'chain',
				method: 'get',
				data: {
					'delete': parent.get('id').replace('record-',''),
					ajax: 1
				},
				onRequest: function() {
					new Fx.Tween(parent,{
						duration:300
					}).start('background-color', '#fb6c6c');
				},
				onSuccess: function() {
					new Fx.Slide(parent,{
						duration:300,
						onComplete: function() {
							parent.dispose();
						}
					}).slideOut();
				}
			}).send();
		});
	});
});

对于每个链接，我们添加一个触发 AJAX 请求的点击事件。在请求期间，我们将包含元素补间为红色背景。当 AJAX 请求返回“成功”响应时，我们将元素滑出屏幕。

你会如何使用它？分享！