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

最新推荐文章于 2021-05-31 00:02:13 发布

tnjun123456

最新推荐文章于 2021-05-31 00:02:13 发布

阅读量1.8w

点赞数

分类专栏：前端脚本文章标签： dialog jquery function stylesheet div 浏览器

本文链接：https://blog.csdn.net/tnjun123456/article/details/7204224

版权

前端脚本专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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 οnresize="openDivDialog();">
        <h1>Dialog</h1>
	 <div>
	     <a href="#" οnclick="openDivDialog();">open</a>
	     <a href="#" οnclick="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>

tnjun123456

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
jquery easyui dialog不超出父容器以及随浏览器缩放

tag：jquery , easyui, dialog , 缩放code: body{width:100%;height:100%;} TABLE{WIDTH:100%;} #divDialog{padding:5px;} function fixWidth(p
复制链接

扫一扫