当前位置: 代码迷 >> Web前端 >> jquery 漂亮的删除确认跟提交无刷新删除
  详细解决方案

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

热度:389   发布时间:2013-11-14 22:02:51.0
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

  相关解决方案