<div>
<input type="button" value="普通提示" />
<input type="button" value="自动关闭提示" />
<input type="button" value="确认提示" />
<input type="button" value="确认提示2" />
<input type="button" value="打开窗口" />
</div>
相应js代码如下：
复制代码 代码如下:
$(function() {
$("#button1").click(function() {
$.jqalert("这是普通提示！");
});
$("#button2").click(function() {
$.jqtimeralert("这是自动关闭的提示！", "自动关闭提示",
function() {
$.jqalert("时间到");
});
});
$("#button3").click(function() {
$.jqconfirm("确定要这么做吗？", "确认提示",
function() {
$.jqalert("点了确定");
},
function() {
$.jqalert("点了取消");
});
});
$("#button4").click(function(e) {
if ($.confirm(e, "确定要这么做吗？"))
$.jqalert("点了确定");
});
$("#button5").click(function(e) {
$.jqopen("http://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 });
});
});
对于服务器端控件使用confirm，可能需要如下方法：
复制代码 代码如下:
$("#button4").click(function(e) {
if (!$.confirm(e, "确定要这么做吗？")) {
e.stopPropagation();
return false;
}
});
额外再提一下，jQuery UI使用的字体都是以em为单位，可能会导致平常使用时dialog变得比较大，可以额外设置以下样式：
复制代码 代码如下:
body { font-size: 12px; } // 默认字体大小
/*jQuery UI fakes*/
.ui-widget { font-size: 1em; }
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }
这样子，dialog的大小看起来就比较正常了。
在Telerik RadControls for asp.net ajax中使用
主要是针对telerik RadButton控件，定义如下两个函数：
复制代码 代码如下:
// 用于RadButton的confirm确认回调，即触发按钮点击
function radcallback(s) {
return Function.createDelegate(s, function(argument) {
if (argument) {
this.click();
}
});
}
// 用于为RadButton添加confirm提示
function radconfirm2(textOrFn, title, callback) {
return function(s, e) {
$.jqconfirm(textOrFn, title, callback || radcallback(s));
//radconfirm(textOrFn, callback, 280, 50, null, title);
e.set_cancel(true);
};
}
然后可以这样使用：
复制代码 代码如下:
<telerik:RadButton ... OnClientClicking="radconfirm2('确定要这么做吗?')" />
结尾
更多的资料请看jQuery UI Dialog官方演示：。
脚本之家下载地址 https://www.jb51.net/jiaoben/15574.html
本文演示下载 lwme-jquery-ui-dialog-demo.7z
作者：囧月
出处：
您可能感兴趣的文章: