mootools 序列化
I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with MooTools JavaScript.
我非常喜欢WordPress删除个别文章的方法。 单击删除链接,菜单项设置为红色,然后消失。 以下是使用MooTools JavaScript实现该功能的方法。
PHP-内容和标题 (The PHP - Content & Header)
The following snippet goes at the top of the page:
以下代码段位于页面顶部:
if(isset($_GET['delete']))
{
$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
$result = mysql_query($query,$link);
}
The following is used to display the records:
以下用于显示记录:
$query = 'SELECT * FROM my_table ORDER BY title ASC';
$result = mysql_query($query,$link);
while($row = mysql_fetch_assoc($result))
{
echo '<div class="record" id="record-',$row['item_id'],'">
<a href="?delete=',$row['item_id'],'" class="delete">Delete</a>
<strong>',$row['title'],'</strong>
</div>';
}
MooTools JavaScript (The 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();
});
});
});
For every link, we add a click event that triggers the AJAX request. During the request, we tween the containing element to a red background. When the AJAX request returns a "success" response, we slide the element off of the screen.
对于每个链接,我们添加一个点击事件来触发AJAX请求。 在请求期间,我们将包含的元素补间为红色背景。 当AJAX请求返回“成功”响应时,我们将元素滑出屏幕。
How would you use this? Share!
您将如何使用它? 分享!
翻译自: https://davidwalsh.name/animated-ajax-record-deletion-mootools
mootools 序列化