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

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

2017-07-06 17:08 387 查看

<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});  <
4000
/li>            }
            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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dialog jquery function stylesheet div

相关文章推荐

新的分享

章节导航