Jquery UI 对话框 - 如何使用关闭按钮执行功能?
Jquery UI Dialog - How to use the close button to perform function?
我在我的站点中使用 Jquery UI 对话框,想知道是否可以使用关闭按钮执行操作。例如,如果按下按钮,则刷新页面。像这样的东西。这可能吗?
谢谢大家。
:)
$(document).ready(function() {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 300
},
hide: {
effect: "clip",
duration: 500
}
});
$("#opener").on("click", function() {
$("#dialog1").dialog("open");
});
});
function dialog() {
$("#dialog1").dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
<p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>
您可以像这样使用 jquery ui 对话框的事件 dialogbeforeclose
:
javascript部分事件处理:
$("#dialog1").on("dialogbeforeclose", function() {
alert("Do what you want here");
});
如果需要,您可以通过调用 location.reload();
来刷新页面,而不是提醒
工作片段:
$(document).ready(function() {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 300
},
hide: {
effect: "clip",
duration: 500
}
});
$("#opener").on("click", function() {
$("#dialog1").dialog("open");
});
});
// Here is the interception of the event dialogbeforeclose
$("#dialog1").on("dialogbeforeclose", function() {
alert("Do what you want here");
});
function dialog() {
$("#dialog1").dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
<p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>
$('#dialog1').on('dialogclose', function(event) {
location.reload();
});
我在我的站点中使用 Jquery UI 对话框,想知道是否可以使用关闭按钮执行操作。例如,如果按下按钮,则刷新页面。像这样的东西。这可能吗?
谢谢大家。 :)
$(document).ready(function() {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 300
},
hide: {
effect: "clip",
duration: 500
}
});
$("#opener").on("click", function() {
$("#dialog1").dialog("open");
});
});
function dialog() {
$("#dialog1").dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
<p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>
您可以像这样使用 jquery ui 对话框的事件 dialogbeforeclose
:
javascript部分事件处理:
$("#dialog1").on("dialogbeforeclose", function() {
alert("Do what you want here");
});
如果需要,您可以通过调用 location.reload();
工作片段:
$(document).ready(function() {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: "puff",
duration: 300
},
hide: {
effect: "clip",
duration: 500
}
});
$("#opener").on("click", function() {
$("#dialog1").dialog("open");
});
});
// Here is the interception of the event dialogbeforeclose
$("#dialog1").on("dialogbeforeclose", function() {
alert("Do what you want here");
});
function dialog() {
$("#dialog1").dialog("open");
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog1" title="Dialog Title!">
<p>Dialog Text</p>
</div>
<button onclick="dialog()">Press For Dialog</button>
$('#dialog1').on('dialogclose', function(event) {
location.reload();
});