dwz 个人学习笔记(二)dialog弹出框

来源:互联网 发布:mac如何更新系统版本 编辑:程序博客网 时间:2024/03/29 14:35

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

                                             <script type="text/javascript">
                                                  //调用刷新当前dialog的方法
                                                function dialogAjax(json){
                                               $.pdialog.reloadDialog("marker");
                                                       }
                                                 </script>

                             在 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



原创粉丝点击