JSYUI中文说明.docx

JSYUI中文说明.docx

《JSYUI中文说明.docx》由会员分享，可在线阅读，更多相关《JSYUI中文说明.docx（39页珍藏版）》请在冰豆网上搜索。

JSYUI中文说明

分享

Ø事件源对象event.srcElement.tagName◆event.srcElement.type

Ø捕获释放event.srcElement.setCapture（）; ◆ event.srcElement.releaseCapture（）;  

Ø事件按键event.keyCode◆event.shiftKey◆event.altKey◆event.ctrlKey

Ø事件返回值event.returnValue

Ø鼠标位置event.x◆event.y

Ø窗体活动元素document.activeElement

Ø绑定事件document.captureEvents（Event.KEYDOWN）;

Ø访问窗体元素document.all（"txt"）.focus（）;◆document.all（"txt"）.select（）;

Ø窗体命令document.execCommand

Ø窗体COOKIEdocument.cookie

Ø菜单事件document.oncontextmenu

Ø创建元素document.createElement（"SPAN"）;  

Ø根据鼠标获得元素：

document.elementFromPoint（event.x,event.y）.tagName=="TD◆document.elementFromPoint（event.x,event.y）.appendChild（ms）  

Ø窗体图片document.images[索引]

Ø窗体事件绑定document.onmousedown=scrollwindow;

Ø元素document.窗体.elements[索引]

Ø对象绑定事件document.all.xxx.detachEvent（'onclick',a）;

Ø插件数目navigator.plugins

Ø取变量类型typeof（$js_libpath）=="undefined"

Ø下拉框下拉框.options[索引]◆下拉框.options.length

Ø查找对象document.getElementsByName（"r1"）;◆document.getElementById（id）;

Ø定时timer=setInterval（'scrollwindow（）',delay）;◆clearInterval（timer）;

ØUNCODE编码escape（）,unescape

.    YAHOO工具库提供的方法

●        namespace

用于创建一个全局的命名空间，使用YUI时，首先会自动创建widget,util,example三个命名空间，使用时也可以自定义命名空间。

类似于在程序中建了了一个static变量。

●        lang

javascript扩展的语言工具，用于判别对象的类型。

●        lang.extend

用于从一个对象上扩展出另一个对象，模拟了类的继承的方式，但不同的是，在创建子对象时，父对象的构造函数不会自动调用。

父对象的引用存放在了子对象的supperclass中，构成了一个链状继承关系。

在2.2.2的版本中，YAHOO.lang.extend和YAHOO.extend指向同一函数对象。

●        lang.augment

将一个对象的属性（部分或全部）复制到另一个对象，但并非真正意义上的复制，只是一种引用。

YAHOO.augment=YAHOO.lang.augment。

●        log

用来调试的一个工具，将信息显示到log控件。

●        env

环境信息和YUI组件信息

●        YUI_config.listener

可以定义自己的回调函数，当有新的YUI组件加载到页面时将会调用YUI_config.listener指向的函数。

2.           YUI提供的Dom操作

特点：

对于大部分DOM操作提供了批量操作的功能，而对用户只需使用统一的函数接口就能完成单个或批量的操作，主要得益于DOM内部的batch方法。

2.1.    Element的查找

YAHOO.util.Dom.get（element）

调用document.getElementById（element），获取指定的页面元素。

YAHOO.util.Dom.getElementsBy（method,tagName,rootNode）

在rootNode的子节点中按照用户提供的method方法在所有标签为tagName的element中查找符合条件的节点。

rootNode不指定则在整个Document中查找，method是一个method（elementID）类型的函数对象，该函数对象的返回值为Boolean值。

YAHOO.util.Dom.getElementsByClassName（className,tagName,rootNode）

返回指定根节点下所有标签为tagName,class为className的DOM节点数组。

根节点为可选参数，不指定时在整个页面中查找

YAHOO.util.Dom.inDocument（el）

判断元素el是否在当前的DOM中，支持批量操作。

2.2.    样式控制和访问

YAHOO.util.Dom.hasClass（element,className）

判断element标签上是否指明了className的class，支持批量操作

YAHOO.util.Dom.addClass（element,className）

给指定标签增加名为className的class，支持批量操作.

YAHOO.util.Dom.removeClass（element,className）

删除element上的名为className的class，支持批量操作

YAHOO.util.Dom.replaceClass（element,oldClassName,newClassName）

替换element上的oldClassName样式为newClassName，支持批量操作

YAHOO.util.Dom.getStyle（element,property）

获取element的style中的property属性，支持批量操作

YAHOO.util.Dom.setStyle（element,property,pValue）

设置element的style的property属性为pValue，支持批量操作

注：

本节中的class指的是CSS中定义的class。

2.3.    位置控制和访问

位置控制的相关函数

YAHOO.util.Dom.setX

YAHOO.util.Dom.setY

YAHOO.util.Dom.setXY

YAHOO.util.Dom.getX

YAHOO.util.Dom.getXY  返回元素坐标[left,top]

YAHOO.util.Dom.getRegion

获取元素的坐标Region对象{left,top,right,bottom}

可支持批量操作

获取页面可视面积的高度和宽度

YAHOO.util.Dom.getClientWidth

YAHOO.util.Dom.getClientHeight

获取Document的高度和宽度

YAHOO.util.Dom.getDocumentWidth

YAHOO.util.Dom.getDocumentHeight

获取页面可视区域的高度和宽度（不包含滚动条）

YAHOO.util.Dom.getViewportHeight

YAHOO.util.Dom.getViewportWidth

Region对象：

{left,top,right,bottom}

YUI提供的一个对象，用于完成多个矩形区域间的计算（如相交，包含。

YAHOO.util.Region.contains（region）

判断是否包含了region区域

YAHOO.util.Region.getArea

计算面积

YAHOO.util.Region.intersect（region）

计算与region区域的交迭区域

YAHOO.util.Region.union（region）

计算与region区域求并集（即包含两个区域的最小区域）

Point对象：

{x,y}

YUI提供的对象，用于定义坐标点。

3.           YUI提供的element工具

YUI提供了一组操作页面element的工具，是对标准HTMLelements的一种封装，能够直接通操作element的实例，使得增加监听器，操作DOM，设置/获取element的属性等工作变得很简单。

部分方法是直接调用YUI的DOM工具集提供的方法，如对class操作的相关方法、获取element的相关方法等等，在此不再重复。

YAHOO.util.Element（elementId）

创建element，如果elementId在Document中还不存在，仍然可以通过YUI对他进行属性设置，增加监听器等操作，Element工具集会自动等到该elementId可用后执行这些操作，实际上真正的操作是等到contentReady事件发生后才进行的。

YAHOO.util.Element.appendChild（child）

在DOM结构中element下增加子节点

YAHOO.util.Element.getElementsByTagName（tag）

获取tagName为tag的所有页面元素

YAHOO.util.Element.hasChildNodes

判断是否具有子节点

YAHOO.util.Element.insertBefore（element,before）

在元素before前插入element

YAHOO.util.Element.removeChild（child）

删除DOM中元素的child子节点

YAHOO.util.Element.replaceChild（newNode,oldNode）

替换子节点oldNode为newNode

4.           YUI提供的Event工具集

YUI提供的Event工具集简化了浏览器中事件驱动程序的编写，提供了一种简单的接口来定制事件和检查浏览器中的event对象。

YUI事件工具集提供了自定义事件对象（CustomEvent），通过自定义事件对象可以“发布”自己感兴趣的时刻或事件，页面中的YUI组件能够响应这些自定义的事件并做出回应。

YUI对事件响应的顺序：

通过YUIEvent工具集添加的事件，默认是在冒泡过程中执行事件处理函数的。

从DOM节点上来说，是从子节点向根节点响应事件。

Event需要的引入

--Dependency-->

build/yahoo/yahoo-min.js

--Eventsourcefile-->

build/event/event-min.js

Event和CustomEvent分别定义在YAHOO.util.Event和YAHOO.util.CustomEvent中

Event工具集提供的方法

YAHOO.util.Event.addListener（element,eventType,fn,obj,override）

参数：

element：

为绑定事件的元素id，可以是一个数组，以支持批量操作

eventType：

为事件类型

fn：

为事件响应的回调函数

obj：

当override为true时，为回调函数传入的参数对象；当override为false时，该参数被忽略。

override：

返回值类型：

Boolean

功能：

给指定的element绑定事件响应函数

YAHOO.util.Event.removeListener:

function（element,eventType,fn）

参数：

element：

为绑定事件的元素id,

eventType：

事件类型

fn：

为事件响应函数

返回值类型：

Boolean

功能：

给指定的element解除绑定事件

YAHOO.util.Event.purgeElement（el,recurse,sType）

参数：

el：

为绑定事件的元素id,

recurse：

Boolean值，是否解除子节点的事件绑定

sType：

事件类型

返回值类型：

Boolean

功能：

给指定的element解除绑定的同一类型的事件，也可以解除子节点上绑定的这一类型的事件

YAHOO.util.on

addListener的函数别名

YAHOO.util.Event.onAvailable（p_id,p_fn,p_obj,p_override）

参数：

p_id：

为绑定事件的元素id,

p_fn：

为事件响应函数

p_obj：

同addListener的obj参数

p_override：

同addListener的override参数

返回值类型：

无

功能：

当指定的element的p_id出现时，执行事件响应函数。

如果在页面初始化之前执行这一函数，当页面加载时（可能还未完成时），就会执行响应的事件响应函数；如果放在页面加载之后执行这一函数，将以固定的时间轮询，当element可用时响应这一事件。

这个轮询的的时间是可以配置的，缺省的时间是10秒一次。

YAHOO.util.Event.onContentReady（p_id,p_fn,p_obj,p_override）

参数：

p_id：

为绑定事件的元素id,

p_fn：

为事件响应函数

p_obj：

同addListener的obj参数

p_override：

同addListener的override参数

返回值类型：

无

功能：

与onAvailable类似，但不同的是事件响应函数是等到element可以安全的修改的时候才响应。

YAHOO.util.Event.onDOMReady（p_fn,p_obj,p_scope）

参数：

p_fn：

为事件响应函数

p_obj：

同addListener的obj参数

p_scope：

同addListener的override参数

返回值类型：

无

功能：

当DOM第一次可用时执行响应函数。

YAHOO.util.Event.preventDefault（event）

参数：

event：

事件对象

返回值类型：

无

功能：

阻止事件的缺省行为发生。

YAHOO.util.Event.getListeners（el,sType）

参数：

el：

HTMLelement

sType：

事件类型，String类型

返回值类型：

Object{

type：

事件类型

 fn：

addListener添加的事件响应函数

 obj：

提供给事件响应函数的参数对象

 adjust：

否获取缺省的事件监听器

 index：

UI事件监听器列表中的位置

}

功能：

阻止事件的缺省行为发生。

YAHOO.util.Event.getTime（event）

参数：

event：

事件对象

返回值类型：

Date对象

功能：

获取事件发生时的时间。

YAHOO.util.Event.getTarget（ev,resolveTextNode）

参数：

evt：

事件对象

resolveTextNode：

返回值类型：

HTMLelement

功能：

获取事件发生时的页面标签。

对于IE即window.event.srcElement

5.           YUI提供的CSS样式

5.1.    Fonts

字体的规范样式，需要引入build/fonts/fonts-min.css

5.2.    Reset

规范了所有HTMLelement的缺省样式，需要引入build/fonts/reset-min.css

5.3.    Grids

提供了用于页面排版的CSS样式，需要引入build/fonts/grids-min.css

6.           YUI组件

6.1.    ConnectionManager

提供了访问XMLHttpRequest对象的一个简单接口

对象定义：

YAHOO.util.Connect.asyncRequest

Connection的引入：

--Dependency-->

build/yahoo/yahoo-min.js

—可选项:

用到事件时引入-->

build/event/event-min.js

build/connection/connection-min.js

Connection的使用

1.    创建对象

vartransaction=YAHOO.util.Connect.asyncRequest（'GET',sUrl,callback,null）;

第一个参数：

指明http请求的方式，可用的方式包括GET、POST、HEAD、PUT、DELETE，但PUT和DELETE可能在一些A级浏览器上不支持。

第二个参数：

请求的URL

第三个参数：

回调函数，用于服务器返回数据时调用的客户端处理程序

第四个参数：

POST方式时，提供给URL的POST参数信息。

[注]：

A级浏览器A-Gradebrowsers是YUI对浏览器的一个等级划分，具体划分原则详见

2.    定义回调函数

●      在异步事物中，可以创建回调函数处理服务器的响应和相关数据，如果你不关心服务器的返回信息，也可以忽略这些回调函数，所有这些回调函数对象都是可选的，然而在大多数情况下，应该至少提供以下三个回调函数：

success：

服务器做出有效响应时的回调函数

failure：

服务器响应了但提供了错误信息时的回调函数

argument：

success和failure为了处理返回信息需要的参数，可以是对象、字符串、数字或者包含了数据的数组。

●        在使用YAHOO.util.Connect.setForm上载文件时，需要定义upload回调函数代替success和failure

●        在回调函数中this将失去作用范围，这种情况下需要通过一个指向父对象的引用的参数来访问对象的成员。

为了能够使用对象的方法作为回调函数，并维持成员的作用范围，需要定义回调函数对象的成员scope，作为this的值。

6.2.    Button

对象定义：

YAHOO.widget.Button

与传统HTMLForm的按钮类似，不同的是它的label可以与value不一致。

还可以创建带菜单的按钮，或者radiobutton、checkbox

分类：

可以创建几种类型的按钮：

button:

普通的下压式按钮，可以在按钮按下时执行用户指定的代码

link:

按下时导航至相应的URL

submit:

作用相当于form的提交按钮

reset:

form的reset按钮

checkbox:

radio:

menubutton:

按下时显示隐藏按钮

splitbutton:

按下时执行命令或显示菜单的按钮

 使用Button必需的引入:

--CSS-->

build/fonts/fonts-min.css

build/button/assets/button.css

--Dependencies-->

build/yahoo-dom-event/yahoo-dom-event.js

build/element/element-beta-min.js

—使用menubutton和splitbutton要用到的-->

build/container/container_core-min.js

build/menu/menu-min.js

--Sourcefile-->

build/button/button-beta-min.js

初始化的方式：

1．使用替换或的方式

constructor：

YAHOO.widget.Button（sourceElementId,{配置集}）

Button的构造器首先根据sourceElementId在DOM中查找，一旦找到，就通过DOM的replaceChild方法替换掉

2．使用新建的方式

constructor:

YAHOO.widget.Button（{配置集}）

这种情况下根据配置集中指明的父id（Container）创建按钮，如果配置集中没有指明按钮则使用YAHOO.Dom.generateId生成button的ID,

Button的配置集

属性名称

含义

备注

id

替换后的新的elementid

label

按钮上显示的文字

check

按钮选中/未选中的状态

checkbox用到

type

指明button的类型

缺省为button

container

按钮的父id

使用新建方式时会用到

srcelement

使用替换方式时

menu

按钮对应的菜单YAHOO.widget.menu

title

按钮title

没有指定label时使用title

href

按钮导航URL

仅在按钮类型为link时有效

target

中的target

仅在按钮类型为link时有效

tabindex

按tab切换焦点时的顺序号

onclick

click事件的响应函数

onclick:

{

fn:

Function,//事件的响应函数.

obj:

Object,//Anobjecttopassbacktothehandler.

scope:

Object//Theobjecttouseforthescopeofthehandler.

}}

 6.3.    ButtonGroup

对象定义：

YAHOO.widget.ButtonGroup

ButtonGroup是一组按钮，同组中只能有一个按钮被选中。

根节点为