DWZ(二):常用组件了解
来源:互联网 发布:飞控编程用什么语言 编辑:程序博客网 时间:2024/06/05 20:40
上篇博客中我们大致明白了DWZ框架,以及它的一些优势,接下来的这篇博客是详细介绍了DWZ框架中一些常用组件的使用。
常用组件列表:
<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>
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框架中的一些组件的使用,接下来用到了继续介绍~
- DWZ(二):常用组件了解
- DWZ(三):常用组件了解
- DWZ(一):框架初了解
- Dwz常用
- ReactNative基础(二)了解组件的生命周期
- ReactNative基础(二)了解组件的生命周期
- DWZ 分页组件
- 常用开源组件包(二)
- apache--common 常用组件实例(二)
- EasyUi常用组件(二)Tree
- 变脸式应用 - 常用组件(二)
- dwz框架常用记录
- dwz 个人学习笔记(二)dialog弹出框
- 网页制作(二)---HTML中的常用布局组件
- 毕设中巩固的技术(二)Bootstrap常用组件实例
- 常用UI组件(widgets)之文本编辑框(EditText)(二)
- JQuery 常用积累(二)Pagination 分页组件
- android开发常用组件和第三方库(二)
- pebble baymax color watchface!
- HTML5 history API,创造更好的浏览体验
- VC下minizip+ZLib 解压文件
- 轻量级的Picture
- spring装配集合
- DWZ(二):常用组件了解
- 兔子--ps中各种工具的作用
- leetcode刷题,总结,记录,备忘 108
- 英文论文中“such as, for example, e.g., i.e., etc., et al. ”的用法分析
- springmvc+velocity+ Rest Services(xml,json)实例
- Android自定义控件---继承Linearlayout
- 揭密extern "C"
- requestWindowFeature使用详解
- qsort