思路如下:
使用panel的onOpen事件,取得diglog的原始left和top当用户在拖动dialog过程中,使用panel的onMove事件取得dialog所在父页面body的width和height,通过计算,当用户将diglog拖动出body时,使用panel的move函数将dialog移动到初始的位置。
示例Demo:
本示例定义一个函数,传入文件夹和图片名称通过dialog框显示图片.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Open Dialog</title>
<link rel="stylesheet" href="jquery/themes/default/easyui.css" type="text/css" >
<link rel="stylesheet" href="jquery/themes/icon.css" type="text/css" >
<script type="text/javascript" src="jquery/jquery.easyui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="jquery/locale/easyui-lang-zh_CN.js" charset="UTF-8"></script>
<script type="text/javascript">
//本示例定义一个函数,传入文件夹和图片名称通过dialog框显示图片
function showImagePreview(fileName,imageName){
// 用于Linux下服务器显示图片
//var scheme = '<%=request.getScheme() %>';
//var serverName = '<%=request.getServerName() %>';
//var tempPath = scheme+"://"+serverName;
//var path = tempPath+"/images/upload/"+fileName+"/"+imageName;
//document.getElementById("showImage").src=path;
//用于window下服务器显示图片
var scheme = '<%=request.getScheme() %>';
var serverName = '<%=request.getServerName() %>';
var path = '<%=request.getContextPath() %>';
var serverPort = '<%=request.getServerPort() %>';
var tempPath = scheme+"://"+serverName+":"+serverPort+path;
var imagePath = tempPath+"/images/upload/"+imageName;
document.getElementById("showImage").src=imagePath;
$('#imagePreview').show();
//定义Dialog的原始left和top
var default_left;
var default_top;
$('#imagePreview').dialog({
modal: true,
onOpen:function(){
//dialog原始left
default_left=$('#imagePreview').panel('options').left;
//dialog原始top
default_top=$('#imagePreview').panel('options').top;
},
onMove:function(left,top){ //鼠标拖动时事件
var body_width=document.body.offsetWidth;//body的宽度
var body_height=document.body.offsetHeight;//body的高度
var dd_width= $('#imagePreview').panel('options').width;//dialog的宽度
var dd_height= $('#imagePreview').panel('options').height;//dialog的高度
if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){
$('#imagePreview').dialog('move',{
left:default_left,
top:default_top
});
}
}
});
}
</script>
</head>
<body>
<div id="imagePreview" title="图片预览" style="display:none;padding:5px;width:800px;height:600px;" >
<img width='100%' height='100%' id="showImage" />
</div>
</body>
</html>
分享到:
相关推荐
仿 JQuery Dialog 登录页面 htm css div 简洁
jquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialogjquery_dialog
jQuery dialog对话框插件点击弹出对话框代码 jQuery dialog对话框插件点击弹出对话框代码
用户将dialog拖出页面后,dialog就不能拖下来了,除非要重新打开页面,这个问题对于用户体验来说是非常重要的, 所以就开始研究easyu API看看有没有相应的函数或者事件去处理,结果发现没有现成,只好自己想了个...
基于 jquery 项目中 用到的dialog弹出层 一种弹出层
jQuery Dialog jQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery DialogjQuery Dialog
JQuery UI Dialog 弹出框以及清楚数据
简单的jquery dialog实现插件,使用简单,自行修改样式
Jquery中dialog属性的小计,详细介绍dialog的使用
18、jQuery弹出对话框jQuery插件Dialog
jquery的弹出窗口插件dialog参数详细说明
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
jqueryAlert confirm prompt 将jqueryDialog改成prompt形式
一款不错的jQueryDialog 插件使用范例,有需要的请查看
jquery弹出效果实例,展示了jquery对弹出窗口的多个实例,弹出窗口框,弹出框内弹出页面,
虽然项目未结项就转交了出去,但开始对JQuery产生了好感并爱不释手,于是决定将此项目正式更名为JQueryDialog。 本次更新将代码完全基于了JQuery框架,并应用了命名空间,让JS看起来有那么一点OO的感觉,同时修改了...
NULL 博文链接:https://lishuaishuai.iteye.com/blog/1267230
jQuery对话框Dialog弹出层插件演示与使用说明
JQuery Alert Dialog,包括錯誤,警告,提示信息圖標
jQuery插件 dialog非常不错的弹出框控件