YUI学习文档.doc

YUI使用规范  1. YAHOO工具库 3 1.1. YAHOO工具库提供的方法 3 2. YUI提供的Dom操作 3 3. YUI提供的element工具 4 4. YUI提供的Event工具集 5 Event需要的引入 5 Event工具集提供的方法 5 5. YUI组件 7 5.1. Button 7 分类： 7 使用Button必需的引入: 8 初始化的方式： 8 Button的属性集 8 5.2. ButtonGroup 9 5.3. Container 9 Container下的控件继承关系 10 Container的引入 10 5.3.1. Container下的控件 10 Module 10 使用Module必需的引入 11 初始化的方式： 11 显示/隐藏Module 11 属性集的说明 11 5.3.2. Overlay 11 初始化的方式 11 位置设定 12 属性集 12 OverlayManage 12 5.3.3. Tooltip 13 Tooltip的引入 13 Tooltip初始化方式 13 Tooltip属性集 13 5.3.4. Panel 14 Panel的引入 14 Panel的初始化 14 Panel的属性集 14 5.3.5. Dialog 15 Dialog的引入 15 Dialog的初始化 15 Dialog的属性集 15 5.3.6. SimpleDialog 16 SimpleDialog的引入 16 SimpleDialog的初始化 16 SimpleDialog的属性集 16 5.4. Grids 16 5.5. TabView 17 TableView的引入 17 TableView的初始化 17 TableView的属性集 18 Tab的属性集 18 TabView用到的CSS定义 19  YAHOO工具库 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指向的函数。 YUI提供的Dom操作 特点：对于大部分DOM操作提供了批量操作的功能，而对用户只需使用统一的函数接口就能完成单个或批量的操作，主要得益于DOM内部的batch方法。 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中，支持批量操作。 样式控制和访问 YAHOO.util.Dom.hasClass(element, className) 判断element标签上是否指明了className的class，支持批量操作 YAHOO.util.Dom.addClass(elemen