jQuery中點選刪除,顯示是否要刪除
在實際應用中,經常會看到這樣的功能,當你點選要刪除某個專案的會彈出一個提示框,點選確定以後才能夠將指定的專案刪除,這當然是為了防止使用者誤操作,下面就通過程式碼例項介紹一下如何利用jquery實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ font-size:13px; } .divShow{ line-height:32px; height:32px; width:280px; background-color:#eee; padding-left:10px; } .divShow span{ padding-left:50px; } .dialog{ width:360px; border:solid 5px #666; position:absolute; display:none; z-index:101; } .dialog .title{ background-color:#fbaf15; padding:10px; color:#fff; font-weight:bold; } .dialog .title span{ float:right; color:red; font-size:20px; cursor:pointer; } .dialog .content{ background-color:#fff; padding:25px; height:60px; } .dialog .content img{ float:left; } .dialog .content span{ float:left; padding-top:10px; padding-left:10px; } .dialog .bottom{ text-align:right; padding:10px 10px 10px 0px; background-color:#eee; } .mask{ width:100%; height:100%; background-color:#000; position:absolute; top:0px; left:0px; opacity:0.3; filter:alpha(opacity=30); z-index:100; display:none; } .btn { border:solid 1px #666; padding:2px; width:65px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function () { $("#Button1").click(function () { $(".mask").show(); showDialog(); $(".dialog").show(); }); function showDialog(){ var objW = $(window); var objC = $(".dialog"); var brsW = objW.width(); var brsH = objW.height(); var sclL = objW.scrollLeft(); var sclT = objW.scrollTop(); var cruW = objC.width(); var cruH = objC.height(); var left = sclL + (brsW - cruW) / 2; var top = sclT + (brsH - cruH) / 2; objC.css({ "left": left, "top": top }); } $(window).resize(function () { if (!$(".dialog").is(":visible")) { return; } showDialog(); }); $(".title span").click(function () { $(".dialog").hide(); $(".mask").hide(); }); $("#Button3").click(function () { $(".dialog").hide(); $(".mask").hide(); }); $("#Button2").click(function () { $(".dialog").hide(); $(".mask").hide(); if ($("input:checked").length != 0) { $(".divShow").remove(); } }); }); </script> </head> <body> <div class="divShow"> <input type="checkbox" id="Checkbox" /> <a href="#">螞蟻部落歡迎您,softwhy,com</a> <span> <input type="button" id="Button1" class="btn" value="刪除"/> </span> </div> <div class="mask"></div> <div class="dialog"> <div class="title"><span>x</span>刪除時提示 </div> <div class="content"><span>您真的要刪除該記錄嗎?</span> </div> <div class="bottom"> <input type="button" id="Button2" value="確定" class="btn" /> <input type="button" id="Button3" value="取消" class="btn" /> </div> </div> </body> </html>
上面的程式碼實現了我們的要求,點選刪除可以彈出一個提示對話方塊,點選確定後才能夠刪除指定的內容。
一.程式碼註釋:
1.$(function () { }),文件結構完全載入完畢再去執行函式中的程式碼。
2.$("#Button1").click(function () {}),為刪除按鈕註冊click事件處理函式。
3.$(".mask").show(),顯示半透明這招曾。4.showDialog(),設定提示對話方塊的位置。
5.$(".dialog").show(),顯示對話方塊的位置。
6.function showDialog(){},此函式用來設定提示對話方塊的位置。
7.var objW = $(window),獲取window物件。
8.var objC = $(".dialog"),獲取class屬性值為dialog的元素物件,這裡就是提示對話方塊。
9.var brsW = objW.width(),獲取window的寬度。
10.var brsH = objW.height(),獲取window的高度。
11.var sclL = objW.scrollLeft(),獲取向左滾動的距離。
12.var sclT = objW.scrollTop(),獲取向上滾動的距離。
13.var cruW = objC.width(),獲取對話方塊的寬度。
14.var cruH = objC.height(),獲取對話方塊的高度。
15.var left = sclL + (brsW - cruW) / 2,計算對話方塊居中時的左邊距
16.var top = sclT + (brsH - cruH) / 2,計算對話方塊居中時上邊距
17.objC.css({ "left": left, "top": top }),設定對話方塊的位置。
18.$(window).resize(function () {}),為window註冊resize事件處理函式,也就是當調整視窗大小時觸發。
19.if (!$(".dialog").is(":visible")) {return;},如果提示框沒有顯示,則直接返回。20.showDialog(),重新計算和設定提示框的位置。
二.相關閱讀:
1.show()可以參閱jQuery show()一章節。
2.scrollLeft()可以參閱jQuery scrollLeft()一章節。
3.scrollTop()可以參閱jQuery scrollTop()一章節。
4.css()可以參閱jQuery css()一章節。
5.resize事件可以參閱jQuery resize 事件一章節。
6.is()可以參閱jQuery is()一章節。
7.:visible可以參閱jQuery :visible一章節。
8.:checked可以參閱jQuery :checked一章節。
9.remove()可以參閱jQuery remove()一章節。
相關文章
- 點選刪除彈出提示是否刪除程式碼
- 點選刪除按鈕彈出是否刪除提示框
- jQuery點選按鈕刪除div元素jQuery
- jQuery如何刪除元素節點jQuery
- jQuery刪除元素jQuery
- jQuery 刪除元素jQuery
- c#樹控制元件treeview_新增treenode節點_選中顯示_刪除C#控制元件View
- 點選刪除按鈕刪除當前行程式碼例項行程
- 利用jQuery如何刪除一個節點jQuery
- iOS 多選刪除(附tableViewTips及單選刪除)iOSView
- js確認是否刪除。JS
- jQuery 新增和刪除classjQuery
- jQuery刪除指定子元素jQuery
- jQuery刪除指定li元素jQuery
- 點選退格鍵刪除整個單詞而不是逐個字元刪除字元
- 刪除資料夾時顯示在另一程式開啟怎麼刪除
- JavaScript點選新增行或者刪除行JavaScript
- JavaScript點選按鈕刪除div元素JavaScript
- Win10系統刪除檔案如何設定不顯示刪除確認提醒Win10
- linux環境變數顯示、新增、刪除Linux變數
- 使用JQuery刪除Table中的合併行jQuery
- jQuery 刪除當前li元素jQuery
- jquery實現增加刪除行jQuery
- jquery table 的新增和刪除jQuery
- 【RAC】刪除RAC資料庫節點(二)——刪除ASM資料庫ASM
- 【RAC】刪除RAC資料庫節點(五)——刪除ONS資料庫
- 點選新增或者刪除表格行詳解
- 點選刪除表格行程式碼例項行程
- JavaScript--全選、全不選、反選、無重新整理刪除、批量刪除、即點即改入庫(在yii框架中操作)JavaScript框架
- win10 刪除登入介面的賬號要怎麼刪除Win10
- jquery select下拉選單新增或者刪除option項jQuery
- jquery實現的全選和刪除功能外掛jQuery
- jQuery刪除select下拉選單中所有option項jQuery
- js中dom節點刪除remove方法JSREM
- 【RAC】刪除RAC資料庫節點(三)——刪除監聽資料庫
- 刪除Kafka中topicKafka
- 做實驗驗證MongoDB刪除文件後索引是否會自動刪除MongoDB索引
- JavaScript刪除節點自身JavaScript