- <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>
jquery easyui dialog不超出父容器以及随浏览器缩放
最新推荐文章于 2021-02-21 09:45:30 发布