[转]JQuery ui 实现类似于confirm的功能

本文转自：http://www.cnblogs.com/JerryWang1991/archive/2011/08/04/2127503.html

今天在改进参加一个全国比赛的项目作品时，发现使用了大量的alert和comfirm，于是自己想实现了弹出一个图形化的对话框，这样会变的非常友好，因为时间不多，直接黏贴代码，分享一下

//当页面加载完毕时添加一个隐藏的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/ 谢谢！