JSYUI中文说明.docx

1、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(

2、Event.KEYDOWN); 访问窗体元素 document.all(txt).focus(); document.all(txt).select(); 窗体命令 document.execCommand 窗体COOKIE document.cookie 菜单事件 document.oncontextmenu 创建元素 document.createElement(SPAN); 根据鼠标获得元素： document.elementFromPoint(event.x,event.y).tagName=TD document.elementFromPoint(event.x,event.y).a

3、ppendChild(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.ge

4、tElementById(id); 定时 timer=setInterval(scrollwindow(),delay); clearInterval(timer); UNCODE编码 escape() ,unescape. YAHOO工具库提供的方法 namespace用于创建一个全局的命名空间，使用YUI时，首先会自动创建widget,util,example三个命名空间，使用时也可以自定义命名空间。类似于在程序中建了了一个static变量。 langjavascript扩展的语言工具，用于判别对象的类型。 lang.extend用于从一个对象上扩展出另一个对象，模拟了类的继承的方式，但不

5、同的是，在创建子对象时，父对象的构造函数不会自动调用。父对象的引用存放在了子对象的supperclass中，构成了一个链状继承关系。在2.2.2的版本中，YAHOO.lang.extend和YAHOO.extend指向同一函数对象。 lang.augment将一个对象的属性（部分或全部）复制到另一个对象，但并非真正意义上的复制，只是一种引用。YAHOO.augment=YAHOO.lang.augment。 log用来调试的一个工具，将信息显示到log控件。 env环境信息和YUI组件信息 YUI_config.listener可以定义自己的回调函数，当有新的YUI组件加载到页面时将会调用YU

6、I_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中查

7、找符合条件的节点。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.

8、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) 替换el

9、ement上的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.setXYAHOO.util.Dom.setYYAHOO.uti

10、l.Dom.setXYYAHOO.util.Dom.getXYAHOO.util.Dom.getXY 返回元素坐标 left,top YAHOO.util.Dom.getRegion获取元素的坐标Region对象left,top,right,bottom可支持批量操作获取页面可视面积的高度和宽度YAHOO.util.Dom.getClientWidthYAHOO.util.Dom.getClientHeight获取Document的高度和宽度YAHOO.util.Dom.getDocumentWidthYAHOO.util.Dom.getDocumentHeight获取页面可视区域的高度和宽度

11、（不包含滚动条）YAHOO.util.Dom.getViewportHeightYAHOO.util.Dom.getViewportWidthRegion对象：left,top,right,bottomYUI提供的一个对象，用于完成多个矩形区域间的计算（如相交，包含。YAHOO.util.Region.contains(region)判断是否包含了region区域YAHOO.util.Region.getArea计算面积YAHOO.util.Region.intersect(region)计算与region区域的交迭区域YAHOO.util.Region.union(region)计算与reg

12、ion区域求并集（即包含两个区域的最小区域）Point对象：x,yYUI提供的对象，用于定义坐标点。3. YUI提供的element工具YUI提供了一组操作页面element的工具，是对标准HTML elements的一种封装，能够直接通操作element的实例，使得增加监听器，操作DOM，设置/获取element的属性等工作变得很简单。部分方法是直接调用YUI的DOM工具集提供的方法，如对class操作的相关方法、获取element的相关方法等等，在此不再重复。YAHOO.util.Element(elementId)创建element，如果elementId在Document中还不存在，仍

13、然可以通过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, be

14、fore)在元素before前插入elementYAHOO.util.Element.removeChild(child)删除DOM中元素的child子节点YAHOO.util.Element.replaceChild (newNode , oldNode)替换子节点oldNode为newNode4. YUI提供的Event工具集YUI提供的Event工具集简化了浏览器中事件驱动程序的编写，提供了一种简单的接口来定制事件和检查浏览器中的event对象。YUI事件工具集提供了自定义事件对象(Custom Event)，通过自定义事件对象可以“发布”自己感兴趣的时刻或事件，页面中的YUI组件能够响

15、应这些自定义的事件并做出回应。YUI对事件响应的顺序：通过YUI Event工具集添加的事件，默认是在冒泡过程中执行事件处理函数的。从DOM节点上来说，是从子节点向根节点响应事件。Event需要的引入 build/yahoo/yahoo-min.jsbuild/event/event-min.jsEvent和Custom Event分别定义在YAHOO.util.Event和YAHOO.util.CustomEvent中Event工具集提供的方法YAHOO.util.Event.addListener(element,eventType,fn,obj,override)参数：element：为

16、绑定事件的元素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

17、.util.Event.purgeElement ( el , recurse , sType )参数：el：为绑定事件的元素id,recurse：Boolean值，是否解除子节点的事件绑定sType：事件类型返回值类型：Boolean功能：给指定的element解除绑定的同一类型的事件，也可以解除子节点上绑定的这一类型的事件YAHOO.util.onaddListener的函数别名YAHOO.util.Event.onAvailable( p_id , p_fn , p_obj , p_override )参数：p_id：为绑定事件的元素id,p_fn：为事件响应函数p_obj：同addLi

18、stener的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：为事件响应

19、函数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.preventDefau

20、lt ( event)参数：event：事件对象返回值类型：无功能：阻止事件的缺省行为发生。YAHOO.util.Event.getListeners ( el , sType )参数：el：HTML elementsType：事件类型，String类型返回值类型：Object type：事件类型fn：addListener添加的事件响应函数obj：提供给事件响应函数的参数对象adjust：否获取缺省的事件监听器index：UI事件监听器列表中的位置功能：阻止事件的缺省行为发生。YAHOO.util.Event.getTime( event)参数：event：事件对象返回值类型：Date对象功

21、能：获取事件发生时的时间。YAHOO.util.Event.getTarget(ev , resolveTextNode)参数：evt：事件对象resolveTextNode：返回值类型： HTML element功能：获取事件发生时的页面标签。对于IE即window.event.srcElement5. YUI提供的CSS样式5.1. Fonts字体的规范样式，需要引入build/fonts/fonts-min.css5.2. Reset规范了所有HTML element的缺省样式，需要引入build/fonts/reset-min.css5.3. Grids提供了用于页面排版的CSS样式，

22、需要引入build/fonts/grids-min.css6. YUI组件6.1. Connection Manager提供了访问XMLHttpRequest对象的一个简单接口对象定义：YAHOO.util.Connect.asyncRequestConnection的引入：build/yahoo/yahoo-min.jsbuild/event/event-min.jsbuild/connection/connection-min.jsConnection的使用1. 创建对象var transaction = YAHOO.util.Connect.asyncRequest(GET, sUrl,

23、 callback, null);第一个参数：指明http请求的方式，可用的方式包括GET、POST、HEAD、PUT、DELETE，但PUT和DELETE可能在一些A级浏览器上不支持。第二个参数：请求的URL第三个参数：回调函数，用于服务器返回数据时调用的客户端处理程序第四个参数：POST方式时，提供给URL的POST参数信息。注：A级浏览器A-Grade browsers是YUI对浏览器的一个等级划分，具体划分原则详见2. 定义回调函数 在异步事物中，可以创建回调函数处理服务器的响应和相关数据，如果你不关心服务器的返回信息，也可以忽略这些回调函数，所有这些回调函数对象都是可选的，然而在大多

24、数情况下，应该至少提供以下三个回调函数：success：服务器做出有效响应时的回调函数failure：服务器响应了但提供了错误信息时的回调函数argument：success和failure为了处理返回信息需要的参数，可以是对象、字符串、数字或者包含了数据的数组。 在使用YAHOO.util.Connect.setForm上载文件时，需要定义upload回调函数代替success和failure 在回调函数中this将失去作用范围，这种情况下需要通过一个指向父对象的引用的参数来访问对象的成员。为了能够使用对象的方法作为回调函数，并维持成员的作用范围，需要定义回调函数对象的成员scope，作为t

25、his的值。6.2. Button对象定义：YAHOO.widget.Button与传统HTML Form的按钮类似，不同的是它的label可以与 value不一致。还可以创建带菜单的按钮，或者radio button、checkbox分类：可以创建几种类型的按钮：button:普通的下压式按钮，可以在按钮按下时执行用户指定的代码link:按下时导航至相应的URLsubmit:作用相当于form的提交按钮reset:form的reset按钮checkbox:radio:menubutton:按下时显示隐藏按钮splitbutton:按下时执行命令或显示菜单的按钮使用Button必需的引入:bu

26、ild/fonts/fonts-min.cssbuild/button/assets/button.cssbuild/yahoo-dom-event/yahoo-dom-event.jsbuild/element/element-beta-min.jsbuild/container/container_core-min.jsbuild/menu/menu-min.jsbuild/button/button-beta-min.js初始化的方式：1使用替换或的方式constructor：YAHOO.widget.Button(sourceElementId,配置集)Button的构造器首先根据so

27、urceElementId在DOM中查找，一旦找到，就通过DOM的 replaceChild方法替换掉2使用新建的方式constructor:YAHOO.widget.Button(配置集)这种情况下根据配置集中指明的父id(Container)创建按钮，如果配置集中没有指明按钮则使用YAHOO.Dom.generateId生成button的ID,Button的配置集属性名称含义备注id替换后的新的element idlabel按钮上显示的文字check按钮选中/未选中的状态checkbox用到type指明button的类型缺省为buttoncontainer按钮的父id使用新建方式时会用到s

28、rcelement使用替换方式时menu按钮对应的菜单YAHOO.widget.menutitle按钮title 没有指定label时使用titlehref按钮导航URL仅在按钮类型为link时有效target中的target仅在按钮类型为link时有效tabindex按tab切换焦点时的顺序号onclickclick事件的响应函数onclick: fn: Function, / 事件的响应函数.obj: Object, / An object to pass back to the handler.scope: Object / The object to use for the scope of the handler. 6.3. ButtonGroup对象定义：YAHOO.widget.ButtonGroupButtonGroup是一组按钮，同组中只能有一个按钮被选中。根节点为6.4. AutoComplete用户在文本输入框中输入文字时，该组件通过输入的内容查找符合输入条件的内容，并显示出所有符合条件的内容，供用户能够很快的完成正确的输入。AutoComplete的引入build/yahoo-dom-event/yahoo-dom-event.js!- 可选: Co