您的位置：首页 > 产品设计 > UI/UE

easyui 窗口的onBeforeClose 使用

2015-08-12 11:24 281 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="/jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" />
<link href="/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script src="/jquery-easyui-1.3.2/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
var bSave = false;
var bClose = true;
$(function () {
$("#btnOpen").click(function () {
bSave = false;       //模拟标记数据是否保存，如果没保存，询问是否退出
bClose = false;
$("#myDialog").dialog({ title: "测试对话框", width: 600, height: 300, modal: true,
onBeforeClose: function () {
if (!bSave && !bClose) {
$.messager.confirm("提醒", "信息尚未保存，是否退出?",
function (r) {
if (r) {
bClose = true;//标记可以退出
$("#myDialog").dialog("close");
}
});
}
return bClose;  //通过全局变量来控制是否关闭窗口
},
buttons: [{
text: "确定",
iconCls: 'icon-ok',
handler: function () {
bSave = true;
bClose = true;
$("#myDialog").dialog("close");
}
},
{
text: "取消",
iconCls: "icon-tools",
handler: function () {
$("#myDialog").dialog("close");
}
}]

});
});

});
</script>
</head>
<body>
<div id="myLayout" class="easyui-layout" data-options="fit:true">
<div data-options="region:'center'">
<div id="myTabs" class="easyui-tabs" data-options="fit:true">
<div title="Tab1" style="padding: 20px;">
<input type="button" id="btnOpen" value="单击我打开窗口" />
</div>
</div>
</div>
</div>
<div id="myDialog" title="My Dialog">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'center'">
</div>
</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航