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/ 谢谢！