DWZ（二）：经常使用组件了解

       上篇博客中我们大致明确了DWZ框架。以及它的一些优势，接下来的这篇博客是具体介绍了DWZ框架中一些经常使用组件的使用。

       经常使用组件列表：

       Ajax 链接扩展

    <a href=”xxx” target=“ajax” [rel=“boxId”]>

演示样例: <a href="w_alert.html" target="ajax" rel="container">提示窗体</a>

  当前 navTab 中链接 ajax post 扩展

<a href="user.do?

method=remove" target="ajaxTodo">删除</a>

    或<a href="user.do?

method=remove" target="ajaxTodo" title="确定要删除吗?">删除</a>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3VubGlkdWFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" width="403" height="167">

Title 为可选项。假设设置。点击后将调用 alertMsg.confirm 与用户交互确认或取消，Title 值为提示信

息.Target 值为 ajaxTodo 时会自己主动关联例如以下 JS。

       dialog 链接扩展

      <a href=”xxx” target=“dialog” [rel=“dialogId”]>

       a 所指向页面将会在 dialog 弹出层中打开。rel 标识此弹出层的 ID，rel 为可选项。

Html 标签扩展方式演示样例:

       <a href="w_dialog.html" target="dialog" rel="page2">弹出窗体</a>

       或<a href="demo_page1.html" target="dialog" [max=true, mask=true, maxable=true, minable=true,

resizable=true,drawable=true] rel="dlg_page1" title="[自己定义标题]" width="800" height="480">打开窗体一</a>



        Max 属性表示此dialog打开时默认最大化, mask表示打开层后将背景遮盖.

maxable:dialog 是否可最大化。

        minable:dialog 是否可最小化。

        mixable:dialog 是否可最大化

        resizable: dialog 是否可变大小

        drawable: dialog 是否可拖动

        width:dialog 打开时的默认宽度

        height:dialog 打开时默认的高度

        width,height分别打开dialog时的宽度与高度．

        fresh:反复打开dialog时是否又一次加载数据，默认值true,

        close:关闭dialog时的监听函数。须要有boolean类型的返回值。

        param:close监听函数的參数列表。以json格式表示，例{msg:’message’}

        关闭窗体：在弹出窗体页面内放置<button class="close" value="关闭"></button>就可以。

JS 调用方式演示样例:

       $.pdialog.open(url, dlgId, title);

       或$.pdialog.open(url, dlgId, title, options);

       options:{width:100px,height:100px,max:true,mask:true,mixable:true,minable:true,resizable:true,drawable:true,fresh:true,close:”function”, param:”{msg:’message’}”}, 全部參数都是可选项。

关闭dialog层：$.pdialog.close(dialog); 參数dialog能够是弹出层jQuery对象或者是打开dialog层时的dlgId.

或者$.pdialog.closeCurrent(); 关闭当前活动层。

$.pdialog.reload(url,data,dlid) 刷新dlid指定的dialog，url：刷新时可又一次指定载入数据的url, data：为

载入数据时所需的參数。

navTab 链接扩展

       <a href=”xxx” target=“navTab” [rel=“tabId”]>

       演示样例:

        <a href="url" target="navTab" >默认页面</a>

        <a href="url" target="navTab" rel="page1" title="自己定义标签名" fresh="false">自己定义页面</a>

        <a href="url" target="navTab" external="true">iframe 方式打开</a>

target=navTab: 自己主动关联调用 navTab 组件

        rel: 为 navtab 的 ID 值。兴许能够用来重载该页面时使用，如当前页新增或删除数据能够通过该 ID 进行通知 JS

重载。注意 rel 的值区分大写和小写.

        fresh: 表示反复打开 navTab 时是否又一次载入数据

        external: 为 external="true"或者 href 是外网连接时，以 iframe 方式打开 navTab 页面

 
Js 调用

        navTab.openTab(tabid, url, { title:”New Tab”, fresh:false, data:{} });

        当中 data:{} json 格式的数据

        Tab 组件扩展

        开发者不需写不论什么 javacsript, 仅仅要使用以下的 html 结构就能够.

        

         容器高度自适应

         容器高度自适应, 仅仅要添加扩展属性 layoutH=”xx”, 单位是像素.

         LayoutH 表示容器内工具栏高度. 浏览器窗体大小改变时容器高度自适应, 但容器内工具栏高度是固定的, 须要告诉js 工具栏高度来计算出内容的高度.

         演示样例:

         <div class=”layoutBox”>

                 <div layoutH=“150”>内容</div>

         </div>

         注意： layoutH=“150”的高度是依据含有 class=”layoutBox”的父容器 div 动态更新的.

        仅仅是DWZ框架中的一些组件的使用。接下来用到了继续介绍~