①绝密信息 严禁泄露 版权所有 © 金蝶软件（中国）有限公司 ①绝密信息 严禁泄露 BOS WEB 平台系 统部 WAFII 控件介绍

①绝密信息 严禁泄露 P2 了解 WAFII 控件整体和使用控件的基本方法 了解 WAFII 样式框架和如何进行二次开发 目的

①绝密信息 严禁泄露 P3 特色 – 基于 Jquery 进行封装 – 统一风格的 UI 展现 – 支持流体布局，随窗口大小变化，无横向滚动条 – 全面的 Form 控件，友好的校验及信息提示 – 用户体验的提升 – 多浏览器的支持 – 支持全键盘录入操作 – 多主题与多皮肤 –CSS3 的相关应用 – 动态层取代弹出窗口 – 强大的表格展示和可编辑表格 – 国际化 –…… 控件特点

①绝密信息 严禁泄露 P4 概括 – 提供了 35 个主要控件 & 控件帮助系统 – 每个控件由 JS 、 TAG 和 CSS 组成 – 主要包括： UI 控件 – 文本框，下拉框，日期， F7 ，数字框，文本域，多语言框， Radio 、 RadioGroup ， Checkbox ，隐藏域，文件上传、标签控件、按钮、菜单、 菜单项、菜单按钮、显示表格、可编辑表格、树、窗口、提示控件、进 度条、浮动提示 容器控件 – 侧边栏、标签容器、大纲控件、 Panel 控件、栏目控件、 Tab ，工具栏 布局控件 – 列布局 功能控件 – 自动完成、校验控件、阻塞 WAFII 控件整体介绍

①绝密信息 严禁泄露 P5 概括 – 基于 Jquery – 继承自 Jquery UI Widget – 具有 jqueryui widget 一样的调用方法 – 支持自定义的扩展继承 – 统一的 CSS 控制 WAFII 控件技术

①绝密信息 严禁泄露 P6 界面设计 – 在 BIM 工具上拖放，然后设置属性、事件和方法 编码 – 控件属性 属性的设置和获取通过 option 方法来完成 有些属性不支持运行期的动态更改 Waf(“#id”).wafPromptBox(“option”, “displayFormat”) ； – 控件方法 调用格式统一为： –waf(“#id”).xxxx(“methodName”,paramters…..) –Xxxx 为控件对应的 JS 名称，比如 –Waf(“#id”).wafPromptBox(“open”) ； – 事件 事件的获取和设置通过 option 方法来完成 Waf(“#id”).wafPromptBox(“option”, “onchange”,function(){}) WAFII 控件的使用方法

①绝密信息 严禁泄露 P7 常用属性说明 –id ：唯一标示符，不能重复 –name: 名称， form 控件中绑定到对应的 model 属性 –value ：初始值，可接受 el 表达式 –tagClass ：样式类，对应 HTML 标签的 class ，需要写到 css 文件中 –style ：样式，对应标准 HTML 标签上的 style –width ：宽度 –heigh ：高度 –readonly ：只读 –disabled ：禁用 –maxlength: 输入的最大字符数 –tabindex ： tab 顺序 –hidden: 隐藏 WAFII 控件的使用方法

①绝密信息 严禁泄露 P8 常用方法说明 –option ：获取控件的属性或者更改控件属性 –getValue: 获取控件的值，一般用在 form 控件中 –setValue ：设置控件的值，一般用在 form 控件中 –disable ：禁用控件 –enable ：启动用控件 常用事件说明 –onchange ：值改变事件，参数包括改变前和改变后值 –onkeydown: 在文本框上按下键盘上的键时触发 –onkeyup: 在文本框上释放按键时触发 WAFII 控件的使用方法

①绝密信息 严禁泄露 P9 帮助系统 控件库帮助 控件 API 说明 控件样例 FAQ CSS 参考 开发指南 框架 API 用户手册 地址 ( 外网 ) ( 内网 ) WAFII 控件整体介绍

①绝密信息 严禁泄露 WAF Ⅱ帮助系统

①绝密信息 严禁泄露 WAF Ⅱ帮助系统

①绝密信息 严禁泄露 WAF Ⅱ表格控件

①绝密信息 严禁泄露 WAF Ⅱ F7 控件

①绝密信息 严禁泄露 WAF Ⅱ 树控件

①绝密信息 严禁泄露 WAF Ⅱ Form 控件演示

①绝密信息 严禁泄露 WAF Ⅱ 窗口与提示控件演示

①绝密信息 严禁泄露 WAF Ⅱ 菜单与工具栏演示

①绝密信息 严禁泄露 WAF Ⅱ 标签容器和校验控件演示

①绝密信息 严禁泄露 WAF Ⅱ 列布局演示

①绝密信息 严禁泄露 WAF Ⅱ 页签、栏目、进度条、上传演示

①绝密信息 严禁泄露 P21 WAF Ⅱ CSS 框架介绍 Core –Reset.css 中重置了基本标准元素的相关属性，使其达到各个 浏览器下的一致性 –Content.css 中设置了总体的字体，背景色，链接, 普通表格的 css 等 –Iehack.css 为 ie 的补丁文件，设置了基本元素相关的 hack ，比 如激活 hasLayout 属性. Pages –Skin ：这个目录存放了当前主题下的皮肤切换。目前提供了 eas705 和 eas703 的皮肤，主要是页面，组件，控件等的颜色、 背景图片等的处理。 –Template ：这个目录根据不同的页面类型设置了不同的 css 文 件，比如列表界面，查看界面，编辑界面等。这些界面在模板 中被引用。 –Form.css: 定义了 form 中常见元素的样式，比如各个控件的默 认宽度，高度等 –Page.css: 设置了各个页面的顶级结构 –Jqueryui: jqueryui 目录中放置了 jqueryui 相关的各个控件的 css

①绝密信息 严禁泄露 P22 CSS 与模板、业务单元 Styles 目录下只提供了基本的 CSS 设置，具体到每个模板中的每个页面，还需要根据各个 页面的相关布局等进行另外设置。每个主题方案都默认提供了五个基本的页面模板，分别为 listpage.css, editpage.css, viewpage.css, nullpage.css, treelistpage.css 。各个模板会根据不 同的页面选择设置不同的页面类型。 每个页面引入的 CSS 类型 –Standard_all.css : 标准主题的 css ，每个页面都有且固定 –eas_all.css: eas 皮肤的 css ，根据用户选择的皮肤而定 –generationBillList.css: 当前业务单元继承或复制的模板对应页面 的 css –xxxxList.css: 当前业务单元当前页面的 css ，比如这个为列表界面 的 css

①绝密信息 严禁泄露 P23 CSS 的二次开发 CSS 的二次开发主要指的是业务自己覆盖或者更改框架已经提供的默认的 CSS 设置，请按照 以下事项进行设置。 注意事项 – 业务自己开的 CSS 写到当前页面的 CSS 中，请不要单独在页面 jsp 中加 style. – 请做局部性的或者某个点的设置，不要做全局性的。 – 通过 id 来进行 css 的修改 – 设置专有的命名空间，然后再设置这个命名空间下的其他控件样式 – 特别注意优先级： 1.!important 2. 行内 style 3.Id 选择器 4. 类选择器 5. 类型选择器

①绝密信息 严禁泄露 Thanks terima kasih 感謝 谢谢 ありがとう ขอบคุณ 版权所有 © 金蝶软件（中国）有限公司 ①绝密信息 严禁泄露

P25 特别声明 没有金蝶软件国际软件集团有限公司的特别许可，任何人不能以任何形式或为任何目的复制或传播本文档的任何部分。本文档中 包含的信息如有更改，恕不另行通知。 由金蝶软件（中国）有限公司和其分销商所销售的某些软件产品包含有其它软件供应商版权所有的软件组件。 Microsoft® 、 WINDOWS® 、 NT® 、 EXCEL® 、 Word® 、 PowerPoint® 和 SQL Server® 是微软公司的注册商标。 IBM® 、 DB2® 、 DB2 通用数据库、 OS/2® 、 Parallel Sysplex® 、 MVS/ESA 、 AIX® 、 S/390® 、 AS/400® 、 OS/390® 、 OS/400® 、 iSeries 、 pSeries 、 xSeries 、 zSeries 、 z/OS 、 AFP 、 Intelligent Miner 、 WebSphere® 、 Netfinity® 、 Tivoli® 、 Informix 和 Informix® 动态 ServerTM 是国际商业机器公司在美国或其他公司的商标。 ORACLE® 是 ORACLE 公司的注册商标。 UNIX® 是 UNIX INTERNATIONAL CO.,LIMTED 的注册商标、 OSF/1® 和 Motif® 是 Open Group 的注册商标。 Citrix® 、 Citrix 徽标、 ICA 、 Program Neighborhood® 、 MetaFrame® 、 WinFrame® 、 VideoFrame® 、 MultiWin® 以及此处引用 的 Citrix 产品名是 Citrix Systems 公司的商标或注册商标。 HTML 是 HATEMOGLU TEKSTIL GIYIM SANAYI VE TICARET A.S. 的注册商标， DHTML 、 XML 和 XHTML 是 W3C® 、 World Wide Web 协会、计算机科学实验室的商标或注册商标， PureXML 是国际商业机器公司的注册商标。 JAVA® 是甲骨文美国有限公司的注册商标。 JAVASCRIPT® 是甲骨文美国有限公司的注册商标，由其技术开发和实施商 Netscape 许可使用。 Apusic ® 是深圳市金蝶中间件有限公司的注册商标。 本文档提到的金蝶 ® 、金蝶 KIS ® 、 K/3 ® 、金蝶 EAS ® 、友商网 ® 和其它金蝶 产品和服务以及它们各自的徽标是金蝶软件（中 国）有限公司在中国和世界其它一些国家的商标或注册商标。本文档提到的所有其它产品和服务名称是它们各自公司的商标。