jquery 漂亮的删除确认和提交无刷新删除示例_Javascript教程-查字典教程网
jquery 漂亮的删除确认和提交无刷新删除示例
jquery 漂亮的删除确认和提交无刷新删除示例
发布时间:2017-01-14 来源:查字典编辑
摘要:本例数据库结构很简单,就一个字段就行了jquery.confirm.js复制代码代码如下:(function($){$.confirm=fu...

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

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="#"+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>

<a href="#" >

<?php echo $row['text']?>

</a>

<div 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教程学习
    编程开发子分类