jQuery彈出層插件Dialog
/**
- DialogUpdate *
- @author huang ji hua
- @copyright Copyright (C) 2012
- @license FreeBSD license */ /**
- jQuery的Dialog插件。 *
- @param object content
- @param object options 選項。
@return */ function Dialog(content, options) { var defaults = { // 默認值。
title: '標題', // 標題文本，若不想顯示title請通過CSS設置其display為none showTitle: true, // 是否顯示標題欄。 closeText: '[關閉]', // 關閉按鈕文字，若不想顯示關閉按鈕請通過CSS設置其display為none draggable: true, // 是否移動 modal: true, // 是否是模態對話框 center: true, // 是否居中。 fixed: true, // 是否跟隨頁面滾動 true表示不滾動 false滾動。 time: 0, // 自動關閉時間，為0表示不會自動關閉。 id: false, // 對話框的id，若為false，則由系統自動產生一個唯一id。 dialogClass: 'meBan-box w-390', //最外層div樣式名稱 iframeAttr:'scrolling="no"',//iframe attr titleClass: ''//標題樣式名稱}; var options = $.extend(defaults, options); options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID var overlayId = options.id + '-overlay'; // 遮罩層ID var timeId = null; // 自動關閉計時器 var isShow = false; var isIe = $.browser.msie; var isIe6 = $.browser.msie && ('6.0' == $.browser.version); / 對話框的布局及標題內容。/ var barHtml = !options.showTitle ? '' : '<div class="hd"><b class="'+ options.titleClass +'">' + options.title + '</b> <a href="javascript:void(0)" class="close">' + options.closeText + '</a></div>' dialog = $('<div id="' + options.id + '" class="' + options.dialogClass + '"><div class="borderg">' + barHtml + '<div class="content"></div></div>').hide(); $('body').append(dialog); /**
- 重置對話框的位置。 *
- 主要是在需要居中的時候，每次加載完內容，都要重新定位 *
@return void / var resetPos = function () { / 是否需要居中定位，必需在已經知道了dialog元素大小的情況下，才能正確居中，也就是要先設置dialog的內容。 */ if (options.center) {
var left = ($(window).width() - dialog.width()) / 2; var top = ($(window).height() - dialog.height()) / 2; if (!isIe6 && options.fixed) { dialog.css({ top: top, left: left }); } else { dialog.css({ top: top + $(document).scrollTop(), left: left + $(document).scrollLeft() }); }} }
/**
- 初始化位置及一些事件函數。 *
其中的this表示Dialog對象而不是init函數。 / var init = function () { / 是否需要初始化背景遮罩層 */ if (options.modal) {
$('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>'); $('#' + overlayId).css({ 'left': 0, 'top': 0, /*'width':$(document).width(),*/ 'width': '100%', /*'height':'100%',*/ 'height': $(document).height(), 'z-index': ++Dialog.__zindex, 'position': 'absolute' }) .hide();}
dialog.css({ 'z-index': ++Dialog.__zindex, 'position': options.fixed ? 'fixed' : 'absolute' });
/ IE6 兼容fixed代碼 / if (isIe6 && options.fixed) {
dialog.css('position', 'absolute'); resetPos(); 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 }); });}
/ 以下代碼處理框體是否可以移動 / 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('.hd').mousedown(function (event) {
if (!options.draggable) { return; } 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);});
/ 綁定一些相關事件。 / dialog.find('.close').bind('click', this.close); dialog.bind('mousedown', function () { dialog.css('z-index', ++Dialog.__zindex); });
// 自動關閉 if (0 != options.time) { timeId = setTimeout(this.close, options.time); } }
/**
* 設置對話框的內容。
*
* @param string c 可以是HTML文本。
* @return void
*/
this.setContent = function (c) {
var div = dialog.find('.content');
if ('object' == typeof (c)) {
switch (c.type.toLowerCase()) {
case 'id': // 將ID的內容復制過來，原來的還在。
div.html($('#' + c.value).html());
break;
case 'img':
div.html('加載中...');
$('<img alt="" />').load(function () { div.empty().append($(this)); resetPos(); })
.attr('src', c.value);
break;
case 'url':
div.html('加載中...');
$.ajax({ url: c.value,
success: function (html) { div.html(html); resetPos(); },
error: function (xml, textStatus, error) { div.html('出錯啦') }
});
break;
case 'iframe':
div.append($('<iframe src="' + c.value + '" ' + options.iframeAttr + '/>'));
break;
case 'text': break;
default:
div.html(c.value);
break;
}
}
else
{ div.html(c); }
}
/**
* 顯示對話框
*/
this.show = function () {
if (undefined != options.beforeShow && !options.beforeShow())
{ return; }
/**
* 獲得某一元素的透明度。IE從濾境中獲得。
*
* @return float
*/
var getOpacity = function (id) {
if (!isIe)
{ return $('#' + id).css('opacity'); }
var el = document.getElementById(id);
return (undefined != el
&& undefined != el.filters
&& undefined != el.filters.alpha
&& undefined != el.filters.alpha.opacity)
? el.filters.alpha.opacity / 100 : 1;
}
/* 是否顯示背景遮罩層 */
if (options.modal)
{ $('#' + overlayId).fadeTo('slow', getOpacity(overlayId)); }
dialog.fadeTo('slow', getOpacity(options.id), function () {
if (undefined != options.afterShow) { options.afterShow(); }
isShow = true;
});
// 自動關閉
if (0 != options.time) { timeId = setTimeout(this.close, options.time); }
resetPos();
}
/**
* 隱藏對話框。但并不取消窗口內容。
*/
this.hide = function () {
if (!isShow) { return; }
if (undefined != options.beforeHide && !options.beforeHide())
{ return; }
dialog.fadeOut('slow', function () {
if (undefined != options.afterHide) { options.afterHide(); }
});
if (options.modal)
{ $('#' + overlayId).fadeOut('slow'); }
isShow = false;
}
/**
* 關閉對話框
*
* @return void
*/
this.close = function () {
if (undefined != options.beforeClose && !options.beforeClose())
{ return; }
dialog.fadeOut('slow', function () {
$(this).remove();
isShow = false;
if (undefined != options.afterClose) { options.afterClose(); }
});
if (options.modal)
{ $('#' + overlayId).fadeOut('slow', function () { $(this).remove(); }); }
clearTimeout(timeId);
}
init.call(this);
this.setContent(content);
Dialog.__count++;
Dialog.__zindex++;
} Dialog.zindex = 500; Dialog.count = 1; Dialog.version = '1.0 beta';
function dialog(content, options) { var dlg = new Dialog(content, options); dlg.show(); return dlg; }
//調用方式:
new Dialog({type:'url',value:'/dialog/videoplayer/"+shlf.InnerCode +"'},{title:'標題',closeText:'',dialogClass:'meBan-box w-670'}).show()</pre>
openkk 
碼頭工人 
cnetly 
umltool 