前阵子,为了实现动态调用jQuery UI插件 dialog,费劲脑汁,网上也找不到想要的资料,后来还是想了种方式,先将就着用吧,哈哈。
问题很简单,就是 页面上有个链接 注册 ,当点击注册的时候,动态产生一个Dialog,这个实现起来也是没问题,关键是jQuery Dialog有自动缓存的功能,
当用户在弹出的dialog上 要是点击了 注册,那应该清空缓存。具体实现如下:
Code
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
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