NCV5-轻量级组件技术红皮书.doc

NC Rich Client轻量级组件技术红皮书NC-UAP 5.0用友NC-UAP2019-11-141第 页目 录第一章前言11.文档介绍12.概述13.组件整体继承关系介绍1第二章各组件详细设计与使用方法介绍21.BaseComponent22.ConfirmDialogComp53.MessageDialogComp64.WarningDialogComp75.ErrorDialogComp96.ProgressDialogComp107.PanelComp118.TabComp129.ButtonComp1410.ComboComp1611.ListToListComp1912.StringTextComp2213.IntegerTextComp2414.DateTextComp2515.FloatTextComp2616.TreeViewComp2717.OutLookBarComp3118.SliderbarComp3319.GridComp35第 40 页第一章 前言1. 文档介绍 文档目的该文档主要面向NC Rich Client的开发和使用人员，通过系统介绍每个组件的构成，外观定制(css),使开发人员具体了解每个组件的结构，使使用人员了解每个组件的使用方法，能够轻松自如的使用每个组件。 文档范围NC Rich Client的维护，作用于组件的开发阶段和维护阶段。 读者对象NC Rich Client轻量级组件的开发人员、维护人员、项目负责人、项目核查人员及使用人员。 术语与缩写解释缩写、术语解 释组件、控件在本文档中均指NC Rich Client中的轻量级控件2. 概述在为传统的web应用编写HTML页面的时候，页面编写者只有非常有限的一套预定义GUI组件，即HTML表单元素。他们的特征集在近10年的时间里几乎没有什么变化，与现代的GUI工具集相比，它们是非常基础的。如果页面作者希望引入树控件或者可编辑的栅格、日历控件或者分级菜单之类的，就需要借助于基础文档元素的底层编程。由于开发Portal的需要，为了Portal更具实用性和易用性，同时随着Ajax技术的逐渐流行，客户端的重视程度日益提高，为了很好的利用Ajax技术提高web界面的响应速度，并带给用户更好的浏览体验，开发一套适用于portal并具有一定灵活性和可扩展性的基础控件库也成了势在必行的工作。 3. 组件整体继承关系介绍由于JavaScript代码均是下载到客户端解释执行，所以为了减轻客户端压力，类的继承层次不能太深，否则在客户端运行时代码的执行速度就会变慢，生成的原始js代码就会增多，考虑这个效率原因，NC Rich Client的大部分组件均采用一级继承，即直接继承自基类BaseComponent。第二章 各组件详细设计与使用方法介绍1. BaseComponent组件名称：BaseComponent 组件类型：所有控件的基类 1.1 组件说明所有控件基类,包含了所有控件的共同属性和操作方法，此类不需要用户主动调用。以下给出了这个类的详细函数原型描述。1.2 函数介绍1)2)3)4)5)6)7）8）9）10）11)12)13)14)15)16)17)18)19)20)2. ConfirmDialogComp组件名称：ConfirmDialogComp 组件类型：Container 组件父类：ModalDialogComp2.1 组件说明此确认对话框是对ModalDialog的封装实现。在对话框底部添加了OK, Cancel按钮，使用者使用时只需提供Ok,Cancel相对应的处理函数，给出需要显示的内容信息即可。2.2 组件最终效果展示(图3.2-1 确认对话框)2.3 组件皮肤设置说明confirmdialog.css是对ConfirmDialog中显示字体的外观控制，如字体，大小等modaldialog.css是对ConfirmDialog外观整体的控制，包括标题背景，内容区背景等2.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息ok:点击确认后需要执行的函数名称cancel:点击取消后需要执行的函数名称l 不使用tag标签的用法confirmdialog = ConfirmDialogComp.showDialog(msg);/ 用需要显示的字符串代替msgconfirmdialog.onOk = confirm; /把点击确认按钮后需要执行的函数名赋给onOk属性confirmdialog.onCancel = noconfirm; /把点击取消需要执行的函数名赋给onCancel属性l 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了confirmdialog对话框实例/* *改变对话框的显示信息* param msg用户传入的要显示的新的信息 */confirmdialog. changeMsg(msg); /使用方法3. MessageDialogComp组件名称：MessageDialogComp 组件类型：Container 组件父类：ModalDialogComp3.1 组件说明MessageDialogComp组件,通过输入指定字符串和显示图片提供此对话框。3.2 组件最终效果展示(图3.3-1 消息对话框)3.3 组件皮肤设置说明messagedialog.css是对MessageDialog中显示字体的外观控制，如字体，大小等3.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息l 不使用tag标签的用法messagedialog = MessageDialogComp.showDialog(msg);/ 用需要显示的字符串代替msgl 用户可调用的组件函数和组件事件说明messagedialog.onclick = function() /用户自己的处理4. WarningDialogComp组件名称：WarningDialogComp 组件类型：Container 组件父类：ModalDialogComp4.1 组件说明WarningDialogComp组件，通过显示输入字符串和警示图片提供此对话框。4.2 组件最终效果展示(图3.4-1 警告对话框)4.3 组件皮肤设置说明warningdialog.css是对WarningDialog中显示字体的外观控制，如字体，大小等4.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息l 不使用tag标签的用法warningdialog = WarningDialogComp.showDialog(msg);/ 用需要显示的字符串代替msgl 用户可调用的组件函数和组件事件说明warningdialog.onclick = function() /用户自己的处理5. ErrorDialogComp组件名称：ErrorDialogComp 组件类型：Container 组件父类：ModalDialogComp5.1 组件说明ErrorDialogComp组件，通过显示输入字符串和错误图片提供此对话框。5.2 组件最终效果展示(图3.5-1 提示对话框)5.3 组件皮肤设置说明errordialog.css是对ErrorDialog中显示字体的外观控制，如字体，大小等5.4 组件使用说明l 使用tag标签的用法msg：你需要显示的错误提示信息l 不使用tag标签的用法errordialog = ErrorDialogComp.showDialog(msg);/ 用需要显示的字符串代替msgl 用户可调用的组件函数和组件事件说明errordialog.onclick = function() /用户自己的处理6. ProgressDialogComp组件名称：ProgressDialogComp 组件类型：Container 组件父类：ModalDialogComp6.1 组件说明ProgressDialogComp组件，通过显示正在进行的动作描述告知用户正在进行的事情。6.2 组件最终效果展示(图3.6-1 进度对话框)6.3 组件皮肤设置说明progressdialog.css是对ProgressDialog中显示字体的外观控制，如字体，大小等6.4 组件使用说明l 使用tag标签的用法msg：你需要显示的提示信息l 不使用tag标签的用法progressdialog = ProgressDialogComp.showDialog(msg);/用需要显示的字符串代替msgl 用户可调用的组件函数和组件事件说明progress.onclick = function() /用户自己的处理7. PanelComp组件名称：PanelComp 组件类型：Container 组件父类：BaseComponent7.1 组件说明Panel容器，提供基本的包装，任何控件都可以放入其中，可继承它实现滚动panel等。7.2 组件最终效果展示由于Panel面板本身没有任何色彩，所以不提供展示效果。7.3 组件皮肤设置说明panel.css是对PanelComp外观效果的控制，默认不提供任何效果，根据具体需要可以提供对panel边框、背景等效果的设置。7.4 组件使用说明l 使用tag标签的用法：name： 控件名称left: 当控件设置绝对定位时，相对父控件的左侧x坐标值(单位：像素px)top: 当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px) width: 宽度，可以采用百分比和像素两种height: 高度，可以采用百分比和像素两种scrollable:设置面板可否滚动parentFrm: 此控件的父控件名称。注：对于使用tag标签的方式，如果父控件不是NC RichClient组件库中的控件需要设定此值，否则tag中封装了自动寻找父控件的代码，使用者不需要自己指定。l 不使用tag标签的用法：var panel = new PanelComp(parent, name, left, top, width, height, position, scroll, className);position: 不指定默认采用绝对定位parent: 此控件的父控件，此控件依赖能定位自身的父控件定位自身位置l 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了panel面版实例/* *设置面版的可滚动性* param scroll 是否可滚动 */panel.setScroll (scroll); /使用方法8. TabComp组件名称：TabComp 组件类型：Container 组件父类：BaseComponent8.1 组件说明tab页签控件，在点到不同的页时，该页的标签显示为活动状态，同时显示此页内容区的内容。8.2 组件最终效果展示 (图3.8-1 不同css文件控制下的皮肤外观)8.3 组件皮肤设置说明tab.css对TabComp外观效果进行控制，使用者可以根据自己的喜好改写相关的css文件或者重新编写新的css文件来改变此控件外观，如激活项的样式，字体样式，背静颜色等。8.4 组件使用说明l 使用tag标签的用法：name：控件名称left:当控件设置绝对定位时，相对父控件的左侧x坐标值(单位：像素px)top:当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px)width:宽度，可以采用百分比和像素两种height: 高度，可以采用百分比和像素两种tabItemWidth: 每一个页签项的宽度值(单位:像素px)l 不使用tag标签的用法：var tab = new TabComp(parent,name,left,top,width,height,tabItemWidth,position:,);item1=tab1.createItem(name,title);/通过调用createItem(name,title)创建子项l 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了tab页签实例/* *由item项的名字得到item项的索引*param name item项的名字*/tab.getItemIndexByName(name); /使用方法/* *得到item的索引值(索引值从0开始)*param name item项的数据对象*/tab.getItemIndex(item);/* *得到当前的激活项*return 当前激活项的数据对象*/tab.getSelectedItem();/* *得到当前激活项的索引值*return 当前激活项的数据对象*/tab.getSelectedIndex();/* *暴露给用户进行覆盖的方法,此函数是点击事件传输的最上层,主要用于做一些统一处理的操作*注：e.triggerItem中绑定了当前触发的是哪个item子项*/tab.onclick = function(e)/TODO:用户自己的处理/* *当激活item位置变化时会掉用这个函数,用户可以重载此函数处理自己事情*param triggerItem 传入是谁激活的此item*param currItem 当前激活的item*param targetItem 将要被激活的item*/tab.beforeActivedTabItemChange = function(triggerItem, currItem, targetItem)/TODO:用户自己的处理注：以下的函数均假定已经生成了某一个tabitem子项实例/* *显示指定的tabItem标题名字*return item项标题*/tabitem.showTitle();/* *改变itemDiv的宽度*param delta 需要改变的宽度值 */tabitem.changeWidth(delta);/* *设置itemDiv的宽度*param width 新的的宽度值 */tabitem.setWidth(width);9. ButtonComp组件名称：ButtonComp 组件类型：Controls 组件父类：BaseComponent9.1 组件说明按钮控件，用户可以指定图片显示于按钮之上，可以指定文字和图片的相对位置。不传入图片路径则只显示文字。9.2 组件最终效果展示 (注:button1激活) (注:button1禁用)(图3.9-1 按钮控件)9.3 组件皮肤设置说明button.css对ButtonComp外观效果进行控制，使用者可以根据自己的喜好修改相关的css文件或者重新编写新的css文件来改变此控件外观，如按钮普通状态，激活状态，禁用状态的外观。9.4 组件使用说明l 使用tag标签的用法：(注：不使用图片时的按钮tag用法)(注：使用图片时的按钮tag用法)click:点击按钮后调用的处理函数名称disabled:初始化时按钮的状态，false表示激活状态，true表示禁用状态text:按钮上的文字tip:鼠标移动到按钮上时的提示语句refImg:图片资源的绝对路径align:文字和图片的相对位置，相对位置均为文字相对图片的位置,有center,left,right, top,bottom 5种相对位置l 不使用tag标签的用法：var button = new ButtonComp(parent, name, left, top, width, height, text, tip, refImg, position, align, disabled, className);不设定某一个参数时传入空串，其它的参数含义参考上面的参数说明。l 用户可调用的组件函数和组件事件说明/*使按钮激活*/button.active();/*使按钮禁用*/button.inactive();10. ComboComp组件名称：ComboComp 组件类型：Controls 组件父类：BaseComponent10.1 组件说明下拉框控件，支持文字子项和图片子项两种形式。10.2 组件最终效果展示 (图3.10-1 文字子项的下拉框) （图3.10-1 图片子项的下拉框）10.3 组件皮肤设置说明combobox.css对ComboComp外观效果进行控制，使用者可以根据自己的喜好修改相关的css文件或者重新编写新的css文件来改变此控件外观，如子项选中状态的样式，竖直滑动条的样式。10.4 组件使用说明l 使用tag标签的用法： (注：文字子项下拉框的tag用法)click:点击按钮后调用的处理函数名称refImg:如果要在文字项前显示图片，则需要通过此属性指定图片的绝对路径地址caption:子项的显示值value:子项的真实值 (注：图片子项下拉框的tag用法)showImgOnly:使用图片子项的下拉框的时候必须将此属性设置为truecapion:表示每个子项图片资源的绝对地址l 不使用tag标签的用法：对于文字子项的comboboxcombobox = newComboComp(parent,name,left,top,width,height,readonly,position, );Combobox.createOpion(caption,value,refImg,false,null,false);需要使用者自己指定的参数如下，其它已经给定的参数是不能改变的：parent:此控件父控件name：此控件名称left:当控件设置绝对定位时，相对父控件的左侧x坐标值(单位：像素px)top:当控件设置绝对定位时，相对符控件的顶部y坐标值(单位：像素px)width：控件宽度height：控件高度，默认80pxreadonly:输入框是否为可读position：定位属性，绝对(absolute)还是相对(relative)对于图片子项的comboboxcombobox = newComboComp(parent,name,left,top,width,height,readonly,position,);combobox1.createOption(caption,value,false,null,true);需要使用者自己指定的参数参考“对于文字子项的combobox”，已经给定的参数是不能改变的。caption:图片的绝对路径value: 真实值l 用户可调用的组件函数和组件事件说明/*得到所有的option项*/combobox.getOptions();/*清除所有的option*/combobox.clearOptions();/*设置选中项*param index 要设置选中项的索引值*/combobox.setSelectedItem (index);/*得到选择项的value值*/combobox.getValue();/*得到指定value的索引值*param value 指定的value*/combobox.getValueIndex(value);/*得到选中项的index值*/combobox.getSelectedIndex();/* 得到选中项的值*/combobox.getSelectedValue();/*得到选择项的caption*/combobox.getSelectedCaption();/*禁用此控件*/combobox.inactive();/*激活此控件*/combobox.active();/*暴露给用户可重载的函数*param newItem 改变后的新值*param lastItem 上一个选中的值*/combobox.valueChanged(newItem, lastItem);11. ListToListComp组件名称：ListToListComp 组件类型：Controls 组件父类：BaseComponent11.1 组件说明ListToList控件，提供便捷的可选值和已选值的互相切换。此控件是基于ListComp控件的扩展型控件。11.2 组件最终效果展示(图3.11-1 listtolist控件)11.3 组件皮肤设置说明由于此控件依赖ListComp控件，所以此控件的外观由List控件控制。11.4 组件使用说明l 使用tag标签的用法： leftlist是左侧的list选择框，rightlist是右侧的list选择框。caption:list中每一项的显示值value: list中每一项的真实值l 不使用tag标签的用法：listToList = new ListToListComp(parent,name,left,top,width,height,position,leftLabelName,rightLabelName);listToList.addItemToLeft(caption,value, ,false,0);listToList.addItemToRight(caption,value,false,0);需要使用者自己指定的参数如下，其它已经给定的参数是不能改变的：leftLabelName:左侧列表上label的名字，默认显示“全部可选的值”rightLabelName: 右侧列表上label的名字，默认显示“已经选择的值”caption: list中一项的显示值value: list中一项的真实值l 用户可调用的组件函数和组件事件说明/*向左侧list中添加值*param caption 此item的显示值*param value 此item的id,必须和其他item不同*param refImg 显示在文字前的图片的绝对路径,不指定则认为不需要显示此图片*param index 索引值,可以不输入*/listToList.addItemToLeft(caption, value, refImg, selected, index);/* 向右侧list中添加值*/listToList.addItemToRight(caption, value, refImg, selected, index);/*删除左侧list中的item*param index 要删除的item的索引值(注意:索引值从0开始)*/listToList.deleteLeftListItem(index);/*删除左侧list中的多个item*param indice 要删除的items的索引值数组(注意:索引值从0开始)*/listToList.deleteLeftListItems(indice);/*删除右侧list中的item*param index 要删除的item的索引值(注意:索引值从0开始)*/ListToList.deleteRightListItem(index);/* 删除右侧list中的多个item*param indice 要删除的items的索引值数组(注意:索引值从0开始)*/ ListToList.deleteRightListItems(indice);12. StringTextComp组件名称：StringTextComp 组件类型：Controls 组件父类：TextComp12.1 组件说明String类型的Text输入控件，可以设置允许输入的字节数(注：不是字符数)的最大值，超出这个设定值的字符将被自动截去，同时还会有输入值过长的提示。12.2 组件最终效果展示(图3.12-1 字符串长度超过设定最大长度截断并提示)12.3 组件皮肤设置说明text.css文件用来控制所有text的皮肤外观。12.4 组件使用说明l 使用tag标签的用法：disabled: 初始是否禁用，true为初始禁用l 不使用tag标签的用法：stringText = newStringTextComp(parent,name,left,top,width,position,disabled:false,maxSize:50,value:,readOnly:false,className);maxSize:输入框允许输入的字符串长度value:输入框内的初始默认值，如果此值不介于设定的或者默认的最大最小值之间将不会设置 readOnly: 输入框是否为只读属性disable: 初始是否禁用，true为初始禁用/以下方法在接下来介绍的各种输入框组件中均可以使用l 用户可调用的组件函数和组件事件说明/*设置输入框允许输入的字节数的最大值*/stringText.setMaxSize(size);/*设置控件的格式化器*param formater 格式化器实例*/stringText.setFormater(formater);/*得到格式化器*/stringText.getFormater();/*获得输入焦点*/stringText.setFocus();/*得到value值*/stringText.getValue();/*设置值时要检测类型*/stringText.setValue(text);/*使不激活*/stringText.inactive();/*激活控件*/stringText.active();/*输入框失去焦点后暴露给用户重载的方法*/stringText.onblur = function () /用户的处理函数 /*输入框得到焦点时暴露给用户重载的方法*/stringText.onfocus = function () /*输入框的内容改变时暴露给用户重载的方法*/stringText.haschanged = function (e);/*输入框的内容改变时暴露给用户重载的方法*/stringText.onenter = function();13. IntegerTextComp组件名称：IntegerTextComp 组件类型：Controls 组件父类：TextComp13.1 组件说明Integer类型的Text输入控件，可以设置最大值和最小值，超出这个范围的值将不能设置到输入框中，同时还会有输入值越界的提示，整数值的默认大小为JavaScript语言所允许的整数的最大值、最小值。13.2 组件最终效果展示(图3.13-1 整数值越界后的提示)13.3 组件皮肤设置说明text.css文件用来控制所有text的皮肤外观。13.4 组件使用说明l 使用tag标签的用法：maxValue:用户设定的允许的整数的最大值。(不能大于9007199254740992)minValue:用户设定的允许的整数的最小值。(不能小于-9007199254740992)disabled: 初始是否禁用，true为初始禁用l 不使用tag标签的用法：integertext = newIntegerTextComp(parent,name,left,top,width,position,maxValue,minValue, disabled:false,maxSize:50,value:,readOnly:false);maxSize:输入框允许输入的字符串长度value:输入框内的初始默认值，如果此值不介于设定的或者默认的最大最小值之间将不会设置 readOnly: 输入框是否为只读属性disable: 初始是否禁用，true为初始禁用14. DateTextComp组件名称：DateTextComp 组件类型：Controls 组件父类：TextComp14.1 组件说明date类型的Text输入控件，日期格式为YYYY-MM-DD，此控件输入合法性的校验是在输入框失去焦点或者按下回车键的时候进行一次性校验，对于用户手动输入的不合法的日期格式会将输入交点设置到输入框的同时以浮动条的形式显示错误原因。14.2 组件最终效果展示 (图3.14-1 日期控件) (图3.14-2 输入不合法日期后的提示)14.3 组件皮肤设置说明text.css文件用来控制所有text的皮肤外观。14.4 组件使用说明l 使用tag标签的用法：l 不使用tag标签的用法：datetext = newDateTextComp(parent,name,left,top,width,position, disabled:false,maxSize:50,value:,readOnly:false );(注：各属性说明参考IntegerTextComp属性说明)15. FloatTextComp组件名称：FloatTextComp 组件类型：Controls 组件父类：TextComp15.1 组件说明数字浮点类型的Text输入控件，用户可以指定数字的精度，控件会智能的完善和补充用户的输入。15.2 组件最终效果展示失去焦点后 失去焦点后 (图3.15-1 数字型输入控件)15.3 组件皮肤设置说明text.css文件用来控制所有text的皮肤外观。15.4 组件使用说明l 使用tag标签的用法：l 不使用tag标签的用法：numtext = newFloatTextComp(parent,name,left,top,width,position,precision, disabled:false,maxSize:50,value:,readOnly:false );Precision:精度，小数点后的位数(注：其余各属性说明参考IntegerTextComp属性说明)16. TreeViewComp组件名称：TreeViewComp 组件类型：Controls 组件父类：BaseComponent16.1 组件说明树型控件，用来将数据组织成树状。16.2 组件最终效果展示(图3.16-1 树型控件)16.3 组件皮肤设置说明treeview.css文件用来控制TreeViewComp的皮肤外观。16.4 组件使用说明l 使用tag标签的用法：l 不使用tag标签的用法：adminTree = newTreeViewComp(parent,name,left,top,width,height,position,true,true,withRoot,rootNode);adminTree.createNode (parentNodeId, nodeId, caption, value, icon1, icon2, open, canHasChild);withRoot:是否有根节点rootNode：根节点parentNodeId:创建节点的父节点idnodeId:此节点的idcaption:节点显示名value:节点真实值icon1:树节点闭合时图标路径(代表叶子节点时icon1和icon2相同)icon2:树节点打开时图表路径(代表叶子节点时icon1和icon2相同)open:初始时是否为打开状态canHasChild:此节点是否允许有孩子节点l 用户可调用的组件函数和组件事件说明注：以下的函数均假定已经生成了adminTree实例/* *把node添加到parentId指定的父节点下* param node传入的node节点*param parented父节点id*/adminTree.addNode(node, parentId); /使用方法/*将给定的一组Node节点添加到父节点下*param pNode 父节点*param cNodeList 要添加的子节点数组*/adminTree.addRelationNode(pNode, cNodeList);/*根据父节点的id查找node节点*param node 要查找的node节点*param parentId 父节点id*/adminTree.findNodeById(node, parentId);/*得到当前选中的节点*/adminTree.getSelectedNode();/*使选中节点状态变为非选中状态*/adminTree.clearSelectedNode();/*设定树节点的第几级打开*public 在树节点构件完成后可以调用此方法,如果构建的树没有root,调用此方法无效.*parem level root下第一级节点level参数为0,依次类推*/adminTree.openNodesByLevel(level);/*得到根节点*/adminTree.getRoot();/*鼠标点击事件的用户重载函数*/adminTree.onbeforeclick(e);/*判断节点是否是叶子节点*/node.isLeaf();/*判断指定node是否有孩子节点*/node.hasChildren();/*判断给定节点是否存在于此节点的子节点*/node.isExist(nodeID);/*给指定节点添加子结点*param node 要添加的节点对象*/node.add(node);/*判断此节点是否是当前父节点的最后一个节点*/node.isLast();/*判断此节点是否是当前父节点的第一个节点*/node.isFirst();/*若指定节点有子节点,则返回第一个子节点.否则返回null*/node.first();/*若指定节点有子节点,则返回最后一个子节点.否则返回null*/node.last()/*若指定节点有下一个节点则返回下一个节点.否则返回null*/node.next()/*若指定节点有前一个节点则返回前一个节点.否则返回null*/node.previous()/*移除掉指定位置的结点*/node.remove(id)/*移除掉一个节点的所有子结点*/node.clearChildren();/* 重载函数,如果想阻止tree进一步处理,返回false. */node.onclick(e) /* 节点点击前处理函数,如果想阻止node的正常处理流程.返回false */node.onbeforeclick(e); 17. OutLookBarComp组件名称：OutLookBarComp 组件类型：Containers 组件父类：BaseComponent17.1 组件说明OutLookBarComp控件，为数据展示提供类似百叶窗式的树型控件。17.2 组件最终效果展示(图：outlookbar控件)17.3 组件皮肤设置说明button.css文件中的personaltree_div用来控制此控件的外观。17.4 组件使用说明l 使用tag标签的用法：l 不使用tag标签的用法：outlookbar = new OutLookBarComp(parent, name, left, top, width, height, position, className);outlookbar.addItem(itemName, itemCaption, itemSrcImg, itemTitle);itemName:子项名字(即id)itemCaption: 子项显示名itemSrcImg:子项显示名前的显示图片的路径itemTitle:鼠标移动到item项上时的提示语句l 用户可调用的组件函数和组件事件说明/*激活某一subitem*param index 要激活项的索引值(注:索引值从0开始)*/outlookbar.activeItem(index);/*得到所有的子项*/outlookbar.getAllItems();18. SliderbarComp组件名称：SliderbarComp 组件类型：Controls 组件父类：BaseComponent18.1 组件说明SliderbarComp控件，可通过拖动滑块动态改变每一列的百分比。18.2 组件最终效果展示(图3.18-1 用sliderbar控件控制table列宽)18.3 组件皮肤设置说明sliderbar.css文件用来控制此控件的外观。18.4 组件使用说明l 使用tag标签的用法：l 不使用tag标签的用法：var slider = new SliderbarComp(parent, name, left, top, width, , colmNum, defaultColumPercent, className);colmNum:列数，一共有几列defaultColumPerce