jquery easyui dialog不超出父容器以及随浏览器缩放
来源:互联网 发布:数据存储四种方式 编辑:程序博客网 时间:2024/05/10 05:08
- <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>
阅读全文
0 0
- jquery easyui dialog不超出父容器以及随浏览器缩放
- jquery easyui dialog不超出父容器以及随浏览器缩放
- easyui的dialog的width或者height超出父容器报错的问题
- 防止easyui的panel/window/dialog组件超出浏览器边境
- 解决Jquery easyui中dialog、window、panel三个组件拖动超出父元素界限问题
- jQuery EasyUI window拖动超出浏览器边界问题修正
- easyui防止panel,dialog,window超出父元素边界
- jQuery.easyui Dialog使用
- jquery easyui dialog问题
- jquery easyUI dialog事件
- jquery easyui dialog
- jquery easyui dialog
- jQuery EasyUI解决输入框在屏幕右侧造成ValidateBox提示信息超出屏幕不可见.
- 解决EasyUI dialog弹出窗口超出父元素,导致不能关闭的bug
- easyui dialog 标题栏 不显示
- jquery-easyui中创建Dialog
- jquery easyui dialog Bug解决方案
- jquery easyui dialog Bug解决方案
- 【原创】【KM算法】POJ 2516 Minimum cost(拆点+多次KM)
- Yaf 学习记录(2)
- scala安装过程中需要注意的问题
- Sift特征点匹配过程
- ARM原子操作atomic_add详解
- jquery easyui dialog不超出父容器以及随浏览器缩放
- spring+springMVC+hibernate 三大框架整合
- seq2seq里的 attention机制 的 原理 及 代码 及 个人理解
- js随机设置8位密码
- 二进制输出所有的子集
- 欢迎使用CSDN-markdown编辑器
- logback配置日志
- Python练习-0701
- HDU 4283 You Are the One (区间dp)