自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

jQuery實(shí)現(xiàn)仿人人網(wǎng)彈出層效果

作者：think_fish
開(kāi)發(fā) 前端
本來(lái)這個(gè)是在網(wǎng)上下載的一個(gè)彈出層的插件，但是感覺(jué)之前的效果很不好而且功能也少，也只能是彈出一個(gè)層然后顯示消息。因?yàn)轫?xiàng)目的需要我將這個(gè)插件進(jìn)行了拓展。感覺(jué)還行吧，所以拿出來(lái)分享一下。有興趣的可以繼續(xù)研究拓展哈。

有興趣的朋友可以從文章最頂部的鏈接下載js文件。下面的代碼是我所拓展的部分。在這分隔線之前基本上沒(méi)有多少改動(dòng)。

  1. 1 //---------------------------------------blockUI part end-----------------------------------  
  2.  2 //change blockUI default settings  
  3.  //change blockUI border  
  4.  $.blockUI.defaults.css.border = '5px solid #ccc';      //邊框樣式  
  5.  $.blockUI.defaults.css.cursor = 'default';                 //鼠標(biāo)樣式  
  6.  $.blockUI.defaults.css.top = '20%';                        //彈出層的位置  
  7.  $.blockUI.defaults.css.left = '30%';                          
  8.  $.blockUI.defaults.overlayCSS.cursor = 'default';  
  9.  //change fadeOut effact speed  
  10.  $.blockUI.defaults.fadeOut = 100;    //淡入淡出效果的速度  
  11.  $.blockUI.defaults.fadeIn = 100;  
  12.     

//上面這一部分主要功能是修改彈出層的默認(rèn)樣式

//----------==================================華麗的分割線================================---

  1. //blockUI extend function  
  2. //以下三個(gè)方法在頁(yè)面調(diào)用時(shí)，給點(diǎn)按鈕或者文字添加onlick事件調(diào)用  
  3. //Confirm Delete or any other events  
  4. //1，該方法彈出帶有確認(rèn)與取消兩個(gè)按鈕的層，點(diǎn)擊確認(rèn)觸發(fā)clickEvent()方法  
  5. $.confirm = function(settings) {  
  6.     var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  7.     htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });  
  8.     var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  9. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋體\">" + settings.msg + "</td>
  10. <td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"確認(rèn)\" id=\"confirmButton\" />
  11. </td><td style=\"padding-left:10px\"><input type=\"button\" id=\"close\" 
  12. class=\"standard-button\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\" 
  13.  style=\"margin-right:20px;\"/></td></tr></table>");  
  14.     htmlDom.append(msg);  
  15.     msg.find('#confirmButton').click(settings.clickEvent);  
  16.     $.blockUI({  
  17.         message: htmlDom,  
  18.         css: { width: "650px", height: "70px", "background-color": "#fff" }  
  19.     });  
  20.     pressEscOut();  
  21. }  
  22.    

jQuery

這個(gè)截圖就是上面的confrim()方法的效果。有一個(gè)確認(rèn)按鈕，然后有一個(gè)取消按鈕。

調(diào)用也很簡(jiǎn)單

  1. $(function(){  
  2.       var settings={  
  3.        msg:"確認(rèn)刪除選中的記錄?",  //要在彈出層上顯示的消息  
  4.        clickEvent:function(){  
  5.          //do something              此處是給確定按鈕綁定方法  
  6.       }}  
  7.       $.confirm(settings);         //此處調(diào)用方法，然后把上面的定義的settings對(duì)象做為參數(shù)傳入   
  8.  });   
  9.  

上面這個(gè)方法點(diǎn)擊取消或者確認(rèn)按鈕后頁(yè)面是無(wú)刷新的，但是有時(shí)候操作之后需要刷新頁(yè)面那就用下面這個(gè)方法，調(diào)用方法跟上面的一致，只是方法名變了而已。

  1. $.confirmWithRefresh = function(settings) {  
  2.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  3.      htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });  
  4.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" 
  5. width=\"100%\"><tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋體\">"
  6.  + settings.msg + "</td><td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"確認(rèn)\" 
  7. id=\"confirmButton\" /></td><td style=\"padding-left:10px\"><input type=\"button\" id=\"close\" 
  8. class=\"standard-button\" id=\"cancelButton\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();
  9. \" style=\"margin-right:20px;\"/></td></tr></table>");  
  10.      htmlDom.append(msg);  
  11.      msg.find('#confirmButton').click(settings.clickEvent);  
  12.      $.blockUI({  
  13.          message: htmlDom,  
  14.          css: { width: "650px", height: "70px", "background-color": "#fff" }  
  15.      });  
  16.      pressEscOut();  
  17.  }  
  18.  //對(duì)于有些頁(yè)面關(guān)閉層時(shí)不需要刷新頁(yè)面，所以采用不同的關(guān)閉方式  
  19.  $.confirmNoRefresh = function(settings) {  
  20.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  21.      htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });  
  22.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  23. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋體\">" + settings.msg + "</td>
  24. <td id=\"ConfirmTd\"><input type=\"button\"class=\"standard-button\" value=\"確認(rèn)\" id=\"confirmButton\" />
  25. </td><td style=\"padding-left:10px\"><input type=\"button\" 
  26. id=\"close\" class=\"standard-button\" id=\"cancelButton\" value=\"取消\" 
  27. onclick=\"javascript:closeBlockUINoFresh();\" style=\"margin-right:20px;\"/></td></tr></table>");  
  28.      htmlDom.append(msg);  
  29.      msg.find('#confirmButton').click(settings.clickEvent);  
  30.      $.blockUI({  
  31.          message: htmlDom,  
  32.          css: { width: "650px", height: "70px", "background-color": "#fff" }  
  33.      });  
  34.      pressEscOut();  
  35.  }   
  36.  
  1. //彈出提示框  
  2. $.prompt = function(settings) {  
  3.     var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  4.     htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });  
  5.     htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  6. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋體\">" + settings.msg + "</td>
  7. <td><input type=\"button\" id=\"Confirm\" value=\"確認(rèn)\" class=\"standard-button\" 
  8. onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");  
  9.     $.blockUI({  
  10.         message: htmlDom,  
  11.         css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }  
  12.     });  
  13.     pressEscOut();  
  14. }     

jQuery

上面的方法只是提示作用，顯示一個(gè)消息。這比alert()可好看多了吧

調(diào)用方法

$.prompt({msg:"刪除成功"});

下面的方法就是刷新頁(yè)面的了

  1. $.promptWithRefresh = function(settings) {  
  2.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  3.      htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });  
  4.      htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  5. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋體\">" + settings.msg + "</td>
  6. <td><input type=\"button\" id=\"Confirm\" value=\"確認(rèn)\" class=\"standard-button\" 
  7. onclick=\"javascript:closeBlockUI();\" /></td></tr></table>");  
  8.      $.blockUI({  
  9.          message: htmlDom,  
  10.          css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }  
  11.      });  
  12.      pressEscOut();  
  13.  }  
  14.  $.promptWithRefreshOverride = function(settings) {  
  15.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  16.      htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });  
  17.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  18. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋體\">" + settings.msg + "</td>
  19. <td><input type=\"button\" id=\"Confirm\" value=\"確認(rèn)\" class=\"standard-button\"/></td></tr></table>");  
  20.      htmlDom.append(msg);  
  21.      msg.find('#Confirm').click(settings.clickEvent);  
  22.      $.blockUI({  
  23.          message: htmlDom,  
  24.          css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }  
  25.      });  
  26.      pressEscOut();  
  27.  }  
  28.  //彈出提示框無(wú)刷新  
  29.  $.promptNoRefresh = function(settings) {  
  30.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  31.      htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });  
  32.      htmlDom.append("<table cellpadding=\"0\" cellspacing=\"0\" class=\"innderTable\" width=\"100%\">
  33. <tr><td width=\"80%\" style=\"text-align:left;padding-left:20px;font-family:宋體\">" + settings.msg + "</td>
  34. <td><input type=\"button\" id=\"Confirm\" value=\"確認(rèn)\" class=\"standard-button\" 
  35. onclick=\"javascript:closeBlockUINoFresh();\" /></td></tr></table>");  
  36.      $.blockUI({  
  37.          message: htmlDom,  
  38.          css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }  
  39.      });  
  40.      pressEscOut();  
  41.  } 

//該方法彈出添加或者修改的層，調(diào)用時(shí)需要傳一個(gè)DOM以及層的標(biāo)題。方法分別是formTitle(),appendTable()，且該方法有確認(rèn)與取消兩個(gè)按鈕，確認(rèn)按鈕事件需要在頁(yè)面js中重寫(xiě)方法是clickEvent()

  1. $.msgBox = function(settings) {  
  2.      var tempScreen = (document.body.clientWidth - settings.width.replace("px", "")) / 2;  
  3.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  4.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"innderTable\" 
  5. style=\"vertical-align:top;width:100%\"><tr><td width=\"80%\" style=\"text-align:left;font-family:宋體;
  6. font-size:14px;padding-left:15px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;
  7. vertical-align:middle;color:#fff;font-weight:bold\">" + settings.title + "</td>
  8. <td id=\"ConfirmTd\" style=\"text-align:right;padding-right:5px;padding-top:10px;padding-bottom:10px;
  9. background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\"
  10.  onclick=\"javascript:closeBlockUINoFresh();\">關(guān)閉</td></tr><tr><td colspan=\"2\"
  11.  style=\"text-align:center;width:100%\">" + settings.dom + "</td></tr>
  12. <tr><td colspan=\"2\" style=\"text-align:right;padding-right:10px;padding-bottom:10px;\">
  13. <input type=\"button\" class=\"standard-button\" id=\"confirmButton\" value=\"確認(rèn)\"/>&nbsp;&nbsp;
  14. <input type=\"button\" id=\"close\"class=\"standard-button\" 
  15. value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");  
  16.      htmlDom.append(msg);  
  17.      msg.parent().find('#confirmButton').click(settings.clickEvent);  
  18.      $.blockUI({  
  19.          message: htmlDom,  
  20.          css: { width: settings.width, "background-color": "#fff", "z-index": settings.baseZ, left: tempScreen }  
  21.      });  
  22.      pressEscOut();  
  23.  }  

這個(gè)方法就比較強(qiáng)大了，可以傳一個(gè)dom進(jìn)來(lái)。

jQuery

看著挺像人人網(wǎng)的彈出層吧，樣式確實(shí)是模仿的人人網(wǎng)的。

調(diào)用方法也還是先定義一個(gè)對(duì)象。給屬性賦值.屬性有哪些看看上面的代碼中settings.xxxx 這xxxxx就是屬性。還可以根據(jù)自己的需要去添加，或者減少。

  1. var settings={   
  2. title:"添加用戶",          //標(biāo)題   
  3. width:"600px",   
  4. clickEvent:function(){  
  5.  
  6.    //do something   
  7. }  
  8. }   
  9. $.msgBox(settings);  
  1. //該方法彈出添加或者修改的層，調(diào)用時(shí)需要傳一個(gè)DOM以及層的標(biāo)題。方法分別是formTitle(),appendTable()，
  2. 且該方法有確認(rèn)與取消兩個(gè)按鈕，確認(rèn)按鈕事件需要在頁(yè)面js中重寫(xiě)方法是clickEvent()  
  3.  $.msgBoxWithRefresh = function(settings) {  
  4.      var tempScreen = (document.body.clientWidth - settings.width.replace("px", "")) / 2;  
  5.      var htmlDom = $("<div id=\"displayPanle\" style=\"display:none;border:1px solid #005eac\"></div>");  
  6.      var msg = $("<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\"
  7.  class=\"innderTable\" style=\"vertical-align:top;width:100%\"><tr>
  8. <td width=\"80%\" style=\"text-align:left;font-family:宋體;
  9. font-size:14px;padding-left:15px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;
  10. vertical-align:middle;color:#fff;font-weight:bold\">" + settings.title + "</td>
  11. <td id=\"ConfirmTd\" style=\"text-align:right;padding-right:5px;padding-top:10px;padding-bottom:10px;
  12. background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\" 
  13. onclick=\"javascript:closeBlockUINoFresh();\">關(guān)閉</td></tr><tr><td colspan=\"2\" 
  14. style=\"text-align:center;width:100%\">" + settings.dom + "</td></tr><tr><td colspan=\"2\"
  15.  style=\"text-align:right;padding-right:10px;padding-bottom:10px;\">
  16. <input type=\"button\" class=\"standard-button\" id=\"confirmButton\" value=\"確認(rèn)\"/>&nbsp;&nbsp;
  17. <input type=\"button\" id=\"close\"class=\"standard-button\" value=\"取消\" 
  18. onclick=\"javascript:closeBlockUINoFresh();\"/></td></tr></table>");  
  19.      htmlDom.append(msg);  
  20.      msg.parent().find('#confirmButton').click(settings.clickEvent);  
  21.      $.blockUI({  
  22.          message: htmlDom,  
  23.          css: { width: settings.width, "background-color": "#fff", "z-index": settings.baseZ, left: tempScreen }  
  24.      });  
  25.      pressEscOut();  
  26.  }  
  27.  //關(guān)閉blcokUI，該方法為默認(rèn)方法，不需要變動(dòng)。  
  28.  function closeBlockUI() {  
  29.      $.unblockUI();  
  30.      location.reload();  
  31.      return false;  
  32.  }  
  33.  //關(guān)閉blockUI但不刷新頁(yè)面  
  34.  function closeBlockUINoFresh() {  
  35.      $.unblockUI();  
  36.  }  
  37.  function pressEscOut() {  
  38.      $("*").keypress(function(event) {  
  39.          var jianzhi = event.keyCode;  
  40.          var input_keydown = $(this);  
  41.          switch (jianzhi) {  
  42.              case 27:  
  43.                  closeBlockUINoFresh();  
  44.                  break;  
  45.          }  
  46.      });  
  47.  }    
  48.    
  49.  

注明一下哈：雖然原本的插件不是本人原創(chuàng)，但拓展方法本人確實(shí)花了些心思。

原文鏈接：http://www.cnblogs.com/think_fish/archive/2011/03/30/1999506.html

【編輯推薦】

  1. 27個(gè)新鮮驚奇的jQuery插件與教程
  2. 手把手教你用jQuery做動(dòng)畫(huà)插件
  3. PHP+MySQL+jQuery實(shí)現(xiàn)隨意拖動(dòng)層
  4. jQuery拖動(dòng)布局實(shí)現(xiàn)排序結(jié)果同步數(shù)據(jù)庫(kù)
  5. jQuery給力插件大閱兵
責(zé)任編輯：陳貽新 來(lái)源： 博客園
jQueryJavaScript
相關(guān)推薦

2010-09-07 09:30:25

DIV彈出jQuery

2015-03-24 13:10:49

javascript中關(guān)村論壇提示效果

2010-08-30 10:09:07

JavaScriptDIV

2015-07-23 15:15:06

動(dòng)態(tài)彈出

2012-06-07 15:14:52

jQuery

2009-06-26 16:12:08

ThickboxjQuery

2011-04-15 09:29:20

jQueryFlash

2022-09-21 14:51:21

ArkUI信件彈出

2010-10-09 11:09:32

JavaScript彈

2011-12-08 14:09:07

2011-12-13 14:15:30

2011-12-08 16:18:40

2011-12-13 13:54:42

2015-02-02 16:42:49

特效密碼鎖

2013-09-03 10:10:00

人人網(wǎng)移動(dòng)開(kāi)發(fā)架構(gòu)

2013-09-03 10:22:02

人人網(wǎng)移動(dòng)開(kāi)發(fā)架構(gòu)

2013-01-05 14:51:34

JavaScriptjQuery面試

2009-09-23 17:19:19

jQuery頁(yè)面漸顯效

2011-03-23 10:55:55

PHPMySQLjQuery

2011-10-31 17:29:27

人人網(wǎng)客戶端照片
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)