jquery 漂亮的刪除確認(rèn)和提交無刷新刪除示例
更新時(shí)間：2013年11月13日 16:33:54 作者：
jquery 漂亮的刪除確認(rèn)和提交無刷新刪除,本例數(shù)據(jù)庫結(jié)構(gòu)很簡單，就一個(gè)字段就行了，具體的實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下
本例數(shù)據(jù)庫結(jié)構(gòu)很簡單，就一個(gè)字段就行了
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' : '您確認(rèn)刪除該記錄? <br />刪除后無法恢復(fù)記錄.',
'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);
?>
jquery.confirm.js
復(fù)制代碼 代碼如下:
(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
復(fù)制代碼 代碼如下:
<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
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
var id=$(this).attr('id');
$.confirm({
'title' : '刪除該記錄?',
'message' : '您確認(rèn)刪除該記錄? <br />刪除后無法恢復(fù)記錄.',
'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
復(fù)制代碼 代碼如下:
<?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);
?>
相關(guān)文章
formStorage 基于jquery的一個(gè)插件(存儲(chǔ)表單中元素的狀態(tài)到本地)
原理很簡單,通過本地存儲(chǔ)機(jī)制(userData或者localStorage),存儲(chǔ)表單中元素的狀態(tài)到本地. 需要時(shí)可以把所存儲(chǔ)的狀態(tài)還原到表單元素上2012-01-01
jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jQuery對象做進(jìn)一步選擇;記下來將詳細(xì)介紹下篩選器children()感興趣的你可不要錯(cuò)過了哈，或許本文的知識(shí)點(diǎn)對你有所幫助2013-02-02
解決3.01版的jquery.form.js中文亂碼問題的解決方法
最近用到了jquery的一個(gè)fom插件，是一個(gè)全面支持表單的jQuery插件。昨天在用ajaxSubmit進(jìn)行Form Post提交的時(shí)候，發(fā)現(xiàn)服務(wù)器端取回的中文數(shù)據(jù)居然是亂碼。這個(gè)可能是因?yàn)閖query是utf-8，不支持gb23122012-03-03
jQueryMobile之Helloworld與頁面切換的方法
這篇文章主要介紹了jQueryMobile之Helloworld與頁面切換的方法,實(shí)例分析了jQueryMobile的基礎(chǔ)用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
Jquery動(dòng)態(tài)列功能完整實(shí)例
這篇文章主要介紹了Jquery動(dòng)態(tài)列功能,結(jié)合完整實(shí)例形式詳細(xì)分析了jQuery基于事件響應(yīng)及頁面元素動(dòng)態(tài)屬性操作實(shí)現(xiàn)的動(dòng)態(tài)列顯示功能相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
這篇文章主要介紹了JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果，需要的朋友可以參考下2015-09-09
下面小編就為大家?guī)硪黄猨Query操作屬性和樣式詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-04-04
jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動(dòng)效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)網(wǎng)頁的頁面平滑滾動(dòng)效果代碼,涉及jQuery結(jié)合鼠標(biāo)事件操作頁面元素滾動(dòng)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
關(guān)于hashchangebroker和statehashable的補(bǔ)充文檔
我覺得之前寫的兩篇隨筆有點(diǎn)不負(fù)責(zé)任，完全沒寫明白，補(bǔ)充了一份文檔（權(quán)且算是文檔吧=.=）2011-08-08
Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例代碼
這篇文章介紹了Jquery倒數(shù)計(jì)時(shí)按鈕setTimeout的實(shí)例，有需要的朋友可以參考一下2013-07-07