UI框架界面框架(企业不用再为美工发愁).ppt

360UI界面集成框架,产品介绍,概述,“360UI”网页界面集成框架是一套完整的BS模式系统界面解决方案。提供给设计和开发WEB应用的人员使用。适合用于自动化办公、电子政务和RIA应用等系统的开发中。,特点,本框架采用基于模板开发的理念，让使用者在开发系统时能够无需关心界面表现和兼容性等方面，通过简单的复制粘贴和非常小的修改量就能够方便地制作出精致美观、兼容性强的系统界面，从而把精力集中在系统功能的设计和实现上，提高开发效率，降低开发成本。,亮点1：十余套各种结构的主页,每套主页都有很多种不同风格的皮肤，下面是以天蓝色风格为例。关于框架皮肤将在后面介绍。,十大亮点,结构1：纵向抽屉式导航,结构2：纵向多级菜单导航,结构3：纵向标签式导航,结构4：树结构导航导航,结构5：纵向二级列表导航,结构6：纵向抽屉式图标导航,结构7：横向多级菜单导航,结构8：横向二级导航栏导航,结构9：横向一级标签+纵向导航,结构10：横向图标+纵向一级/二级列表导航,结构11：横向二级标签+纵向一级/二级列表导航,结构12：横向二级导航栏+纵向一级/二级列表导航,亮点2：各种常用的内容页面模板,以下只展示了部分模板，更多模板请访问在线版,十大亮点,举例1：图标导航,举例2：数据表格,举例3：表单样式,举例4：表单验证,举例5：表单拆分,举例6：多层嵌套,举例7：EXT布局模式,亮点3：对网页原有组件进行改进,以下只展示了部分组件，更多组件请访问在线版,十大亮点,举例1：信息提示（title）,鼠标移入后立刻出现； 改进了提示框的样式； 支持内嵌HTML； 支持自定义提示框风格。,举例2：数据表格(table),表格隔行同色，鼠标移入和点击分别有变色效果； 表头可固定，如果是排序模式表头会出现箭头并响应鼠标移入和点击； 如果第一列是checkbox可以自动添加全选按钮； 表格每项额外功能都可通过参数灵活配置,举例3：文本框/密码框(input:text/password),鼠标悬停和点击分别有变色效果； 可以设置出现水印； 可以设置在输入时出现小叉子，用于清除输入的文字； 可以设置最大允许输入数，并出现剩余字数提示； 密码框会自动检测大写键是否开启； 密码框可以设置检测密码强度。,举例4：文本域(textarea),鼠标悬停和点击分别有变色效果； 可以设置出现水印； 可以设置最大允许输入数，并出现剩余字数提示； 可以设置通过拖拽或回车来动态增大文本域尺寸。,举例5：按钮(input:button),鼠标悬停有变色效果； 可以为按钮增各种各样的小图标。,举例6：多选按钮(input:checkbox),支持自定义风格样式； 鼠标移入文字就会出现手型来响应点击。,举例7：上传控件(input:file),支持自定义风格样式； 上传文件后鼠标悬停会提示完整路径。,举例8：单选下拉框(select),支持自定义风格样式； 在IE6下不会处于层的上方； 支持分组、自定义列数、可编辑、无限级联动等功能,举例9：多选下拉框(select:multiple),支持自定义风格样式； 在IE6下不会处于层的上方； 选择后，鼠标悬浮会提示所有选中的选项； 可通过属性做个性化配置，如某项始终处于最上、最多允许选择几项等。,举例10：警告框/确认框(alert/confirm),支持自定义风格样式； 警告框更加友好。,举例11：弹出窗口(window),支持自定义风格样式； 可无限层级弹出窗口； 可通过参数做个性化配置。,亮点4：新增非常多的实用组件和特效,以下只展示了部分组件，更多组件请访问在线版,十大亮点,举例1：浮动面板,一个页可以使用多个面板，可以在8个方向弹出面板； 面板内容可以在本页内也可以使用iframe模式嵌入其他页 通过参数可灵活配置表现，如尺寸、按钮文字、动画时间、初始时是否打开、初始是否以动画形式展示等,举例2：进度条与弹出式提示框,可以通过一句话方便地使用进度条或弹出式提示框； 弹出式提示框可以通过参数进行灵活配置，如提示框的尺寸、停留时间、自定义弹出时的声音等。,举例3：树形表格,举例4：拓展的表单元素（1）,举例5：拓展的表单元素（2）,举例6：常规菜单,举例7：另类菜单,举例8：容器类,举例9：图表类,部分特效目录,由于特效很难在平面图上体现，建议访问在线版本观看,亮点5：提供很多常用的RIA实例,以下只展示了部分实例，更多实例请访问在线版,十大亮点,举例1：仪表盘,举例2：日程安排,举例3：图片添加标注,举例4：图片裁剪,举例5：组织结构图/流程图,举例6：360物品查看,亮点6：包含完备的CSS样式库,十大亮点,CSS库简介,简单说来css库就是一些已经写好的css，要实现网页外观上的调整只要使用class=“xxx”就可以了，不必再写css。 充分利用css库能够很大程度地提高效率。例如要实现一段文字显示为红色，并且向左偏移10px，一般的做法是，先为标签的class起个名字，html如下： 要处理的文本 然后再写css .style1padding-left:5px;color:red; 如果使用css库，则只要 要处理的文本,CSS库包括内容,控制基本布局（浮动 对齐 行高等） 控制表现（宽高、颜色、字号、缩进） 控制定位 （上下左右的偏移量） 图标库,图标库,图标库集成了大量的图标。使用起来非常简单。例如下面代码： 修改 就创建了一个修改图案的图标。 图标除了可以单独使用，还可与其他组件合用。例如可以为按钮、菜单项、工具条等添加图标，如：,亮点7：组件与特效使用非常简单,十大亮点,举例1：提示信息,只需要对标签添加一个title属性，如下： 信息提示示例 就创建了一个提示信息。效果如下：,title可以用在很多标签中，如span、div、a、img、input等,举例2：盒子模型（多功能容器）,只需要把div的class设为box2，并添加一些设置宽高和标题文字的属性，如下： 内容区域内容区域内容区域内容区域 就创建了一个多功能容器。效果如下：,该容器可自定义宽高、自定义标题、可设置是否出现右上角文字并可自定义该文字内容和功能。默认功能是收缩和展开。,举例3：警告框,只需要将普通的alert(xxx)前面加上 top.Dialog，如下： top.Dialog.alert(“这里是提示信息“); 就改造成了一个友好的警告框。效果如下：,确认框和弹出窗口的使用同样也很方便。,举例4：弹出式提示框,写如下代码： $.messager.show(0,提示内容！,10000,message.mp3); 就创建了一个弹出式提示框。效果如下：,4个参数分别用来设置：标题、内容、弹出后停留时间、弹出时播放的声音文件,举例5：文本框,为普通的文本框标签添加watermark=“xxx”则有水印功能： ,设置文本框的clearable属性为true,就会在输入时出现一个小叉子，用于清空： ,对文本框设置maxNum属性可以限制文本框的最大输入字数，并在输入时出现提示： ,对密码框设置checkStrength=“true“会检查密码强度： ,举例6：单选下拉框,渲染的下拉框的写法和用法与原始的select完全一样。如 新增图片维护图片 当为select标签添加editable=“true”时就变成可编辑的下拉框 添加colNum=“xx”就可以自定义下拉框的列数 添加childDataPath设置数据来源并添加childId指定想要联动的下拉框就创建了联动下拉框,举例7：日期控件,为普通文本框添加class=“date” ，如下： 就变成一个日期控件。效果如右侧所示：,再添加dateFmt属性可以设置日期控件的现实方式 ，例如： 就可以只显示时间，效果如右侧所示：,举例8：表单验证,对需要验证的表单元素加上class=“validateXXX”，其中XXX是验证规则，例如required表示必填项，length0,20限制字符长度在20字以内。验证规则可写多个。代码如下： 则该文本框属于必填项，只能输入中文，不超过20个字符。若填写不符合规则，效果如下：,框架中自带了10多种验证规则，另外还可以通过正则表达式自定义验证规则。,亮点8：非常丰富的皮肤样式,十大亮点,在前面以天蓝色风格为例展示了框架的10几种不同结构的主页和内容模板以及各种组件。除了天蓝色风格外，框架本身还自带了10多套不同风格样式的皮肤。 只需要更改主页的两个参数值即可实现切换成另一种风格（支持动态换肤） 。 同时也支持用户自己设计皮肤。,12种不同结构的主页中每种结构都有8-10套皮肤,切换成亮蓝色风格,切换成橙色风格,组件自动换肤,当更改主页参数进行换肤后，系统的所有内页与组件都会自动获取主页的配置来更换风格。无需对每个内页再做配置。例如更换了橙红色的风格，则组件风格变成如下效果：,多达140套精心设计制作的登录页面皮肤,登录页风格之一,登录页风格之二,亮点9：完美的浏览器兼容性,十大亮点,框架在整个制作过程，通过多种兼容性技术一直确保在各主流浏览器中做到兼容。 目前可以与以下主流浏览器完美兼容： windows中： IE6、IE7、IE8、FireFox、Chrome、Safira Linux中： FireFox,