JQuery ui 实现类似于confirm的功能
实现弹出一个图形化的对话框
//当页面加载完毕时添加一个隐藏的div $( function (){
var boardDiv = "<div id='message' style='display:none;'><span id='spanmessage'></span></div>" ;
$(document.body).append(boardDiv);
}); //只是提示信息alert function message(text) {
$( "#spanmessage" ).text(text);
$( "#message" ).dialog({
title: "企业信息管理系统,提示您" ,
modal: true ,
buttons: {
"确定" : function () {
$( this ).dialog( "close" );
}
}
});
}
//类似于confirm的功能
//说明callback是如果要选择是,要执行的方法
function queren(text, callback) {
$( "#spanmessage" ).text(text);
$( "#message" ).dialog({
title: "企业信息管理系统,提示您" ,
modal: true ,
resizable: false ,
buttons: {
"否" : function () {
$( this ).dialog( "close" );
},
"是" : function () {
callback.call(); //方法回调
$( this ).dialog( "close" );
}
}
});
}
|
使用示例(一个静态删除功能的示例)
1、先引用JQuery库如( <script src="http://www.cnblogs.com/js/jquery-1.4.2.js" type="text/javascript"></script>)
2、在引用JQuery ui库
<link href="../css/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet"
type="text/css" />
<script src="../js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
3、写处理代码
$( "a[delete=true]" ).click(function() {
var id = $( this ).attr( "curId" );
queren( "确认要删除吗?" , function() {
$.post( "productDel.ashx" , { "action" : "delete" , "id" : id }, function(data, status) {
if (data == "ok" ) {
message( "删除成功!" );
$( "a[curId='" + id + "']" ).parent().parent().parent().parent().remove();
}
});
});
});
|
看看效果怎么样(还没有做美工)
----转载请注明出处http://www.cnblogs.com/JerryWang1991/ 谢谢!