您的位置：首页 > Web前端 > JQuery

jquery easyui dialog不超出父容器以及随浏览器缩放

2012-01-16 09:40 513 查看
tag：jquery , easyui, dialog , 缩放

code:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=GBK">
<title></title>
<link rel="stylesheet" type="text/css" href="../sources/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../sources/themes/icon.css">
<script type="text/javascript" src="../sources/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../sources/jquery.easyui.min.js"></script>

<style type="text/css">
body{width:100%;height:100%;}
TABLE{WIDTH:100%;}
#divDialog{padding:5px;}
</style>
<script type="text/javascript">
function fixWidth(percent){
return document.body.clientWidth * percent;
}
function openDivDialog(){
$("#divDialog").dialog("open");
}
function closeDivDialog(){
$("#divDialog").dialog("close");
}
$(function(){
$(window).resize(function(){
$("#divDialog").dialog({
width:fixWidth(0.4)
});
});
$("#divDialog").dialog({
title:"对话框",
collapsible:true,
minimizable:true,
maximizable:true,
resizable:true,
//modal:true, 是否是模式对话框
width:fixWidth(0.4),
height:200,
//fitColumns:true,适应父容器的大小
doSize:true,

toolbar:[{
text:"Add",
iconCls:"icon-add",
handler:function(){
alert("这是单击add按钮事件");
}
},"-",{
text:"save",
iconCls:"icon-save",
handler:function(){
alert("这是单击save按钮事件");
}
}],

buttons:[{
text:"Ok",
iconCls:"icon-ok",
handler:function(){
alert("这是单击ok按钮事件"+$("#divDialog"));
}
},{
text:"Cancle",
handler:function(){
alert("这是单击cancle按钮事件,关闭dialog");
$("#divDialog").dialog("close");
}
}],
//事件绑定
onMove:function(left,top){
var right，bottom;
//alert($("body").width()+"---"+left +"----"+ $("#divDialog").width()+"="+($("#divDialog").width()+left));
var bodyWidth = $("body").width();
var bodyHeight = $("body").height();
var dialogwidth = $("#divDialog").width();
var dialogHeight = $("#divDialog").height();
if(left < 0){
$("#divDialog").dialog("move",{left:0,top:top});
}else if((left + dialogwidth) > (bodyWidth - 50)){
right = bodyWidth - dialogwidth - 50;
$("#divDialog").dialog("move",{left:right,top:top});
}
if(top < 0){
$("#divDialog").dialog("move",{left:left,top:0});
}else if(top > (bodyHeight - dialogHeight - 50 )){
bottom = bodyHeight - dialogHeight - 50;
$("#divDialog").dialog("move",{left:left,top:bottom});
}
}
});
});
</script>
</head>
<body onresize="openDivDialog();">
<h1>Dialog</h1>
<div>
<a href="#" onclick="openDivDialog();">open</a>
<a href="#" onclick="closeDivDialog();">close</a>
</div>
<div id="divDialog" icon="icon-save">
<TABLE>
<TR align="center" bgColor="#dcdcdc">
<TD>用户编号</TD>
<TD>试用时间</TD>
<TD>转正时间</TD>
<TD>性别</TD>
<TD>姓名拼音</TD>
<TD>生日时间</TD>
<TD>民族</TD>
<TD>身高</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">2000001</TD>
<TD>1997-3-13 0:00:00</TD>
<TD>1997-3-13 0:00:00</TD>
<TD>1</TD>
<TD>WZJ</TD>
<TD>1965-3-13 0:00:00</TD>
<TD>汉</TD>
<TD>171</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">2000045</TD>
<TD>2001-2-15 0:00:00</TD>
<TD>2001-3-15 0:00:00</TD>
<TD>0</TD>
<TD>WY</TD>
<TD>1978-8-5 0:00:00</TD>
<TD>汉</TD>
<TD>162</TD>
</TR>
<TR>
<TD style="WIDTH: 75px">2000046</TD>
<TD>2001-2-23 0:00:00</TD>
<TD>2001-3-23 0:00:00</TD>
<TD>0</TD>
<TD>LQ</TD>
<TD>2001-2-23 0:00:00</TD>
<TD>汉</TD>
<TD>171</TD>
</TR>
</TABLE>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航