免费观看一区二区三区视频 ,成人免费AV网站,婷婷五月精品综合在线

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案

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

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

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

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

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

 
 
 
 
  
  
  
  //blockUI extend function  
  
  
  
  //以下三個(gè)方法在頁(yè)面調(diào)用時(shí)，給點(diǎn)按鈕或者文字添加onlick事件調(diào)用  
  
  
  
  //Confirm Delete or any other events  
  
  
  
  //1，該方法彈出帶有確認(rèn)與取消兩個(gè)按鈕的層，點(diǎn)擊確認(rèn)觸發(fā)clickEvent()方法  
  
  
  
  $.confirm = function(settings) {  
  
  
  
      var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

var msg = $("

" + settings.msg + "

class=\"standard-button\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"

style=\"margin-right:20px;\"/>");

htmlDom.append(msg);

msg.find('#confirmButton').click(settings.clickEvent);

$.blockUI({

message: htmlDom,

css: { width: "650px", height: "70px", "background-color": "#fff" }

});

pressEscOut();

}

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

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

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

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

 
 
 
 
  
  
  
  $.confirmWithRefresh = function(settings) {  
  
  
  
       var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

var msg = $("

width=\"100%\">"

+ settings.msg + "

id=\"confirmButton\" />

class=\"standard-button\" id=\"cancelButton\" value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();

\" style=\"margin-right:20px;\"/>");

htmlDom.append(msg);

msg.find('#confirmButton').click(settings.clickEvent);

$.blockUI({

message: htmlDom,

css: { width: "650px", height: "70px", "background-color": "#fff" }

});

pressEscOut();

}

//對(duì)于有些頁(yè)面關(guān)閉層時(shí)不需要刷新頁(yè)面，所以采用不同的關(guān)閉方式

$.confirmNoRefresh = function(settings) {

var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

var msg = $("

" + settings.msg + "

id=\"close\" class=\"standard-button\" id=\"cancelButton\" value=\"取消\"

onclick=\"javascript:closeBlockUINoFresh();\" style=\"margin-right:20px;\"/>");

htmlDom.append(msg);

msg.find('#confirmButton').click(settings.clickEvent);

$.blockUI({

message: htmlDom,

css: { width: "650px", height: "70px", "background-color": "#fff" }

});

pressEscOut();

}

 
 
 
 
  
  
  
  //彈出提示框  
  
  
  
  $.prompt = function(settings) {  
  
  
  
      var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

htmlDom.append("

" + settings.msg + "

onclick=\"javascript:closeBlockUINoFresh();\"/>");

$.blockUI({

message: htmlDom,

css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }

});

pressEscOut();

}

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

調(diào)用方法

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

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

 
 
 
 
  
  
  
  $.promptWithRefresh = function(settings) {  
  
  
  
       var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

htmlDom.append("

" + settings.msg + "

onclick=\"javascript:closeBlockUI();\" />");

$.blockUI({

message: htmlDom,

css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }

});

pressEscOut();

}

$.promptWithRefreshOverride = function(settings) {

var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

var msg = $("

" + settings.msg + "

");

htmlDom.append(msg);

msg.find('#Confirm').click(settings.clickEvent);

$.blockUI({

message: htmlDom,

css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }

});

pressEscOut();

}

//彈出提示框無(wú)刷新

$.promptNoRefresh = function(settings) {

var htmlDom = $("

");

htmlDom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });

htmlDom.append("

" + settings.msg + "

onclick=\"javascript:closeBlockUINoFresh();\" />");

$.blockUI({

message: htmlDom,

css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.baseZ }

});

pressEscOut();

}

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

 
 
 
 
  
  
  
  $.msgBox = function(settings) {  
  
  
  
       var tempScreen = (document.body.clientWidth - settings.width.replace("px", "")) / 2;  
  
  
  
       var htmlDom = $("

");

var msg = $("

style=\"vertical-align:top;width:100%\">

font-size:14px;padding-left:15px;padding-top:10px;padding-bottom:10px;background-color:#3777bc;

vertical-align:middle;color:#fff;font-weight:bold\">" + settings.title + "

background-color:#3777bc;vertical-align:middle;cursor:pointer;color:#fff;font-weight:bold\"

onclick=\"javascript:closeBlockUINoFresh();\">關(guān)閉

style=\"text-align:center;width:100%\">" + settings.dom + "

value=\"取消\" onclick=\"javascript:closeBlockUINoFresh();\"/>");

htmlDom.append(msg);

msg.parent().find('#confirmButton').click(settings.clickEvent);

$.blockUI({

message: htmlDom,

css: { width: settings.width, "background-color": "#fff", "z-index": settings.baseZ, left: tempScreen }

});

pressEscOut();

}

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

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

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

 
 
 
 
  
  
  
  var settings={   
  
  
  
  title:"添加用戶(hù)",          //標(biāo)題   
  
  
  
  width:"600px",   
  
  
  
  clickEvent:function(){  
  
  
  
   
  
  
  
     //do something   
  
  
  
  }  
  
  
  
  }   
  
  
  
  $.msgBox(settings);

 
 
 
 
  
  
  
  //該方法彈出添加或者修改的層，調(diào)用時(shí)需要傳一個(gè)DOM以及層的標(biāo)題。方法分別是formTitle(),appendTable()，
  
  
  
  且該方法有確認(rèn)與取消兩個(gè)按鈕，確認(rèn)按鈕事件需要在頁(yè)面js中重寫(xiě)方法是clickEvent()  
  
  
  
   $.msgBoxWithRefresh = function(settings) {  
  
  
  
       var tempScreen = (document.body.clientWidth - settings.width.replace("px", "")) / 2;  
  
  
  
       var htmlDom = $("

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

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

日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

新聞中心

其他資訊