jquery 漂亮的删除确认和提交无刷新删除示例


Posted in Javascript onNovember 13, 2013

本例数据库结构很简单,就一个字段就行了
jquery 漂亮的删除确认和提交无刷新删除示例 
jquery.confirm.js

(function($){ 
$.confirm = function(params){ 
if($('#confirmOverlay').length){ 
// A confirm is already shown on the page: 
return false; 
} 
var buttonHTML = ''; 
$.each(params.buttons,function(name,obj){ 
// Generating the markup for the buttons: 
buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>'; 
if(!obj.action){ 
obj.action = function(){}; 
} 
}); 
var markup = [ 
'<div id="confirmOverlay">', 
'<div id="confirmBox">', 
'<h1>',params.title,'</h1>', 
'<p>',params.message,'</p>', 
'<div id="confirmButtons">', 
buttonHTML, 
'</div></div></div>' 
].join(''); 
$(markup).hide().appendTo('body').fadeIn(); 
var buttons = $('#confirmBox .button'), 
i = 0; 
$.each(params.buttons,function(name,obj){ 
buttons.eq(i++).click(function(){ 
// Calling the action attribute when a 
// click occurs, and hiding the confirm. 
obj.action(); 
$.confirm.hide(); 
return false; 
}); 
}); 
} 
$.confirm.hide = function(){ 
$('#confirmOverlay').fadeOut(function(){ 
$(this).remove(); 
}); 
} 
})(jQuery);

PHP Code
<div id="page"> 
<?php 
require "conn.php"; 
$sql="select * from `add_delete_record` where id>0"; 
$rs=mysql_query($sql); 
if ($row = mysql_fetch_array($rs)) 
{ 
do { 
?> 
<div class="item"> 
<a href="#" > 
<?php echo $row['text']?> 
</a> 
<div class="delete" id="<?php echo $row['id']?>"></div> 
</div> 
<?php 
} 
while ($row = mysql_fetch_array($rs)); 
}?> 
</div>

JavaScript Code
$(document).ready(function(){ 
$('.item .delete').click(function(){ 
var elem = $(this).closest('.item'); 
var id=$(this).attr('id'); 
$.confirm({ 
'title' : '删除该记录?', 
'message' : '您确认删除该记录? <br />删除后无法恢复记录.', 
'buttons' : { 
'Yes' : { 
'class' : 'blue', 
'action': function(){$.ajax({ 
type: 'GET', 
url: 'del.php', 
data: 'id='+id, 
}); 
elem.slideUp(); 
} 
}, 
'No' : { 
'class' : 'gray', 
'action': function(){} // Nothing to do in this case. You can as well omit the action property. 
} 
} 
}); 
}); 
});

del.php
<?php 
require "conn.php"; 
$id=$_GET['id']; 
$delete_small_sql = "delete from add_delete_record where id='$id'"; 
$result_small = mysql_query($delete_small_sql); 
?>
Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
javascript实现手动点赞效果
Apr 09 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 #Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 #Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 #Javascript
jquery validate在ie8下的bug解决方法
Nov 13 #Javascript
JQuery伸缩导航练习示例
Nov 13 #Javascript
JS:window.onload的使用介绍
Nov 13 #Javascript
JQuery each打印JS对象的方法
Nov 13 #Javascript
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
设置php页面编码的两种方法示例介绍
2014/03/03 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
JS验证图片格式和大小并预览的简单实例
2016/10/11 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
Python Requests安装与简单运用
2016/04/07 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
交通安全教育制度
2014/02/02 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
高中军训感想300字
2014/03/04 职场文书
信息总监管理职责范本
2014/03/08 职场文书
环境建设实施方案
2014/03/14 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
详解NodeJS模块化
2021/06/15 NodeJs