插件功能特点:
允许通过CSS进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时，对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。
经过测试插件可以在Firefox和IE下正常工作。
简单使用描述：
引用JQuery和对话框插件文件：
定义相关按钮为行：
定义相关对话框显示的内容:
JQuery模式对话框插件好用吗?
插件功能特点:
允许通过CSS进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时，对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动，根据工作区大小自适应居中功能。
并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。
经过测试插件可以在Firefox和IE下正常工作。
简单使用描述：
引用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='
enabledframe='
$('#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”);
//创建对话框容器
functionCreateContainer(option)
{
varhtml;
html='
if(option.parent)
{
$('#'+option.parent).append(html);
}
else
{
$(document.body).append(html);
}
}
//设置显示时背景式样
functionSetEnabledStyle()
{
varde,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);
}
//设置透明式样
functionGetOpacity(css)
{
if(window.navigator.userAgent.indexOf('MSIE')>=1)
{
css.filter=‘progid:DXImageTransform.Microsoft.Alpha(opacity=30)';
}
else
{
css.opacity=‘0.3′;
}
}
//设置对话框试样
functionSetStyle(option)
{
varregion,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 { 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); } functionhandleMouseDown(e) { varevt=e||event; down_y=evt.clientY; cx=(parseInt(MessageBox_win.css('left'))|0); cy=(parseInt(MessageBox_win.css('top'))|0) MessageBox_Moving=true;³ document.documentElement.onselectstart=function(){returnfalse}; document.documentElement.ondrag=function(){returnfalse}; document.onmousemove=handleMouseMove; $(document.body).append('
vardown_x,down_y,cx,cy;
down_x=evt.clientX;
$('#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'));
}
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)³
{
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); } } ShowMessageBox(option); document.body.focus(); }); }); });
$(this).click(function(){ 
messageboxscript.rar
相关推荐
文章分类
热门关键词
热门文章
最新更新
