您好,欢迎访问一九零五行业门户网

JQuery实现自定义对话框的代码_jquery

为了得到更丰富的自定义对话框功能,于是用jquery编写了一个对话框插件;只需简单地引用相关javascript就能得到丰富的自定义对话框功能。
插件功能特点:
允许通过css进行外观控制。
可以任意把面页的元素作为对话框显示。
当对话框激活时,对话框外的任何元素不能接受鼠标操作。
对话框可以在工作区范围内任意移动,根据工作区大小自适应居中功能。
并不需要编写复杂的javascript,通过简单html属性描述即可。
经过测试插件可以在firefox和ie下正常工作。
简单使用描述:
引用jquery和对话框插件文件:
定义相关按钮为行:
定义相关对话框显示的内容:
jquery模式对话框插件好用吗?
复制代码 代码如下:
/* jquery 模式对话框插件
* writer: fanjianhan (henryfan@msn.com)
* 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='
'
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”);
//创建对话框容器
function createcontainer(option)
{
var html;
html='
';
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 
{
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;³
document.documentelement.onselectstart = function(){return false};
document.documentelement.ondrag = function(){return false};
document.onmousemove = handlemousemove;
$(document.body).append('
');
$('#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)³
{
top = region.height-10 - messagebox_height;
}
if(left 
left =10;
if(top 
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
{
namevalue = properties[i].split(':');
if(namevalue.length >1)
{
execute =”option.” + namevalue[0] +'=\”+ namevalue[1]+'\';';
eval(execute);
}
}
$(this).click(function(){
showmessagebox(option);
document.body.focus();
});
});
});
messageboxscript.rar
其它类似信息

推荐信息