dwz 个人学习笔记（二）dialog弹出框

dwz这个框架在navTab封装的很好，这里先不做太多。主要难点还是在dialog弹出框这里，但是你会发现基本方法也一样。参数来来去去就这几种，其实如果你理解了这些，可以随时重写回调函数，可以适用任何情况

<a href="abc"  target="dialog" rel="GAA">修改</a>

 target：

     ajax：发送ajax请求并返回到容器；

     ajaxTodo：在ajax基础上增加一个选择对话框（需要title属性）；

     navTab：返回到类似选项卡组件上；

     dialog：返回到对话框组件上；

  dwzExport：导出文件用；

         rel：下一个页面的dialogId或navTabId,注意这个唯一的

        callback：回调函数；

（一）打开一个弹窗

       （1） $.pdialog.open(url,dialogId,title);

       （2） $.pdialog.open(url,dialogId,title.options);

      options:{width:100,height:100,max:true,mask:true,mixable:true,minable:true,resizable:true,drawable:true,fresh:true,close:”function”, param:”{msg:’message’}”}

所有参数都是可选项。options很好用，可以设置弹窗的大部分属性，页面样式之类的有一些在弹窗的页面调整，基本上可以满足所有需求。

   Max：属性表示此dialog打开时默认最大化；
   mask：表示打开层后将背景遮盖；
   maxable: 是否可最大化；
   minable: 是否可最小化；
   mixable: 是否可最大化 ；
   resizable: 是否可变大小；
   drawable: 是否可拖动 ；
   width: 打开时的默认宽度 ；
   height: 打开时默认的高度；
   width,height: 分别打开dialog时的宽度与高度；
   fresh: 重复打开dialog时是否重新载入数据，默认值true；
   close: 关闭dialog时的监听函数，需要有boolean类型的返回值，true关闭；
   param:close监听函数的参数列表，以json格式表示，例{msg:’message’}；

        （3）$.pdialog.reload(url,data,dialogId);重新加载某个弹窗

（二）关闭一个弹窗

        （1）$.pdialog.close(dialogId);根据dialogId，关闭制定弹窗

        （2）$.pdialog.closeCurrent();关闭当前活动层

（三）提示窗口

   确认提示框

alertMsg.confirm("您修改的资料未保存，请选择保存或取消！", {
               okCall: function(){
                   $.post(url, {accountId:accountId}, DWZ.ajaxDone, "json");
               }, 
               cancelCall : function() {}
 });

 成功提示框，alertMsg.correct('您的数据提交成功！')
错误提示框，alertMsg.error('您提交的数据有误，请检查后重新提交！', [options])
警告提示框，alertMsg.warn('您提交的数据有误，请检查后重新提交！', [options])
信息提示框，alertMsg.info('您提交的数据有误，请检查后重新提交！', [options])
options对象属性：是跟dialog通用的
okName：确定按钮名称；
okCal：确认按钮回调；
cancelName：取消按钮名称；
cancelCall：取消按钮回调；
keyCode：键盘按键定义，参考DWZ.keyCode；

（四）例子：

页面

<li><a class="delete"   href="${pageContext.request.contextPath }/deleteAreaInfoByAreaId?areaId={area_id}" target="ajaxTodo" title="确定要删除吗?"
fresh="true" callback="dialogAjax"><span>删除区域</span></a></li>

  js

//调用刷新当前dialog的方法
function dialogAjax(json){
      $.pdialog.reloadDialog("marker");
}

在 dwz JS里，dwz.dialog.js加入以下代码

reloadDialog:function(dialogId){
        var dialog = $("body").data(dialogId);
        if(dialog){
                $.pdialog.reload(dialog.data("url"),{dialogId:dialogId});
       }
},

（五）提个引子，下篇主要总结，怎么修改DWZ的JS方法到达实际项目的需求，这是以下后台返回JSON，和JS里属性对应的关系，根据这个判定关系，可以灵活

             的修改DWZ的JS以达到目的。用了一个月这个DWZ,感觉活学活用才是硬道理啊！

"statusCode"  json.statusCode
"message":"    json. message
"navTabId":  json. navTabId
"rel":   json.rel     
"callbackType":  json.callbackType
"forwardUrl" json.forwardUrl
"confirmMsg": json.confirmMsg