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