• 动态调用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                         '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 

  • 相关阅读:
    Hive 函数 + Shell编程的具体实践与运用
    Java的MybatisPlus
    这道 SQL 题,你有不一样的解法吗?
    300行代码,教你用Python写个飞机大战
    仅20行代码,实现文件自动化上传。
    位运算算法
    摆脱五彩斑斓的黑,成为七彩程序员!
    项目管理学定律之墨菲定律——怕什么来什么?
    windows10/liunx创建空大文件
    vim处理冲突文件
  • 原文地址:https://www.cnblogs.com/KenChen/p/1526335.html
Copyright © 2020-2023  润新知