1. 程式人生 > >推薦一款好用的jquery彈出層外掛——wbox

推薦一款好用的jquery彈出層外掛——wbox

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!

               

閱讀原文:http://www.xuejiehome.com/blread-1621.html

 

在我們做專案的過程中難免會讓彈出層來展示一些資訊,這裡推薦一款比較不錯的jquery外掛,下面說一下特點和新版本增加的功能

    

wBox特點

  
    • 背景透明度可以根據實際情況進行調節
    •     
    • 可以根據需要新增wBox標題
    •     
    • 支援callback函式
    •     
    • 支援html內容自定義
    •     
    • 支援在wBox顯示#ID的內容
    •     
    • 支援Ajax頁面內容
    •     
    • 支援iFrame
    •     
    • 支援wBox拖拽功能
    •     
    • ESC鍵,或者在背景上雙擊即可關閉wBox
    •     
    • class為wBox_close點選可以關閉wBox,無論是組裝的html,還是隱藏的html,甚至於iframe的內容中的.wBox_close
    •    
    

新功能

  
  • 優化程式碼~
  •    
  • 美化介面~
  •    
  • 預設可拖動,drag為false關閉
  •    
  • 新增wBox關閉方法:wBox.close()
  •    
  • 新增wBox開啟方法:wBox.showBox()
  •    
  • 新增wBox定時關閉設定:通過引數timeout設定定時關閉時間
  •    
  • 新增在不觸發click事件的前提,顯示wBox,$(s).wBox({show:true})
  •    
  • 去除燈箱功能(準備做一個單獨的jQuery燈箱外掛)
  •    
  • 去除設定視窗位置
  •   

點選此處可以下載:下載wbox

  

使用方法:

  
  • 首先下載wBox檔案,然後在將wBox中的
  •    
  • 引入wbox.js檔案
  •    
  • 引入wbox.css檔案
  •   

程式碼:

      
var wBox=$("#wbox1").wBox({title: "Test Title Name",html: "<div class='demo'>點選彈出設定名字的wBox</div>"});顯示wBox,wBox.showBox()關閉使用wBox.close(),顯示使用wBox.showBox()
     
(1)點選彈出2背景為透明的wBox  
      
$("#wbox2").wBox({opacity:0,html:"<div class='demo'>點選彈出背景為透明的wBox</div>"});
     
(2)彈出5秒鐘自動關閉wBox  
      
$("#wbox3").wBox({target:"#info",timeout:5000});
     
(3)圖片wBox
      
$('.wboxImg').wBox({target:"004.jpg",requestType:"img"});
     
(4)隱藏id為#info的層 
      
$('.wbox').wBox({target:"#info"});
     
(5)不可拖拽的#wBoxUL層 
      
$('#drag').wBox({drag:false,title:'wBox功能簡介部分的層',target:"#info"});
     
(6)iframe google  
      
$("#isFrame").wBox({requestType:"iframe",iframeWH:{width:800,height:400},target:"http://google.com"}
     
(7)本地iframe 自適用高度
      
$("#isFrame2").wBox({    requestType: "iframe",    target:"500x400.html"});
     
(8)Ajax載入內容
      
$("#ajax").wBox({requestType: "ajax",target:"1.html"});
     
(9)沒有標題的彈出框
      
$("#noTitle").wBox({noTitle:true,html:"<div class='demo'>這是一個沒有標題的wBox,ESC鍵關閉,或者雙擊背景關閉</div>"});
     
(10)利用callback新增地圖的wBox
      
var maplet=null;oo=false;var callback=function(){maplet = new Maplet('myMap');maplet.centerAndZoom(new MPoint('HEUIDVZVVHUEEU'),8);maplet.addControl(new MStandardControl({view: {pan:false,ruler: false}})); }$("#map").wBox({title:'<span style="font-size:14px">普加地圖</span>--<span style="font-size:12px">可拖拽</span>',html:"<div id='myMap' style='width:500px;height:400px;'></div>",callBack:callback,drag:true});
     
   
    

具體的使用例子演示參看http://js8.in/wbox/,這上面說的非常詳細,這裡不細說,主要說下使用過程當中遇到的問題:

  

(1)模擬點選框內的按鈕

  

我需要彈出一個div,這個div是一個ajax請求,請求成功的時候我需要把當前框框關閉,並彈出一個框框。我採取的是模擬點選關閉按鈕,但是那個按鈕始終就是無法點選,我在這個地方糾結了好久,後來終於找到了答案,比如你的關閉按鈕id為#cancel_btn,你可能會以為你直接這樣就可以了

      
$('#cancel_add').click();
     

因為你的id是你命名的,你認為它肯定是唯一的,但實際上這樣是不行的,在它處理彈出框框的同時他好像是又重新生成了下這個div,也就是說當前頁面中其實是有2個cancel_add的,所以你如果用上面的程式碼是無法選擇到那個按鈕的。你需要用以下程式碼選擇到它:

      
$('#wBox #cancel_btn).click();
     

這樣就可以了。

  

獲取div內文字框id為content的值的時候我們需要這樣來獲取:

      
$('#wBox #content').val()
     

(2)關閉按鈕的效果不同

  

關閉的時候你可能會選擇一張圖片直接加個a連線,設定class為wBox_close,但在實際的運用過程當中我發現這樣的關閉效果會導致游標直接回到網頁頂部,也就說如果你的按鈕在最底部的話,猛的會跑到頂部,但是我不需要這個效果,我希望它還在原地,後來發現是因為沒有用div的緣故,仔細觀察你會發現預設給的那個關閉按鈕是這樣表示的:

      
<div class="wBox_close"></div>
     

這個直接關閉的話它還會停留在原來的位置的。於是我在a連線的外面加個div,把div的class設定為wBox_close,效果一樣了。

  

如有朋友還碰到其他的問題可以發上來討論下。

  

(3)效果展示

  

  

(4)對於如何獲取文字框內容

  

這個是對第(1)做出的一項補充,因為我後來發現在ie6、7下面,那樣是不行的,獲取文字框的值是undefind,就是說當彈出div的時候,他這個外掛其實是clone了當前要顯示的div,這就導致了頁面中存在兩個相同div(包括裡面的內容)的情況,所以當我們取值或要模擬點選的時候就無法精確的選擇到元素,這裡對原始碼進行了下改寫,在拷貝後把以前的那個div給清空,在關閉後再對其進行還原,這就防止了這種情況的發生。

  

1.在彈出的時候增加清空操作

  

找到

      
if (_this.YQ.target) {    con.replaceWith($(_this.YQ.target).clone(true).show());}
     

 

  

修改為:

      
if (_this.YQ.target) {
   var clone_html=$(_this.YQ.target).clone(true).show();   
$(_this.YQ.target).empty();//將其清空    con.replaceWith(clone_html);}
     

 2.在關閉的時候還原

  

找到

      
/* * 關閉彈出框就是移除還原 */this.close=function (){    if (C) {        B.remove();        C.stop().fadeOut(300, function(){            C.remove();        })    }}
     

修改為:

      
this.close=function (){    if (_this.YQ.target) {        $(_this.YQ.target).html(C.find(_this.YQ.target).html());    }    if (C) {        B.remove();        C.stop().fadeOut(300, function(){            C.remove();        })    }}
     

 

  

 我這裡只是以我需要的情況來修改程式碼,我是針對彈出div的情況進行改寫的,所以我選擇的是如果有target的情況改寫,如果有其他地方需要修改的,可以自行修改。當然我的方法可能不是最好的方法,歡迎大家指正。

  

(5)彈出的框跑到頂部現象

  

    我們會採用點選a連線彈出相應框,有時我們可能會用<a href="#"  onclick=...>這樣來彈出框,可能你不會注意,這裡href="#"會被認為是一個錨點,就跑到頁面的頂部了,我們使用<a  href="javascript:;" onclick=...>即可。

  

 這裡貼上我修改後的js程式碼

  

原始碼下載 

 
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>           

給我老師的人工智慧教程打call!http://blog.csdn.net/jiangjunshow

這裡寫圖片描述