jQuery Dialog 彈出層對話框插件
更新時間:2010年08月09日 21:16:04 作者:
網(wǎng)上這種插件很多,但是沒一個合適的,大部分都做得很大,功能齊全。于是自己做了這個小插件,順便學(xué)習(xí)下jQuery插件的寫法。
原理很簡單,通過JS動態(tài)構(gòu)建一個div層,將其插入到body中,然后通過調(diào)整position的CSS屬性為absolute或fixed,使其脫離原來的文檔流的位置。再通過適當(dāng)?shù)募庸っ阑统闪恕?
<!-- 背景遮蓋層 -->
<div class="dialog-overlay"></div>
<!-- 對話框 -->
<div class="dialog">
<div class="bar">
<span class="title">標(biāo)題</span>
<a class="close">[關(guān)閉]</a>
</div>
<div class="content">內(nèi)容部分</div>
</div>
這就是兩個div層的結(jié)構(gòu),第一個背景遮蓋層只有在需要的時候才創(chuàng)建。每個div都定義了一個CSS類,這樣便于自定義其外觀。
一些基本功能的實(shí)現(xiàn)
移動框體
只要在mousemove事件中,計(jì)算兩次移動鼠標(biāo)位置的差值,再加上被移動框的原始的top,left,就是對話框新的位置。mousemove事件只需要在鼠標(biāo)按下標(biāo)題欄的時候才需要觸發(fā),所以只有在觸發(fā)標(biāo)題欄的mousedown事件時才綁定mousemove事件,而鼠標(biāo)釋放時也同時解除mousemove的綁定。
mousemove和解除綁定mousemove事件的mouseup卻沒有綁定到標(biāo)題欄上,而是document上,之所以這樣,是因?yàn)橛袝r鼠標(biāo)移動過快時,會移出標(biāo)題欄范圍,此時若是綁定到標(biāo)題欄上的事件就會失效,而綁定到document就不會。
var mouse={x:0,y:0};
function moveDialog(event)
{
var e = window.event || event;
var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
dialog.css({top:top,left:left});
mouse.x = e.clientX;
mouse.y = e.clientY;
};
dialog.find('.bar').mousedown(function(event){
var e = window.event || event;
mouse.x = e.clientX;
mouse.y = e.clientY;
$(document).bind('mousemove',moveDialog);
});
$(document).mouseup(function(event){
$(document).unbind('mousemove', moveDialog);
});
定位
居中定位很容易實(shí)現(xiàn),IE下的clientWidth, offsetWidth等一系列屬性和其它瀏覽器好像有點(diǎn)不一樣,所以不要用這些屬性,可以直接用jQuery下的width()函數(shù):
var left = ($(window).width() - dialog.width()) / 2;
var top = ($(window).height() - dialog.height()) / 2;
dialog.css({top:top,left:left});IE6下并沒有fixed模式,但是能通過window.onscroll事件模擬實(shí)現(xiàn):
// top 對話框到可視區(qū)域頂部位置的距離。
var top = parseInt(dialog.css('top')) - $(document).scrollTop();
var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
$(window).scroll(function(){
dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
});
z-index
為了能實(shí)現(xiàn)多個對話框并存,采用了一個靜態(tài)的zIndex變量,每次創(chuàng)建新對話框時,都實(shí)現(xiàn)一次自增操作,并將新值賦值給新創(chuàng)建的對話框的z-index,這樣就能保證最后創(chuàng)建的對話框總在最前面。
對外接口
插件通過以下的方式調(diào)用:
var dlg = new Dialog(content, options);
dlg.show();當(dāng)然如果只是一般的使用,可以更簡單一些:
new Dialog(content, options).show();
// 或是
dialog(content, options);還可以通過以下四個函數(shù),對插件進(jìn)行進(jìn)一步的控制:
show():顯示對話框
hide():隱藏對話框,但并不刪除對話框內(nèi)的內(nèi)容。
close():關(guān)閉對話框,徹底刪除其內(nèi)容。
setContent(content):改變對話框內(nèi)的內(nèi)容。
構(gòu)造函數(shù)的參數(shù)
構(gòu)造函數(shù)有兩個參數(shù)。content和options。content表示對話框的內(nèi)容;options表示對話框的各個配置選項(xiàng)。
content可以是一個字符串,表示顯示的內(nèi)容?;蚴且粋€Object類型,若是Object類型,則需要包含以下兩個屬性:type和value。type表示數(shù)據(jù)類型,而value則是type對應(yīng)的內(nèi)容。type接受以下幾種類型:
id:顯示某一ID的內(nèi)容,但并不包含此ID本身的內(nèi)容。value對應(yīng)為某一HTML元素的ID值。
img:顯示一張圖片。value對應(yīng)為圖片的uri。
url:通過ajax方式顯示某一URL的內(nèi)容,所以必需要在同一域名下。value為對應(yīng)的URL地址。
iframe:將一URL指定的內(nèi)容顯示到iframe中,它去除了AJAX調(diào)用的一些限制(相同域名,返回的HTML代碼中不能包含head頭等。)。value為對應(yīng)的URL。
options則是對Dialog行為和外觀的具體設(shè)置:
/* 只修改id為#dialog的對話框。 */
#dialog1 .bar
{
text-transform:lowercase;
}
// 通過id屬性指定對話框的id。
new Dialog('text',{id:'dialog1'});
在線演示代碼
代碼打包下載
復(fù)制代碼 代碼如下:
<!-- 背景遮蓋層 -->
<div class="dialog-overlay"></div>
<!-- 對話框 -->
<div class="dialog">
<div class="bar">
<span class="title">標(biāo)題</span>
<a class="close">[關(guān)閉]</a>
</div>
<div class="content">內(nèi)容部分</div>
</div>
這就是兩個div層的結(jié)構(gòu),第一個背景遮蓋層只有在需要的時候才創(chuàng)建。每個div都定義了一個CSS類,這樣便于自定義其外觀。
一些基本功能的實(shí)現(xiàn)
移動框體
只要在mousemove事件中,計(jì)算兩次移動鼠標(biāo)位置的差值,再加上被移動框的原始的top,left,就是對話框新的位置。mousemove事件只需要在鼠標(biāo)按下標(biāo)題欄的時候才需要觸發(fā),所以只有在觸發(fā)標(biāo)題欄的mousedown事件時才綁定mousemove事件,而鼠標(biāo)釋放時也同時解除mousemove的綁定。
mousemove和解除綁定mousemove事件的mouseup卻沒有綁定到標(biāo)題欄上,而是document上,之所以這樣,是因?yàn)橛袝r鼠標(biāo)移動過快時,會移出標(biāo)題欄范圍,此時若是綁定到標(biāo)題欄上的事件就會失效,而綁定到document就不會。
復(fù)制代碼 代碼如下:
var mouse={x:0,y:0};
function moveDialog(event)
{
var e = window.event || event;
var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y);
var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x);
dialog.css({top:top,left:left});
mouse.x = e.clientX;
mouse.y = e.clientY;
};
dialog.find('.bar').mousedown(function(event){
var e = window.event || event;
mouse.x = e.clientX;
mouse.y = e.clientY;
$(document).bind('mousemove',moveDialog);
});
$(document).mouseup(function(event){
$(document).unbind('mousemove', moveDialog);
});
定位
居中定位很容易實(shí)現(xiàn),IE下的clientWidth, offsetWidth等一系列屬性和其它瀏覽器好像有點(diǎn)不一樣,所以不要用這些屬性,可以直接用jQuery下的width()函數(shù):
復(fù)制代碼 代碼如下:
var left = ($(window).width() - dialog.width()) / 2;
var top = ($(window).height() - dialog.height()) / 2;
dialog.css({top:top,left:left});IE6下并沒有fixed模式,但是能通過window.onscroll事件模擬實(shí)現(xiàn):
// top 對話框到可視區(qū)域頂部位置的距離。
var top = parseInt(dialog.css('top')) - $(document).scrollTop();
var left = parseInt(dialog.css('left')) - $(document).scrollLeft();
$(window).scroll(function(){
dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left});
});
z-index
為了能實(shí)現(xiàn)多個對話框并存,采用了一個靜態(tài)的zIndex變量,每次創(chuàng)建新對話框時,都實(shí)現(xiàn)一次自增操作,并將新值賦值給新創(chuàng)建的對話框的z-index,這樣就能保證最后創(chuàng)建的對話框總在最前面。
對外接口
插件通過以下的方式調(diào)用:
復(fù)制代碼 代碼如下:
var dlg = new Dialog(content, options);
dlg.show();當(dāng)然如果只是一般的使用,可以更簡單一些:
new Dialog(content, options).show();
// 或是
dialog(content, options);還可以通過以下四個函數(shù),對插件進(jìn)行進(jìn)一步的控制:
show():顯示對話框
hide():隱藏對話框,但并不刪除對話框內(nèi)的內(nèi)容。
close():關(guān)閉對話框,徹底刪除其內(nèi)容。
setContent(content):改變對話框內(nèi)的內(nèi)容。
構(gòu)造函數(shù)的參數(shù)
構(gòu)造函數(shù)有兩個參數(shù)。content和options。content表示對話框的內(nèi)容;options表示對話框的各個配置選項(xiàng)。
content可以是一個字符串,表示顯示的內(nèi)容?;蚴且粋€Object類型,若是Object類型,則需要包含以下兩個屬性:type和value。type表示數(shù)據(jù)類型,而value則是type對應(yīng)的內(nèi)容。type接受以下幾種類型:
id:顯示某一ID的內(nèi)容,但并不包含此ID本身的內(nèi)容。value對應(yīng)為某一HTML元素的ID值。
img:顯示一張圖片。value對應(yīng)為圖片的uri。
url:通過ajax方式顯示某一URL的內(nèi)容,所以必需要在同一域名下。value為對應(yīng)的URL地址。
iframe:將一URL指定的內(nèi)容顯示到iframe中,它去除了AJAX調(diào)用的一些限制(相同域名,返回的HTML代碼中不能包含head頭等。)。value為對應(yīng)的URL。
options則是對Dialog行為和外觀的具體設(shè)置:
選項(xiàng) | ||
名稱 | 描述 | 默認(rèn)值 |
---|---|---|
title | 標(biāo)題欄的文本 | 標(biāo)題 |
closeText | 關(guān)閉按鈕文字 | [關(guān)閉] |
showTitle | 是否顯示標(biāo)題欄,若為否,則標(biāo)題和關(guān)閉按鈕都將不顯示。 | true |
draggable | 是否可以拖動框體。 | true |
modal | 模態(tài)對話框,若為是,則不可操作背景層。 | true |
center | 是否居中顯示,若為否,則通過CSS中的內(nèi)容進(jìn)行定位。 | true |
fixed | 對話框是否跟隨滾動條移動。 | true |
time | 自動關(guān)閉對話框時間,單位毫秒,若為0,表示不會自動關(guān)閉。 | 0 |
id | 對話框的ID。若為false,則表示自動產(chǎn)生。 | false |
回調(diào)函數(shù) | ||
名稱 | 描述 | 返回值類型 |
beforeShow | 在顯示之前調(diào)用,若返回false,則不顯示對話框。 | bool |
afterShow | 顯示之后調(diào)用。 | 無 |
beforeHide | 在隱藏之前調(diào)用,若返回false,則不隱藏對話框。 | bool |
afterHide | 隱藏之后調(diào)用。 | 無 |
beforeClose | 在關(guān)閉之前調(diào)用,若返回false,則不關(guān)閉對話框。 | bool |
afterClose | 關(guān)閉之后調(diào)用。 | 無 |
自定義CSS
插件為對話框的每一個部分都提供了一個CSS類名,很容易實(shí)現(xiàn)CSS的自定義:
類名 | 描述 |
---|---|
.dialog-overlay | 模態(tài)對話框時,的背景遮蓋層。 |
.dialog | 對話框的CSS。 |
.dialog .bar | 標(biāo)題欄的CSS。包含了標(biāo)題和關(guān)閉按鈕。 |
.dialog .bar .title | 標(biāo)題欄的標(biāo)題部分。 |
.dialog .bar .close | 標(biāo)題欄的關(guān)閉按鈕部分。 |
.dialog .content | 內(nèi)容部分。 |
你可以直接修改這些CSS類,進(jìn)行全局的修改,也可以通過id加類名的方式修改某一個對話框。
復(fù)制代碼 代碼如下:
/* 只修改id為#dialog的對話框。 */
#dialog1 .bar
{
text-transform:lowercase;
}
// 通過id屬性指定對話框的id。
new Dialog('text',{id:'dialog1'});
在線演示代碼
代碼打包下載
您可能感興趣的文章:
- jQuery+CSS3+Html5實(shí)現(xiàn)彈出層效果實(shí)例代碼(附源碼下載)
- Jquery+CSS3實(shí)現(xiàn)一款簡潔大氣帶滑動效果的彈出層
- jQuery彈出層始終垂直居中相對于屏幕或當(dāng)前窗口
- jquery實(shí)現(xiàn)居中彈出層代碼
- JQuery彈出層示例可自定義
- jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- JQUERY THICKBOX彈出層插件
- jQuery Mobile彈出窗、彈出層知識匯總
- jQuery點(diǎn)縮略圖彈出層顯示大圖片
- jQuery Layer彈出層傳值到父頁面的實(shí)現(xiàn)代碼
- jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果示例
相關(guān)文章
jQuery使用zTree插件實(shí)現(xiàn)樹形菜單和異步加載
這篇文章主要介紹了jQuery使用zTree插件實(shí)現(xiàn)樹形菜單和異步加載的相關(guān)方法,感興趣的小伙伴們可以參考一下2016-02-02jQuery遍歷DOM元素與節(jié)點(diǎn)方法詳解
這篇文章主要介紹了jQuery遍歷DOM元素與節(jié)點(diǎn)方法,結(jié)合實(shí)例形似詳細(xì)分析了jQuery遍歷DOM父級節(jié)點(diǎn),子級節(jié)點(diǎn)及兄弟節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2016-04-04jQuery第一次運(yùn)行頁面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
下面小編就為大家分享一篇jQuery第一次運(yùn)行頁面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jQuery插件artDialog.js使用與關(guān)閉方法示例
這篇文章主要介紹了jQuery插件artDialog.js使用與關(guān)閉方法,結(jié)合具體實(shí)例形式分析了jQuery彈出窗口插件artDialog.js的簡單使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-10-10