插件功能特点:
允许通过CSS进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时，对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。
经过测试插件可以在Firefox和IE下正常工作。
简单使用描述：
引用JQuery和对话框插件文件：
定义相关按钮为行：
定义相关对话框显示的内容:
JQuery模式对话框插件好用吗?
下载例程和源码
复制代码 代码如下:
/*JQuery模式对话框插件
*writer:FanJianHan(henryfan@msn.com)
*License:GPL(GPL-LICENSE.txt)licenses.
*/
//是否已初始化过对话框
varMessageOninit=false;
//记录body滚动条的x,y偏移量;显示内容的元素对象，显示内容元素对象的父对象
varMessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;
//对话框对象，对话框宽度，对话框高度
varMessageBox_win,MessageBox_width,MessageBox_height;
//对话框是否处于移动状态
varMessageBox_Moving=false;
//显示模式提示框
functionShowMessageBox(option)
{
varcontainer,iframe,enabled,enabledframe;
varheight=400;
varwidth=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='
//创建对话框容器
functionCreateContainer(option)
{
varhtml;
html='
}
vardown_x,down_y,cx,cy;
functionhandleMouseDown(e)
{
varevt=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(){returnfalse};
document.documentElement.ondrag=function(){returnfalse};
document.onmousemove=handleMouseMove;
$(document.body).append('
}
functionGetDocumentRegion()
{
varw,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};
}
functionhandleMouseMove(e)
{
varleft,top,region;
if(MessageBox_Moving)
{
varevt=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;
varcss={left:left+'px',top:top+'px'}
$('#messagebox_move').css(css);
}
}
functionhandleMouseUp()
{
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();
}
}
//关闭模式对话框
functionCloseMessageBox()
{
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(){
varnamevalue;
//虽然显示的元素id,显示宽度,显示高度,标题,对话框寄居的元素对象id
varoption={control:'',width:'400',height:'400',title:'',parent:null};
varproperties=$(this).attr('showoption').split(';');
for(i=0;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();
});
});
});
相关推荐
文章分类
热门关键词
热门文章
最新更新
