6.4. AutoComplete
用户在文本输入框中输入文字时，该组件通过输入的内容查找符合输入条件的内容，并显示出所有符合条件的内容，供用户能够很快的完成正确的输入。
AutoComplete的引入
<!-- 必须引入 -->
build/yahoo-dom-event/yahoo-dom-event.js
<!-- 可选: Connection(用到 XHR数据源时需要的引入) -->
build/connection/connection-min.js
<!--可选: 用到动画效果时需要的引入 -->
build/animation/animation-min.js
<!-- Source file -->
build/autocomplete/autocomplete-min.js
控制AutoComplete的配置集
| 属性名称 | 含义 | 备注 |
| animVert | 控制下拉框向下展开的动画效果 |
|
| animHoriz | 控制下拉框水平方向展开的动画效果 |
|
| animSpeed | 控制动画的速度 |
|
| delimChar | 一行显示多条记录时的分隔符，可以是字符串数组或字符串 |
|
| maxResultsDisplayed | 结果集的最大显示行数 |
|
| minQueryLength | 进行查询前的输入的字符个数 |
|
| queryDelay | 用户键入字符后多少秒开始查询，默认0.5 |
|
| autoHighlight | 查询出来的结果集显示后，是否高亮显示第一条，默认为true |
|
| highlightClassName | 高亮显示的样式名，默认为yui-ac-highlight |
|
| prehightlightClassName | 鼠标移动到下拉框的一行上时，那一行的样式，默认为yui-ac-prehighlight |
|
| useShadow | 下拉框是否有阴影 |
|
| useIFrame | 下拉框欠套在一个iframe中，用于解决IE中覆盖<select>的问题 |
|
| forceSelection | 限制输入内容必须为查询结果中的内容，如果不是则输入内容被删除 |
|
| typeAhead | 是否自动根据查询结果的第一条补齐到autocomplete中 |
|
| allowBrowserAutocomplete | 是否允许浏览器提供的输入框记忆功能，默认为false |
|
| alwaysShowContainer | 是否始终显示查询结果的下拉框，默认为false |
|
AutoComplete的使用
1 自定义事件(CustomEvent)
AutoComplete除了默认的事件外，还有自定义的事件，以下为AutoComplete用到的各种CustomEvent
| 事件回调函数 | 含义 | 备注 |
| textboxFocusEvent | 输入框获得焦点的事件 | textboxFocus |
| textboxKeyEvent | 按键弹起时的事件 | textboxKey |
| dataRequestEvent | 发出数据查询请求时的事件 | dataRequest |
| dataReturnEvent | 数据查询请求返回时的事件 | dataReturn |
| dataErrorEvent | 返回结果为空时的事件 | dataError |
| containerExpandEvent | 展开下拉框时的事件 | containerExpand |
| typeAheadEvent | 符合条件的结果自动用到第一条记录补齐时的事件 | typeAhead |
| itemMouseOverEvent | 鼠标移动到结果项上的事件 | itemMouseOver |
| itemMouseOutEvent | 鼠标移出结果项的事件 | itemMouseOut |
| itemArrowToEvent | 移动到某一选择项时的事件 | itemArrowTo |
| itemArrowFromEvent | 移出某一选择项时的事件 | itemArrowFrom |
| itemSelectEvent | 选中某一选择项的事件 | itemSelect |
| unmatchedItemSelectEvent | forceSelection为false时，如果输入了不符合查询结果的内容时触发本事件。 | unmatchedItemSelect |
| selectionEnforceEvent | 强制从结果集中选择输入项时触发的事件 | selectionEnforce |
| containerCollapseEvent | 下拉框收缩时的事件 | containerCollapse |
| textboxBlurEvent | 输入框失去焦点时的事件 | textboxBlur |
可以根据需要重载自定义的事件
例：输入框获得焦点时自动进行查询，可以重载textboxFocusEvent
myAutoComp.textboxFocusEvent.subscribe(
//发送一个查询条件为空的查询请求
function(){myAutoComp.sendQuery("");}
);
2 格式化下拉框的输出
如果返回的结果集中有多个属性，可以通过重载formatResult来格式化结果项的输出
oAutoComp.formatResult = function(oResultItem, sQuery) {
var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")" ;
return (sMarkup);
}
3 AutoComplete的数据源
l DS_JSArray
data = ["AAA","BBB","BCC"];
var myDataSource = new YAHOO.widget.DS_JSArray(data);
可以通过DWR的方式调用java方法获得一字符串数组作为查询的下拉框，并在回调函数中可以直接使用，如：
l DS_JSFunction
l DS_XHR
对于JSArray方式取数时，AutoComplete可以自动根据输入的内容查在JSArray中查找符合条件的结果项，但在使用XHR方式时，YUI并没有提供默认的查找功能，必须由用户通过控制URL参数方式来实现这一功能。
JSON方式：
使用JSON格式时，创建数据源YAHOO.widget.DS_XHR时第一个参数为请求的URL，第二个参数为一数组，这一数组的第一条记录表示结果集在JSON对象的哪个对象属性下，如类似于下面结构的JSON对象
{
Result:{
data:[ {username:”Tom”,oldname:”Tom”,age:12”},
{username:”Jack”,oldname:”Jack”,age:16”}
]
}
}
如果是要查询username则结果集应该表示为”Result.data”，
第二条记录为搜索的主键，同上面的例子中如果是要查找出符合条件的username，则第二个数组应为”username”,如果返回的结果集中还需要返回oldname属性，则应该指名数组的第三条记录”oldname”,后面还可以指定更多的需要返回的属性。
因此第二个数组对象参数可以用以下方法表示：
[结果对象,搜索的主键,额外的返回属性1,…额外的返回属性N]
function initAutocomplete(){
var myDataSource1 = new YAHOO.widget.DS_XHR(
"./queryUsername.action",
["data","username"]);
myDataSource1.responseType = YAHOO.widget.DS_XHR.TYPE_JSON;
//myDataSource1.scriptQueryAppend = "output=json&results=100";
var oAutoComp = new YAHOO.widget.AutoComplete("user_username",
"usernameContainer", myDataSource1);
oAutoComp.dataRequestEvent.subscribe(
function(oSelf,sQuery){
myDataSource1.scriptQueryParam = "username";
});
}
XML方式：
应用方式与JSON方式类似，只是将reponseType指定为
myDataSource1.responseType = YAHOO.widget.DS_XHR.TYPE_XML
FlatData方式：
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 myColumnHeaders = [
{key:"name", text:"姓名"},
{key:"stdno", text:"学号"},
{key:"age", text:"年龄", type:"number"}
];
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, oRecord, oColumn, oData) |
| parse |
|
| editor | 定义可编辑的列，可用的值为”textbox”，”textarea” |
| descFunction | 递减排序的函数function(a,b) |
| ascFunction | 递增排序的函数function(a,b) |
2. 创建datatable
var myDataTable = new YAHOO.widget.DataTable(
"myContainer", //datatable绑定的页面element(DIV)
myColumnSet, //表头定义, YAHOO.widget.ColumnSet
myDataSource, //数据源
{caption:"My Caption",summary:"摘要"} //datatable的配置集
);
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：排序的列, dir: 排序的方向，"desc"和"asc" } |
| pageCurrent | 表格的当前页 |
3. DataTable的数据源
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结构中的对象
fields: ["id","username","email","monicker","edit","del"]
};
XML
var myDataSource = new YAHOO.util.DataSource("query.action");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
myDataSource.responseSchema = {
resultNode: "Item", // 结果集所在的XML结构中的结点
fields: ["Company","Title","Name","Phone","Email"] //表格的列
};
Plain Text Data
var myDataSource = new YAHOO.util.DataSource("query.action");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;
myDataSource.responseSchema = {
recordDelim: "\n", // 记录的分割符
fieldDelim: ",", // 字段的分割符
fields: ["Company","Title","Name","Phone","Email"] //表格的列
};
4. DataTable数据的访问
这里主要指通过javascript访问DataTable数据时采用的方式。
var rs = YAHOO.Claim.commonDataTable.getRecordSet();
var obj = rs.getRecord(i); //获取第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的属性
单个按钮对象的定义方式：
{ text:按钮上的文本,
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">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
注：
yui-navset为css文件中定义的TableView的样式
yui-nav为css文件中定义的Tab页标签的样式
2． 完全使用JavaScript创建TabView
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
myTabs.addTab( new YAHOO.widget.Tab({
label: 'Tab One Label',
content: '<p>Tab One Content</p>',
active: true
}));
myTabs.addTab( new YAHOO.widget.Tab({
label: 'Tab Two Label',
content: '<p>Tab Two Content</p>'
}));
myTabs.appendTo(document.body);
</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>的样式 |
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
