jQuery Dialog 彈出層對話框插件

作者: caixw 發布時間: 2010-09-05 13:15 閱讀: 11537 次推薦: 0 原文鏈接 [收藏]

摘要：網上這種插件很多，但是沒一個合適的，大部分都做得很大，功能齊全。于是作者自己做了這個小插件，讀者可以順便學習下jQuery插件的寫法。

　　原理很簡單，通過JS動態構建一個div層，將其插入到body中，然后通過調整position的CSS屬性為absolute或fixed，使其脫離原來的文檔流的位置。再通過適當的加工美化就成了。

1 
2 <div class="dialog-overlay"></div>
3 
4 <div class="dialog">
5 <div class="bar">
6 <span class="title">標題</span>
7 <a class="close">[關閉]</a>
8 </div>
9 <div class="content">內容部分</div>
10 </div>

這就是兩個div層的結構，第一個背景遮蓋層只有在需要的時候才創建。每個div都定義了一個CSS類，這樣便于自定義其外觀。

一些基本功能的實現

移動框體

只要在mousemove事件中，計算兩次移動鼠標位置的差值，再加上被移動框的原始的top,left，就是對話框新的位置。mousemove事件只需要在鼠標按下標題欄的時候才需要觸發，所以只有在觸發標題欄的mousedown事件時才綁定mousemove事件，而鼠標釋放時也同時解除mousemove的綁定。

mousemove和解除綁定mousemove事件的mouseup卻沒有綁定到標題欄上，而是document上，之所以這樣，是因為有時鼠標移動過快時，會移出標題欄范圍，此時若是綁定到標題欄上的事件就會失效，而綁定到document就不會。

1 var mouse={x:0,y:0};
2 function moveDialog(event)
3 {
4 var e = window.event || event;
5 var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
6 var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
7 dialog.css({top:top,left:left});
8 mouse.x = e.clientX;
9 mouse.y = e.clientY;
10 };
11 dialog.find('.bar').mousedown(function(event){
12 var e = window.event || event;
13 mouse.x = e.clientX;
14 mouse.y = e.clientY;
15 $(document).bind('mousemove',moveDialog);
16 });
17 $(document).mouseup(function(event){
18 $(document).unbind('mousemove', moveDialog);
19 });

定位

居中定位很容易實現，IE下的clientWidth, offsetWidth等一系列屬性和其它瀏覽器好像有點不一樣，所以不要用這些屬性，可以直接用jQuery下的width()函數：

1 var left = ($(window).width() - dialog.width()) / 2;
2 var top = ($(window).height() - dialog.height()) / 2;
3 dialog.css({top:top,left:left});

IE6下并沒有fixed模式，但是能通過window.onscroll事件模擬實現：

1 // top 對話框到可視區域頂部位置的距離。
2 var top = parseInt(dialog.css('top')) - $(document).scrollTop();
3 var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
4 $(window).scroll(function(){
5 dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
6 });

z-index

為了能實現多個對話框并存，采用了一個靜態的zIndex變量，每次創建新對話框時，都實現一次自增操作，并將新值賦值給新創建的對話框的z-index，這樣就能保證最后創建的對話框總在最前面。

對外接口

　　插件通過以下的方式調用：

1 var dlg = new Dialog(content, options);
2 dlg.show();

　　當然如果只是一般的使用，可以更簡單一些：

1 new Dialog(content, options).show();
2 // 或是
3 dialog(content, options);

還可以通過以下四個函數，對插件進行進一步的控制：

show()：顯示對話框
hide()：隱藏對話框，但并不刪除對話框內的內容。
close()：關閉對話框，徹底刪除其內容。
setContent(content)：改變對話框內的內容。

構造函數的參數

構造函數有兩個參數。content和options。content表示對話框的內容；options表示對話框的各個配置選項。

content可以是一個字符串，表示顯示的內容。或是一個Object類型，若是Object類型，則需要包含以下兩個屬性：type和value。type表示數據類型，而value則是type對應的內容。type接受以下幾種類型：

id：顯示某一ID的內容，但并不包含此ID本身的內容。value對應為某一HTML元素的ID值。
img：顯示一張圖片。value對應為圖片的uri。
url：通過ajax方式顯示某一URL的內容，所以必需要在同一域名下。value為對應的URL地址。
iframe：將一URL指定的內容顯示到iframe中，它去除了AJAX調用的一些限制（相同域名，返回的HTML代碼中不能包含head頭等。）。value為對應的URL。

options則是對Dialog行為和外觀的具體設置：

名稱	描述	默認值
選項
title	標題欄的文本	標題
closeText	關閉按鈕文字	[關閉]
showTitle	是否顯示標題欄，若為否，則標題和關閉按鈕都將不顯示。	true
draggable	是否可以拖動框體。	true
modal	模態對話框，若為是，則不可操作背景層。	true
center	是否居中顯示，若為否，則通過CSS中的內容進行定位。	true
fixed	對話框是否跟隨滾動條移動。	true
time	自動關閉對話框時間，單位毫秒，若為0，表示不會自動關閉。	0
id	對話框的ID。若為false，則表示自動產生。	false
回調函數
名稱	描述	返回值類型
beforeShow	在顯示之前調用，若返回false，則不顯示對話框。	bool
afterShow	顯示之后調用。	無
beforeHide	在隱藏之前調用，若返回false，則不隱藏對話框。	bool
afterHide	隱藏之后調用。	無
beforeClose	在關閉之前調用，若返回false，則不關閉對話框。	bool
afterClose	關閉之后調用。	無

自定義CSS

插件為對話框的每一個部分都提供了一個CSS類名，很容易實現CSS的自定義：

類名	描述
.dialog-overlay	模態對話框時，的背景遮蓋層。
.dialog	對話框的CSS。
.dialog .bar	標題欄的CSS。包含了標題和關閉按鈕。
.dialog .bar .title	標題欄的標題部分。
.dialog .bar .close	標題欄的關閉按鈕部分。
.dialog .content	內容部分。