当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用JQuery 实现的自定义对话框

Javascript
jQuery代码:jQuery控制表单里的回车键
用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome
jQuery Flash/MP3/Video多媒体插件
9个JavaScript评级/投票插件
JS实现的radio图片选择按钮效果
IE中checkbox在刷新后初始化的问题
JavaScript 学习笔记(十一)
JS 对象介绍
javascript 哈希表(hashtable)的简单实现
jquery 防止表单重复提交代码
js parsefloat parseint 转换函数
javascript parseInt与Number函数的区别
JavaScript 学习笔记(十二) dom
JavaScript 学习笔记(十三)Dom创建表格
javascript 实现自由落体的方块效果
javascript 获取url参数和script标签中获取url参数函数代码
JAVASCRIPT style 中visibility和display之间的区别
javascript 拖放效果实现代码
jquery last-child 列表最后一项的样式
Jquery实战_读书笔记1—选择jQuery

Javascript 中的 用JQuery 实现的自定义对话框


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 121 ::
收藏到网摘: n/a

JavaScript为我们提供几种对话框功能,但功能都十分有限;虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能,但毕竟只有IE得到支持。为了得到更丰富的自定义对话框功能,于是用JQuery编写了一个对话框插件;只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。
插件功能特点:
允许通过CSS进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时,对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动,根据工作区大小自适应居中功能。
并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。
经过测试插件可以在Firefox和IE下正常工作。
简单使用描述:
引用JQuery和对话框插件文件:
<script src=jquery-latest.js></script>
<script src=messageBox.js></script>
定义相关按钮为行:
<input id="Button4" type="button" value="提问对话框" showoption="control:test2;width:220;height:120;title:对话框" />
定义相关对话框显示的内容:
<div id="test2" style="display:none">
<table style="width: 200px">
<tr>
<td >
JQuery模式对话框插件好用吗?</td>
</tr>
<tr>
<td align="right" >
<input id="Button2" onclick="CloseMessageBox()" type="button" value="是" />
<input id="Button6" onclick="CloseMessageBox()" type="button" value="否" /></td>
</tr>
</table>
</div>
下载例程和源码
复制代码 代码如下:

/* JQuery 模式对话框插件
* writer: FanJianHan ([email protected])
* License: GPL (GPL-LICENSE.txt) licenses.
*/
//是否已初始化过对话框
var MessageOninit = false;
//记录body滚动条的x,y偏移量;显示内容的元素对象,显示内容元素对象的父对象
var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//对话框对象,对话框宽度,对话框高度
var MessageBox_win,MessageBox_width,MessageBox_height;
//对话框是否处于移动状态
var MessageBox_Moving = false;
//显示模式提示框
function ShowMessageBox(option)
{
var container,iframe,enabled,enabledframe;
var height=400;
var width =400;
MessageBox_scrolltop =0;
MessageBox_scrollleft =0;
if(!MessageOninit)
{
CreateContainer(option);
MessageOninit = true;
$('#messagebox_close').click(function(){
CloseMessageBox();
});
$(window).resize(function(){
SetStyle(option);
SetEnabledStyle();
});
$(window).scroll(function(e){
MessageBox_scrolltop =document.documentElement.scrollTop;
MessageBox_scrollleft = document.documentElement.scrollLeft;
SetEnabledStyle();
});
MessageBox_win = $("#messagebox_win");
$('#messagebox_title').mousedown(handleMouseDown);
$('#messagebox_title').mouseup(handleMouseUp);
$('#messagebox_title').mousemove(handleMouseMove);
document.onmouseup = handleMouseUp;
}
if(option.height)
height = parseInt(option.height);
if(option.width)
width = parseInt(option.width);
MessageBox_height = height;
MessageBox_width = width;
Messagebox_AC = $('#'+option.control);
MessageBox_PC = Messagebox_AC.parent();
Messagebox_AC.css('display','');
enabled='<div id="messagebox_enabled" style="background-color: lightgrey;width:100%;height:100%;position:absolute;z-index:99998;"></div>'
enabledframe='<iframe id="messagebox_enabledframe" frameborder=0 scrolling=no style="position:absolute; visibility:inherit; top:0px; left_0px; width:100%;height:100%;z-index:99997; "></iframe>';
$('#messagebox_enabledframe').remove()_
$('#messagebox_enabled').remove();
$('#messagebox_title').html(option.title);
$('#messagebox_from').append(Messagebox_AC);
SetStyle(option);
$(document.body).append(enabledframe);
$(document.body).append(enabled);
SetEnabledStyle();
$('#messagebox_win').fadeIn("slow");
//创建对话框容器
function CreateContainer(option)
{
var html;
html='<div id="messagebox_win" style="position:absolute;z-index:99999;"><table cellpadding="0" cellspacing="0" id="messagebox_table"><tr><td id="messagebox_title_td"><table id="messagebox_title_table" ><tr><td style="width:99%;" ><div id="messagebox_title" style="width:100%;cursor: default;"></div></td><td><button id="messagebox_close"></button></td></tr></table></td></tr><tr id="messagebox_body_td"><td valign="top" ><div id="messagebox_from" style="text-align: center;"></div></td></tr></table></div>';
if(option.parent)
{
$('#' + option.parent).append(html);
}
else
{
$(document.body).append(html);
}
}
//设置显示时背景式样
function SetEnabledStyle()
{
var de,w,h,css,region;
region = GetDocumentRegion();
css ={width:region.width+"px",height:region.height+"px",
left: MessageBox_scrollleft+'px',top: MessageBox_scrolltop +'px'}
GetOpacity(css);
$("#messagebox_enabled").css(css);
$("#messagebox_enabledframe").css(css);
}
//设置透明式样
function GetOpacity(css)
{
if(window.navigator.userAgent.indexOf('MSIE')>=1)
{
css.filter= 'progid:DXImageTransform.Microsoft.Alpha(opacity=30)';
}
else
{
css.opacity= '0.3';
}
}
//设置对话框试样
function SetStyle(option)
{
var region,css;
region = GetDocumentRegion();
css ={width:MessageBox_width+'px',height:MessageBox_height+'px',
left: ((region.width - MessageBox_width)/2)+'px',top: ((region.height - MessageBox_height)/2)+'px'}
if(region.height < MessageBox_height )//如果body显示的高度小于对话框高度
{
css.top=10+'px';
}
else
{
css.top=((region.height - MessageBox_height)/2)+'px'
}
$('#messagebox_win').css(css);
css.top='0px';
css.left='0px';
$('#messagebox_table').css(css);
css.width='100%';
css.height='16px';
$('#messagebox_title_td').css(css);
css.height= height-46 +'px';
$('#messagebox_body_td').css(css);
}
var down_x,down_y,cx,cy;
function handleMouseDown(e)
{
var evt = e || event;
down_x=evt.clientX;
down_y = evt.clientY;
cx =(parseInt(MessageBox_win.css('left'))|0);
cy = (parseInt(MessageBox_win.css('top'))|0)
MessageBox_Moving= true;3
document.documentElement.onselectstart = function(){return false};
document.documentElement.ondrag = function(){return false};
document.onmousemove = handleMouseMove;
$(document.body).append('<div id="messagebox_move" style="position: absolute; z-index:100000;border-right: midnightblue 1px dashed; border-top: midnightblue 1px dashed; border-left: midnightblue 1px dashed; border-bottom: midnightblue 1px dashed;"></div>');
$('#messagebox_move').css('width',MessageBox_win.css('width'));
$('#messagebox_move').css('height',MessageBox_win_u99 ?ss('height'));
$('#messagebox_move').css('left',MessageBox_win.css('left'));
$('#messagebox_move').css('top',MessageBox_win.css('top'));
}
function GetDocumentRegion()
{
var w,h,de;
de = document.documentElement;
w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;
return {height:h,width:w};
}
function handleMouseMove(e)
{
var left,top,region;
if (MessageBox_Moving)
{
var evt = e || event;
left =evt.clientX+cx-down_x;
top = evt.clientY+cy-down_y;
region = GetDocumentRegion();
if(left+ MessageBox_width > region.width)
{
left = region.width - 10- MessageBox_width;
}
if(top + MessageBox_height >region.height)3
{
top = region.height-10 - MessageBox_height;
}
if(left <10)
left =10;
if(top <10)
top =10;
var css ={left:left+'px',top:top+'px'}
$('#messagebox_move').css(css);
}
}
function handleMouseUp()
{
if(MessageBox_Moving)
{
MessageBox_win.css('width',$('#messagebox_move').css("width"));
MessageBox_win.css('height',$('#messagebox_move').css("height"));
MessageBox_win.css('left',$('#messagebox_move').css("left"));
MessageBox_win.css('top',$('#messagebox_move').css("top"));
}
MessageBox_Moving _u61 ? false;
document.onmousemove = null;
$('#messagebox_move').remove();
}
}
//关闭模式对话框
function CloseMessageBox()
{
if(MessageOninit)
{
$('#messagebox_win').hide();
$('#messagebox_enabled').remove();
$('#messagebox_enabledframe').remove();
Messagebox_AC.css('display','none');
MessageBox_PC.append(Messagebox_AC);
}
document.documentElement.onselectstart = null;
document.documentElement.ondrag = null;
}
$(document).ready(function(){
$(document).find('[@showoption]').each(function(){
var namevalue;
//虽然显示的元素id,显示宽度,显示高度,标题,对话框寄居的元素对象id
var option={control:'',width:'400',height:'400',title:'',parent:null};
var properties = $(this).attr('showoption').split(';');
for(i=0;i<properties.length;i++)
{
namevalue = properties[i].split(':');
if(namevalue.length >1)
{
execute ="option." + namevalue[0] +'=\''+ namevalue[1]+'\';';
eval(execute);
}
}
$(this).click(function(){
ShowMessageBox(option);
document.body.focus();
});
});
});