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中的几个运算符
Jun 29 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
jQuery中extend函数详解
Jul 13 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
详解Typescript里的This的使用方法
Jan 08 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/06/24 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
PHP读取Excel类文件
2017/05/15 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
nodejs基础之常用工具模块util用法分析
2018/12/26 NodeJs
JavaScript实现连连看连线算法
2019/01/05 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
vue 函数调用加括号与不加括号的区别
2020/10/29 Javascript
Python易忽视知识点小结
2015/05/25 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python爬虫 正则表达式解析
2019/09/28 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
信用社实习人员自我鉴定
2013/09/20 职场文书
交通事故调解协议书
2014/04/16 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
聚会通知怎么写
2015/04/23 职场文书
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
Pytest中skip skipif跳过用例详解
2021/06/30 Python