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框架中的一些组件的使用。接下来用到了继续介绍~
DWZ(二):经常使用组件了解的更多相关文章
- Bootstrap入门(二十一)组件15:警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- Bootstrap入门(二十)组件14:警告框
Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...
- DjangoRestFramework学习二之序列化组件、视图组件 serializer modelserializer
DjangoRestFramework学习二之序列化组件.视图组件 本节目录 一 序列化组件 二 视图组件 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组 ...
- 微信小程序 发现之旅(二)—— 自定义组件
组件化的项目开发中,组件应当划分为三个层次:组件.模块.页面 微信小程序已经为开发者封装好了基础组件,页面文件(pages)也有了详细的规定 而模块就需要自行开发,并且要和页面文件区分开,这就涉及到自 ...
- 任务四十二:UI组件之日历组件(三)
任务四十二:UI组件之日历组件(三) 面向人群: 有一定基础的同学 难度: 困难 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及 ...
- Zookeeper 源码(二)序列化组件 Jute
Zookeeper 源码(二)序列化组件 Jute 一.序列化组件 Jute 对于一个网络通信,首先需要解决的就是对数据的序列化和反序列化处理,在 ZooKeeper 中,使用了Jute 这一序列化组 ...
- day 90 DjangoRestFramework学习二之序列化组件
DjangoRestFramework学习二之序列化组件 本节目录 一 序列化组件 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组件 首先按照 ...
- 微信小程序把玩(二十二)action-sheet组件
原文:微信小程序把玩(二十二)action-sheet组件 action-sheet组件是从底部弹出可选菜单项,估计也是借鉴IOS的设计添加的,action-sheet有两个子组件, action-s ...
- 微信小程序把玩(十二)text组件
原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
随机推荐
- IOS手机使用Fiddler抓获HTTPS报文方法
Configure Fiddler Click Tools > Fiddler Options > Connections. Click the checkbox by Allow rem ...
- 隐函数画图with R
隐函数画图 with R 这个函数 sin(xsiny)-cos(ycosx)=0 图是这个样子 怎么用R画出来呢?下面是代码 x<-y<-seq(-10,20,0.1) f<-fu ...
- BOM*创建工艺路线
--工艺路线 DECLARE -- API input variables l_operation_tbl bom_rtg_pub.operation_tbl_type := bom_rtg_pub. ...
- 理解HTTP/304响应
理解HTTP/304响应 原文:http://www.telerik.com/automated-testing-tools/blog/eric-lawrence/12-11-06/understan ...
- Oracle 角色、权限
Oracle 角色管理 一.何为角色 角色:角色是一组权限的集合,将角色赋给一个用户,这个用户就拥有了这个角色中的所有权限.二.系统预定义角色 预定义角色是在数据库安装后,系统自动创建的一些常 ...
- xUtils中用DbUtils,ViewUtils的用法
一.有关xUtils的简介 xUtils 包含了很多实用的android工具.xUtils 最初源于Afinal框架,进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持(10 ...
- android开发新浪微博客户端 完整攻略 [新手必读]
开始接触学习android已经有3个礼拜了,一直都是对着android的sdk文档写Tutorials从Hello World到Notepad Tutorial算是初步入门了吧,刚好最近对微博感兴趣就 ...
- struts2 转发、重定向概述
转发等参数传递的注解方式: @Action(value = "operatorRoleAction", results = { @Result(name = "view& ...
- csrf跨站请求攻击
浅谈CSRF攻击方式 http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html
- 以byte方式讀取SPD的數據(SMBus Controller在PCH中)
Reading A Byte of SMBus EEPROM DataThe following steps have to be followed for the System BIOS to re ...