动态调用jQuery UI Dialog的实现方式

前阵子,为了实现动态调用jQuery UI插件 dialog,费劲脑汁,网上也找不到想要的资料,后来还是想了种方式,先将就着用吧,哈哈。

问题很简单,就是 页面上有个链接 注册 ,当点击注册的时候,动态产生一个Dialog,这个实现起来也是没问题,关键是jQuery Dialog有自动缓存的功能,

当用户在弹出的dialog上 要是点击了 注册,那应该清空缓存。具体实现如下:


 1 var loginDialog = function(){
 2     var __refactor__ = false;//是否需要重新构建 该对话框
 3     return
 4         open:function(options){
 5              if(__refactor__){
 6                $("#registDialog").remove();               
 7             }
 8             if($("#registDialog").size()>0){
 9                $("#registDialog").dialog("open");
10                return;
11             }
12             
13             var buffer = new stringBulider();
14             buffer.append("<div id='registDialog'>");
15             buffer.append("<div>");
16             buffer.append("<span>您的邮箱:</span><input id='txtRegEmail' type='text' />")
17             buffer.append("</div><div>");
18             buffer.append("<span>您的密码:</span><input id='txtRegPwd' type='password' >");
19             buffer.append("<div><div>");
20             buffer.append("<span>姓:</span><input id='txtRegFirst' type='text' >");
21             buffer.append("<div><div>");
22             buffer.append("<span>名:</span><input id='txtRegSecond' type='text' >");
23             buffer.append("<div><div>");
24             buffer.append("<span>生日:</span><input id='txtRegBirth' type='text' >");
25             buffer.append("<div><div>");
26             buffer.append("<span>昵称:</span><input id='txtRegNick' type='text' >");
27             buffer.append("<div><div>");
28             buffer.append("<div><p></p></div>");   
29             buffer.append("</div>");
30         
31             $(buffer.toString()).appendTo("body");  
32            
33             $("#txtRegBirth").datepicker({
34                 dateFormat:"yy-mm-dd",
35                 beforeShow: function (i, e) { 
36                         var z = jQuery(i).closest(".ui-dialog").css("z-index"+ 4
37                         e.dpDiv.css('z-index', z); 
38                 } 
39             });
40             
41             $("#registDialog").dialog({
42                         autoOpen:false,
43                         closeOnEscape:true,                
44                         width:'400px',
45                         modal:true,
46                         title:"ZD-Ing 注册框",
47                         buttons:{
48                                 "注册":function(){    
49                                         __refactor__ = true;                                   
50                                         
51                                         request.fnName = "registNew";
52                                         request.append($("#registDialog input").map(function(){ return $(this).val(); }).get().join(","));
53                                         
54                                         ajaxHelper.indexAjax(request,function(json){ 
55                                             alert(json.msg);
56                                         });//End Ajax
57                                        } ,
58                                 "取消":function(){                                
59                                         $("#registDialog").dialog("close");
60                                        }
61                         }
62             
63             });  
64             $("#registDialog").dialog("open"); 
65             __refactor__=false;
66            }//function
67     }//open
68 

 

 

 

posted @ 2009-07-19 01:07  Mr K  阅读(2752)  评论(1编辑  收藏  举报