用JQuery UI dialog实现Alert和Confirm功能
2009-10-14 11:45
537 查看
JQuery UI dialog虽然可以实现Alert和Confirm功能,但每次都要定义相关dialog内容是比较麻烦的。如果只需要简单的调用ShowMsg(’内容’)这样就会省上很多事情,其实只要在JQuery UI dialog的基础上做些简单的工作就可以了。
把功能封装到一个用户控件中,有需要直接引用就可以了。
<%@ Control Language="C#" AutoEventWireup="true" %>
<div id="AlertMessage" title="信息确认">
<p id="AlertMessageBody" class="msgbody"></p>
</div>
<div id="ConfirmMessage" title="信息提问">
<p id="ConfirmMessageBody" class="msgbody""></p>
</div>
<script>
$(document).ready(function() {
$('#AlertMessage').dialog({
autoOpen: false,
width: 300,
modal: true,
buttons: {
"取消": function() {
$(this).dialog("close");
}
}
});
$('#ConfirmMessage').dialog({
autoOpen: false,
width: 300,
modal: true,
buttons: {
"取消": function() {
$(this).dialog('close');
mDialogCallback(false);
},
"确定": function() {
$(this).dialog('close');
mDialogCallback(true);
}
}
});
});
var mDialogCallback;
function ShowMsg(msg, callback) {
if (callback == null) {
$('#AlertMessageBody').html(msg);
$('#AlertMessage').dialog('open');
}
else {
mDialogCallback = callback;
$('#ConfirmMessageBody').html(msg);
$('#ConfirmMessage').dialog('open');
}
};
</script>
这样以后使用起来就省些事了:
ShowMsg('是否提交活动信息?', function(yes) {
if (yes) {
}
});
把功能封装到一个用户控件中,有需要直接引用就可以了。
<%@ Control Language="C#" AutoEventWireup="true" %>
<div id="AlertMessage" title="信息确认">
<p id="AlertMessageBody" class="msgbody"></p>
</div>
<div id="ConfirmMessage" title="信息提问">
<p id="ConfirmMessageBody" class="msgbody""></p>
</div>
<script>
$(document).ready(function() {
$('#AlertMessage').dialog({
autoOpen: false,
width: 300,
modal: true,
buttons: {
"取消": function() {
$(this).dialog("close");
}
}
});
$('#ConfirmMessage').dialog({
autoOpen: false,
width: 300,
modal: true,
buttons: {
"取消": function() {
$(this).dialog('close');
mDialogCallback(false);
},
"确定": function() {
$(this).dialog('close');
mDialogCallback(true);
}
}
});
});
var mDialogCallback;
function ShowMsg(msg, callback) {
if (callback == null) {
$('#AlertMessageBody').html(msg);
$('#AlertMessage').dialog('open');
}
else {
mDialogCallback = callback;
$('#ConfirmMessageBody').html(msg);
$('#ConfirmMessage').dialog('open');
}
};
</script>
这样以后使用起来就省些事了:
ShowMsg('是否提交活动信息?', function(yes) {
if (yes) {
}
});
相关文章推荐
- 用JQuery UI dialog实现Alert和Confirm功能
- 自定义浏览器alert ,抛弃掉死板的蓝框 自定义风格提示框。jquey ui bootstrap 实现自定义 alert confirm prompt ,by大崔
- 使用JQueryUI + FreeMarker 实现Div动态DIalog添加和删除
- 为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能。参考"wind"的方法,感谢"wind",感谢 jww测试。(已兼容ie7,8,firefox3.5,chrome4)4)
- jQuery UI dialog实现dialog弹框显示
- [转]jQuery UI Dialog Modal Popup Yes No Confirm example in ASP.Net
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- jquery ui dialog实现弹窗特效的思路及代码
- jquery ui dialog实现弹窗特效的思路及代码
- query ui dialog替代confirm的实现方法
- iframe配合JQueryUI dialog实现登录对话框效果
- me配合JQueryUI dialog实现登录对话框效果
- jQuery UI Dialog 创建友好的弹出对话框实现代码 详细出处参考:http://www.jb51.net/article/30087.htm
- jquery-ui实现bootstrap的modal拖拽功能,弹窗头部拖拽
- CSS实现覆盖弹窗(效果如JQuery-UI的Dialog)
- 为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能。