首页>>表单>>jquery 漂亮的删除确认和提交无刷新删除(2013-10-29)

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

 本例数据库结构很简单，就一个字段就行了

 

jquery 漂亮的删除确认和提交无刷新删除
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

jquery.confirm.js
JavaScript Code
  1. (function($){  
  2.       
  3.     $.confirm = function(params){  
  4.           
  5.         if($('#confirmOverlay').length){  
  6.             // A confirm is already shown on the page:  
  7.             return false;  
  8.         }  
  9.           
  10.         var buttonHTML = '';  
  11.         $.each(params.buttons,function(name,obj){  
  12.               
  13.             // Generating the markup for the buttons:  
  14.               
  15.             buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';  
  16.               
  17.             if(!obj.action){  
  18.                 obj.action = function(){};  
  19.             }  
  20.         });  
  21.           
  22.         var markup = [  
  23.             '<div id="confirmOverlay">',  
  24.             '<div id="confirmBox">',  
  25.             '<h1>',params.title,'</h1>',  
  26.             '<p>',params.message,'</p>',  
  27.             '<div id="confirmButtons">',  
  28.             buttonHTML,  
  29.             '</div></div></div>'  
  30.         ].join('');  
  31.           
  32.         $(markup).hide().appendTo('body').fadeIn();  
  33.           
  34.         var buttons = $('#confirmBox .button'),  
  35.             i = 0;  
  36.   
  37.         $.each(params.buttons,function(name,obj){  
  38.             buttons.eq(i++).click(function(){  
  39.                   
  40.                 // Calling the action attribute when a  
  41.                 // click occurs, and hiding the confirm.  
  42.                   
  43.                 obj.action();  
  44.                 $.confirm.hide();  
  45.                 return false;  
  46.             });  
  47.         });  
  48.     }  
  49.   
  50.     $.confirm.hide = function(){  
  51.         $('#confirmOverlay').fadeOut(function(){  
  52.             $(this).remove();  
  53.         });  
  54.     }  
  55.       
  56. })(jQuery);  

 

PHP Code
  1. <div id="page">  
  2.   
  3.     <?php  
  4.     require "conn.php";  
  5.   
  6.     $sql="select * from `add_delete_record` where id>0";  
  7.     $rs=mysql_query($sql);  
  8.     if ($row = mysql_fetch_array($rs))  
  9.     {  
  10.         do {  
  11.     ?>  
  12.           
  13.         <div class="item">  
  14.             <a href="#" >  
  15.                 <?php echo $row['text']?>  
  16.             </a>  
  17.             <div class="delete" id="<?php echo $row['id']?>"></div>  
  18.         </div>  
  19.     <?php   
  20.         }  
  21.           
  22.         while ($row = mysql_fetch_array($rs));  
  23.     }?>  
  24. </div>  

 

JavaScript Code
  1. $(document).ready(function(){  
  2.       
  3.     $('.item .delete').click(function(){  
  4.           
  5.         var elem = $(this).closest('.item');  
  6.         var id=$(this).attr('id');  
  7.         $.confirm({  
  8.             'title'     : '删除该记录?',  
  9.             'message'   : '您确认删除该记录? <br />删除后无法恢复记录.',  
  10.             'buttons'   : {  
  11.                 'Yes'   : {  
  12.                     'class' : 'blue',  
  13.                     'action': function(){$.ajax({  
  14.                                           type: 'GET',  
  15.                                           url: 'del.php',  
  16.                                           data: 'id='+id,  
  17.                                         });  
  18.                         elem.slideUp();  
  19.                     }  
  20.                 },  
  21.                 'No'    : {  
  22.                     'class' : 'gray',  
  23.                     'action': function(){}  // Nothing to do in this case. You can as well omit the action property.  
  24.                 }  
  25.             }  
  26.         });  
  27.           
  28.     });  
  29.       
  30. });  

del.php

 

PHP Code
  1. <?php  
  2. require "conn.php";  
  3. $id=$_GET['id'];  
  4. $delete_small_sql = "delete from add_delete_record where id='$id'";  
  5. $result_small = mysql_query($delete_small_sql);  
  6. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_85.html