YAHOO工具库(二)
6.5. DataTable
DataTable的引入
<!—需要的CSS -->
build/datatable/assets/datatable.css
<!--必须的引入 -->
build/yahoo-dom-event/yahoo-dom-event.js
<!-- 可选项,用到XHR取数方式时需要 -->
build/connection/connection-min.js
<!—可选项,用到调整列宽时需要 -->
build/dragdrop/dragdrop-min.js
<!-- Source files -->
build/datasource/datasource-beta-min.js
build/datatable/datatable-beta-min.js
DataTable的使用
1.
var
{key:"name",
{key:"stdno",
{key:"age",
];
YAHOO.widget.ColumnSet的属性说明
属性名称 |
含义 |
key |
列的属性名 |
text |
列的显示名称 |
type |
列的类型,包括"string", "number", "date", "currency", "checkbox", "select", "email", "link",缺省为”string” |
resizeable |
Boolean值,是否可通过拖动改变列宽度 |
sortable |
Boolean值,是否可排序 |
abbr |
|
children |
定义子表头,类型为YAHOO.widget.ColumnSet |
width |
列宽度,单位为px |
className |
定义本列单元格的样式名称 |
formatter |
定义本列单元格的格式化函数 function(elCell, |
parse |
|
editor |
定义可编辑的列,可用的值为”textbox”,”textarea” |
descFunction |
递减排序的函数function(a,b) |
ascFunction |
递增排序的函数function(a,b) |
2.
var
"myContainer",
myColumnSet,
myDataSource,
);
DataTable的配置集
属性名称 |
含义 |
caption |
表格的表头文字 |
summary |
表格摘要 |
paginator |
Boolean值,是否分页,缺省为false |
paginatorOptions |
{ containers: rowsPerPage: 每页显示的记录数, pageLinks: 最多显示的页面链接数,0为全部 currentPage:当前页 dropdownOptions:下拉框选择项,null表示不使用下拉框 } |
initialRequest |
XHR方式下,附加的请求参数 |
fixedWidth |
固定表格宽度 |
scrollable |
表格有滚动条,滚动时表格表头保持不动,Boolean值 |
rowSingleSelect |
只允许选择一行,Boolean值 |
contextMenu |
表格的上下文菜单,右键弹出,YAHOO.widget.ContextMenu |
sortedBy |
{colKey:排序的列, |
pageCurrent |
表格的当前页 |
3.
DS_JSArray
以对象数组的方式使用,可以是在客户端定义对象数组,也可以通过DWR的方式调用JAVA的方法获取一个JAVA类的List列表,在回调函数中以数组方式使用。
var commonDataSource = new YAHOO.util.DataSource(data);
//data可以为用javascript定义的对象数组,也可以是DWR方式下回调函数的参数
commonDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
JSON
使用JSON对象时
var myDataSource = new YAHOO.util.DataSource("query.action");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {
resultsList: "result.data",// 结果集所在的JSON结构中的对象
};
XML
var myDataSource = new YAHOO.util.DataSource("query.action");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
myDataSource.responseSchema = {
};
Plain Text Data
var myDataSource = new YAHOO.util.DataSource("query.action");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
myDataSource.responseSchema = {
};
4.
这里主要指通过javascript访问DataTable数据时采用的方式。
var rs = YAHOO.Claim.commonDataTable.getRecordSet();
var obj = rs.getRecord(i);
对象obj的属性就是定义表头时指定的各列的key值,可以通过obj[key值]访问该行上的各列属性值。
5.
6.6. DragDrop
6.7. TreeView
6.8. Container
一组模拟windows控件的组件
Container下的控件继承关系
Overlay |
Module |
ToolTip |
Dialog |
SimpleDialog |
Panel |
Container的引入
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—可选项:如果不使用Dialog/SimpleDialog则不需要 -->
build/connection/connection-min.js
<!—可选项:使用动画效果时用到 -->
build/animation/animation-min.js
<!-- Source file -->
build/container/container-min.js
6.8.1. Container下的控件
由于Container下的控件的创建方式和属性控制方式基本相同,可以在创建组件时通过config对象指定控件的各项属性,也可以在创建后通过myContainer.cfg.setAttribute来设置控件属性,通过对这些属性的控制来实现控件的不同动作表现。因此对于各个子控件的属性在下面采用配置集的方式用一个表格来说明。
Module
一种最基础的控件模块,通过Module可以创建一个从HTML中继承下来的javascript对象,你可以操作页面中的module,也可以动态创建新的module。module是没有预定义样式的,必须手动定义。
使用Module必需的引入
build/yahoo-demo/yahoo-dom-event.js
build/container/container_core-min.js
初始化的方式:
constructor:YAHOO.widget.Module(ModuleId,{配置集});
moduleId如果页面中已经定义了moduleId,则可以直接调用render函数将设置的各种属性直接应用到module上,如果页面中没有定义这个id,则必须调用render(DOM中已经存在的element)将module插入到DOM中。
显示/隐藏Module
方式一:
myModule.show();
myModule.hide();
方式二:
myModule.cfg.setProperty("visible", true);
myModule.cfg.setProperty("visible", false);
配置集的说明
属性名称 |
含义 |
备注 |
visible |
Module是否可见,Boolean值 |
|
monitorresize |
设置是否创建一个不可见的屏幕元素用来监听DOM中文字大小的改变,Boolean值 |
|
6.8.2. Overlay
对Module的一种扩展,但和Module不同的是Overlay可以通过绝对方式定位,并且是浮动窗口,不会影响页面中原有的内嵌标签的布局。与Module相同的是:也没有预先定义样式,必须手动设置。
初始化的方式
与Module相同
位置设定
1.绝对定位:
myOverlay.cfg.setProperty("x", 100);
myOverlay.cfg.setProperty("y", 200);
myOverlay.cfg.setProperty("xy", [100,200]);
2.居中
窗口中居中:myOverlay.center();
屏幕居中:myOverlay.cfg.setProperty("fixedcenter", true);
3.对齐
// myOverlay's右上角对齐myContextEl的左上角
myOverlay.cfg.setProperty("context", ["myContextEl", "tr", "tl"]);
设置过对齐方式后可以直接使用align来改变对齐方式
// myOverlay's 右上角对齐 "myContextEl"'s 左下角.
myOverlay.align("tr", "bl");
注:对齐方式的写法: top->t ,left ->l, ,bottom->,right->r
top-left 就表示为tl
配置集
属性名称 |
含义 |
x |
设置元素的left属性 |
y |
设置元素的top属性 |
xy |
设置元素的top,left属性 |
context |
停靠位置,[element, Overlay的顶角, 被停靠的element顶角] |
effect |
当Overlay显示或隐藏时的特效对象. |
fixedcenter |
窗口大小改变或滚屏时保持居中 |
width |
设置元素的width |
height |
设置元素的height |
zIndex |
设置Overlay的遮盖顺序 |
constraintoviewport |
设置为true时保持在视窗边界以内 |
iframe |
设置为true时在Overlay后将存在一个ifram,防止被Z序高的element覆盖 |
已知的特效:
YAHOO.widget.ContainerEffect.SLIDE
YAHOO.widget.ContainerEffect.FADE
OverlayManage
用于管理多个Overlay的组件,能够模拟类似于多窗口管理系统的交互,使得各个Overlay之间的能够正确的覆盖、获得焦点/失去焦点。
使用这一功能需要的代码很简单,只需要通过register方法登记所有需要纳入窗口管理的Overlay就可以了。
//示例:
YAHOO.namespage(“demo”);
YAHOO.demo.manager = new YAHOO.widget.OverlayManager();
YAHOO.demo.manager.register( [Overlay的数组列表] );
6.8.3. Tooltip
对象定义:YAHOO.widget.Tooltip
从overlay上扩展出来的控件,小的浮动窗口,动态生成,提供了预定义的样式。
Tooltip的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—如果要改变页面元素的属性需要引入-->
build/animation/animation-min.js
<!-- Source file -->
build/container/container-min.js
Tooltip初始化方式
constructor:YAHOO.widget.Tooltip(tooltipId , { 配置集 } );
tooltipId可以是页面中未声明的控件。
Tooltip配置集
属性名称 |
含义 |
text |
提示文字 |
context |
鼠标停靠element ID |
container |
缺省为document.body,指明容器元素 |
preventoverlap |
缺省为true,指明是否使用覆盖方式 |
showdelay |
显示tooltip的延迟时间,单位毫秒 |
hidedelay |
隐藏tooltip的延迟时间,单位毫秒 |
autodismissdelay |
The number of milliseconds to wait before automatically dismissing a Tooltip after the mouse has been resting on the context element. |
同时还继承了Module,Overlay的所有属性
6.8.4. Panel
从overlay扩展出来的一个组件,类似于操作系统的窗口。他不同于浏览器的弹出窗口,是内嵌在页面文件中的一种动态Html的element。他在overlay的基础上扩展了一些窗口的功能,如关闭、拖放等。Panel使用了预定义的样式表
Panel的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—可选项:如果用到动画时需要引入 -->
build/animation/animation-min.js
<!—可选项:如果用到拖放时需要引入-->
build/dragdrop/dragdrop-min.js
<!-- Source file -->
build/container/container-min.js
Panel的初始化
constructor:
YAHOO.widget.Panel(panelId); //使用缺省配置选项
YAHOO.widget.Panel(panelId,{自定义的配置项});
Panel的配置集
属性名称 |
含义 |
close |
是否显示关闭按钮,true/false |
draggable |
是否可以拖动 |
underlay |
阴影显示方式 shadow,none,matte,缺省为shadow,none为无阴影,matte为白色边界 |
modal |
Panel获得焦点时,是否允许使用Panel以外的控件获得焦点,类似于MFC的模态/无模态对话框 |
keylisteners |
响应按键事件的监听器列表 |
Panel同时还继承了Module,Overlay的属性
6.8.5. Dialog
从Panel上扩展出来的组件,类似于Windows的窗口,在浏览器中提供了一种不用页面跳转就能使用交互来获取用户输入的交互方式,用户输入的数据都是通过一个标准的HTML Form获取的,并支持多种的获取输入数据的方式:普通的Form的提交,XMLHttpRequest,或者完全通过脚本来读取。
Dialog的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—可选项: Animation (only required if enabling Animation) -->
build/animation/animation-min.js
<!—可选项: Drag & Drop (only required if enabling Drag & Drop) -->
build/dragdrop/dragdrop-min.js
<!--可选项: Connection (only required if performing asynchronous submission) -->
build/connection/connection-min.js
<!-- Source file -->
build/container/container-min.js
Dialog的初始化
constructor:YAHOO.widget.Dialog(dialogId);
dialogId为页面中已经申明的element
Dialog的配置集
属性名称 |
含义 |
postmethod |
窗口提交的方式,async:异步,form:标准的submit,none:不提交 |
buttons |
dialog中的button数组列表, |
同时继承了Overlay,Panel的属性
单个按钮对象的定义方式:
handler:按钮的click事件响应函数
isDefault:是否缺省按钮},
6.8.6. SimpleDialog
从Dialog上扩展出来的一个组件,主要用于处理用户选择Yes/NO,OK/Cancel的交互
SimpleDialog的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—可选项:用到动画效果时使用 -->
build/animation/animation-min.js
<!—可选项:用到拖放功能时使用-->
build/dragdrop/dragdrop-min.js
<!—可选项:用到异步提交方式时使用) -->
build/connection/connection-min.js
<!-- Source file -->
build/container/container-min.js
SimpleDialog的初始化
constructor:YAHOO.widget.SimpleDialog(dialogId,{配置集});
dialogId为页面中已经申明的element
SimpleDialog的配置集
属性名称 |
含义 |
text |
对话框中显示的提示信息 |
icon |
按钮图标: ICON_BLOCK, ICON_WARN, ICON_HELP, ICON_INFO, ICON_ALARM, ICON_TIP. |
6.9. Grids
支持不规定宽度的设计
一组用于定义界面版式的样式表(CSS文件)
6.10. TabView
用来创建导航tab栏组件
可以从HTML中的已经存在的标签来创建,也可以完全通过javascript创建,该组件的最上层元素为<div>,每一个tab页面项使用<li>
TableView的引入
<!-- Dependencies -->
<!-- core CSS -->
/build/tabview/assets/tabview.css
<!-- optional skin for border tabs -->
build/tabview/assets/border_tabs.css
build/yahoo-dom-event/yahoo-dom-event.js
build/element/element-beta-min.js
<!—可选项: 使用动态加载时使用-->
build/connection/connection-min.js
<!-- Source file -->
build/tabview/tabview-min.js
TableView的初始化
constructor:YAHOO.widget.TabView(tableViewId);
创建的方式:
1.页面中存在id
<div id="demo" class="yui-navset">
</div>
注:
yui-navset为css文件中定义的TableView的样式
yui-nav为css文件中定义的Tab页标签的样式
2.完全使用JavaScript创建TabView
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>
TableView的配置集
属性名称 |
含义 |
activeIndex |
当前激活的Tab页面编号,第一页为0 |
activeTab |
YAHOO.widget.Tab,指向被激活的Tab页, |
element |
被绑定的HTML元素 |
orientation |
页面标签所在的位置,top,bottom,left,right 默认为top |
tabs |
标签页(Tab)的数组列表,只读 |
Tab的配置集
属性名称 |
含义 |
active |
当前Tab页面是否激活,Boolean值 |
cacheData |
Tab页加载数据的时候是否隐藏,只有dataSrc可用的时候有效 |
content |
激活页面的文字标签 |
contentEl |
|
dataLoaded |
数据是否加载完成 |
dataSrc |
如果设置了这一属性,当Tab页被激活时,页面数据从这个URL处加载,需要用到Connection Manager |
dataTimeout |
Tab页加载的超时时间,单位微秒,只有在设置了dataSrc才有效 |
disabled |
是否禁止激活本Tab页,缺省为false |
label |
Tab页的标签 |
labelEl |
Tab页的HTML容器元素 |
loadMethod |
数据请求的方式,缺省为GET,只有在设置了dataSrc才有效 |
TabView用到的CSS定义
Class |
描述 |
yui-navset |
TabView的<div> |
yui-nav |
TabView的<ul> |
yui-content |
TabView的<div>的下一级<div> |
disabled |
Tab页面不可用时的样式,应用在<ul>上 |
selected |
Tab页面激活时的样式,应用在<ul>上 |
loading |
Tab页面加载时的样式,TabView的<div>的下一级<div>的样式 |
7. 常见问题
7.1. YUI提供的javascript的文件引入
关于引入的版本:
YUI对于需要引入的js文件都提供了多个版本:
1
2
3
4
yahoo-dom-event.js是包含了yahoo.js,dom.js,event.js的内容,使用了前者后就无需再引入后面三个文件。
关于引入的顺序:
1.大部分组件都是依赖于事件驱动,并通过YUI提供的工具集进行DOM操作的,因此yahoo.js,dom.js,event.js或者这三个文件的合成文件yahoo-dom-event.js必须早于其他YUI的js文件引入
2.Autocomplete如果需要从服务器取数据时,要用到YUI提供的datasource.js,因此datasource.js必须在autocomplete.js之前引入;如果是以XHR(JSON,XML等)的方式取数,还要用到YUI提供的connection,因此connection.js也必须在autocomplete.js之前引入;如果用到了动画方式展开下拉框,则需要保证animation.js在autocomplete.js之前引入。
3.Datatable中列宽度的调整,Container组件中的Overlay以及从Overlay继承下来的Dialog,SimpleDialog的窗口拖动,需要用到dragdrop.js,因此dragdrop.js必须在datatable.js和container.js之前引入;如果要用到Dialog的动画显示效果,则需要先引入animation.js。
YAHOO工具库(二)相关推荐
- YAHOO工具库提供的方法
From : http://zuozheng456.blog.163.com/blog/static/23690056200921044354522/ 1.1 YAHOO工具库提供的方法 2009-0 ...
- JavaScript进阶学习(二)—— 基于原型链继承的js工具库的实现方法
文章来源:小青年原创 发布时间:2016-07-03 关键词:JavaScript,原型链,jQuery类库 转载需标注本文原始地址: http://zhaomenghuan.github.io... ...
- Python可视化库——plotnine学习和基本使用(二):theme工具库的介绍
其他参数和工具库 主题库和工具库基本语法 主题theme_ 工具库theme 主题库和工具库基本语法 主题theme_ 主要用来修改绘图的背景主题 基本语法 Value theme_bw 黑色网格线白 ...
- Python-EEG工具库MNE中文教程(10)-信号空间投影SSP数学原理
目录 projector(投影)和投影背景 案例解释投影原理 导入工具库 什么是projector(投影)? 计算正交平面 使用SVD计算投影矩阵 本分享为脑机学习者Rose整理发表于公众号:脑机接口 ...
- Android开源项目第二篇——工具库篇
本文为那些不错的Android开源项目第二篇--开发工具库篇,主要介绍经常使用的开发库,包含依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本号向低版本号 ...
- Android 开源项目android-open-project工具库解析之(一) 依赖注入,图片缓存,网络相关,数据库orm工具包,Android公共库...
一.依赖注入DI 通过依赖注入降低View.服务.资源简化初始化.事件绑定等反复繁琐工作 AndroidAnnotations(Code Diet) android高速开发框架 项目地址:https: ...
- Licia:最全最实用的 JavaScript 工具库
前言 在业务开发过程中,我们经常会重复使用日期格式化.cookie 操作.模板.浏览器判断.类型判断等功能.为了避免不同项目之间进行复制粘贴,可以将这些常用的函数封装到一起并发布 npm 包.在将近三 ...
- 用JS轻松实现一个录音、录像、录屏工具库
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- 60+ 实用 React 工具库,助力你高效开发!
大家好,我是若川.持续组织了5个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
最新文章
- Linux实现ffmpeg H.265视频编码
- Js中substr,substring,slice截取字符串的异同
- mysql grant %_MySQL的Grant命令详解
- python怎么返回最初_Python 函数为什么会默认返回 None?
- redis VS kafka
- LeetCode MySQL 1398. 购买了产品A和产品B却没有购买产品C的顾客
- C# 操作符重载 模拟String
- 如何用python删除异常值_Python机器学习:异常值查找和处理
- Oracle触发器6-管理触发器
- SecureCRT 中文显示乱码
- Javascript 检查对象是否含有这个属性
- oracle扩容temp表空间,解决oracle临时表空间的报错
- redis命令之哈希表类型lpush命令用法详情
- EDM营销常见问题之邮件被退回原因剖析
- openwrt路由表设置_OpenWrt路由器常用设置
- 【计算机毕业设计】137欢迪迈手机商城设计与实现
- Flash、EEPROM、SRAM的区别与理解
- 服务器添加html扩展,html5 – 服务器可扩展性 – HTML 5 websockets和彗星
- 先验概率、后验概率以及共轭先验
- Exp 8 Web基础 20164318 毛瀚逸
热门文章
- mw如何解读_实情测评猫王收音机mw-2与mw-2a哪个好?分析区别怎么样?使用六周后体验分享...
- 电竞桌什么牌子好?哪个电竞桌好看
- 怎么在html页面中加入图片不显示,html – 如何在网页上显示本地图片?
- Packet Tracer思科企业组网实例
- html txt doc pdf区别,HTML、PDF文件格式转换工具一览doc
- 面试题:JVM垃圾收集器
- PLSQL分字符串转数组
- Kronos银行木马的前世今生
- Codeforces Round #830 (Div. 2) B. Ugu 解题报告
- 今日黄历:宜智能开房,周到又优雅