UI框架升级(UI界面框架)

原创
2013/07/03 13:06
阅读数 788

1)新增强大的组件suggestion

         之前框架提供了一款叫做autoComplete的自动完成框,当输入时,后台经过匹配,给它传递文本赋值,实际上它是文本框的扩展。

后来很多客户都向我提出建议,希望它除了存储显示的文本外,还能存储value。另外很多人还希望它具有下拉框的功能,可以直接点击出现下拉列表。所以这次花了大量的精力开发了这款suggestion组件。


点击时会出现下拉列表,你可以像下拉框一样使用它。也可以在文本框里直接输入,它自动进行筛选。可以直接使用上下箭头进行切换选择,左右箭头进行翻页,回车进行选中。

此外,通过为组件增加属性可以配置下拉列表的显示方式,还可以自定义图标。例如可以实现如下的效果:


另外,原来组件的功能在新组件中也保留。例如可以每次输入后台随时反馈匹配结果,这样可以将结果与输入的关联起来。


 

2)新增强大的组件selectCustom

这款组件叫做组合式下拉框。之前框架提供的下拉框方案主要包括:单选、多选、树形单选、树形多选。虽然已经能够满足绝大部分的需求,但某些特殊情况可能还不够。

而这款组件理论上可以与框架其他的任意组件做组合,从而实现非常个性化的需求。例如它可以弹出一个grid表格:


可以与其他组件组合


只要发挥想象,你可以用它组合出非常实用的功能。

 

3)表格新增打印功能

         通常情况浏览器打印只能是页面显示什么打印什么,无法实现打印特定的内容。

         3.2版本整合了一个打印控件,可以轻松实现表格数据的打印。可以控制打印当前页面数据、打印选中行的数据或者打印所有的数据。

         这时grid表格的打印预览效果。


         这时table表格的打印预览效果。


 

 

如果看到这里还没有激动起来,别着急,继续往下看:

4)弹窗新增功能

弹窗可以最小化到任务栏中了!

这对于同时弹出多个窗口的需求(例如网页聊天或工作桌面等)非常实用。并且最小化和还原的效果也非常炫。为每个弹窗设置ID那么就能保证该弹窗的唯一性。这样再次点击弹窗时如果该窗口处于最小化则会自动还原。


当窗口过多任务栏放不下时会自动出现左右箭头,进行左右滚动。

此外弹窗还新增了自定义图标的功能。

 

5)盒子模型新增功能

         现在可以实现同一套皮肤中自定义多种盒子模型的外观了!

         以前版本一个盒子模型只有一个外观,如果想要不同的外观,要么更换皮肤,要么使用不同的盒子,例如class=box2class=box3时两个组件,但实际上box2box3在功能上是一样的,box3只是box2的另一种样式。如果希望再增加新的样式就做不到了。

3.2版本对盒子模型进行了重构。盒子模型的外观通过class来区分,而功能通过boxType属性来区分。例如可以为div添加一个自定义的class来定义外观,如class=”box_custom”。这时如果希望它拥有box2的功能,为其增加属性:boxType=”box2”即可。


此外,盒子模型还增加了自定义图标、副标题等功能。

 

6)浮动面板新增功能

         浮动面板增加了状态改变事件,以满足一些用户的个性化需求。


 

7)展出式提示框新增功能

         展出式提示框可以自定义外观了!

展出式提示框新增了一个参数,可以传递class的名字,这样能够实现不同风格的提示框。例如一般的提示用蓝色风格,而告警信息的提示用如下的红色风格:

        

 

8)树组件新增特性

         框架使用的ztree组件全面升级了!

ztree树组件由原来的3.1版本升级到官方的3.5.13。并将ztree组件的API整合到框架的开发指南文档中,这样查阅起来更加方便。

此外,还特定为树组件制作了很多实用的示例。例如以下两个示例分别是自定义树的外观实现的公交线路查询效果和树组件的分页。


 

9)按钮新增特性

         基本按钮和图标按钮可以自定义外观了!

         之前版本中虽然可以为按钮增加一个class来自定义外观,但这样将不会被框架所渲染,也就是没有鼠标移入效果,图标按钮也将失效。

3.2版本允许为按钮增加class来自定义样式,只要不添加keepDefaultStyle=”true”,那么就会被框架所渲染。这样会拥有鼠标移入效果,也可用于图标按钮。


此外,按钮还新增了一个toggle属性,可以把它变成toggle模式按钮toggle模式下按钮按下时会停留一个状态,再按下后取消该状态,同时会存储一个值。配合自定义样式可以实现很多个性化的东西,例如开关按钮。


 

10)单选下拉框新增特性

         下拉框可以获取除keyvalue以外的数据了!

         之前版本的下拉框只能获取数据的keyvalue3.2中可以为数据增加任意的属性,都可以获取该属性值。

此外,下拉框联动增加了初始赋值特性。

        

 

11)树形下拉框新增特性

树形下拉框支持节点的异步加载了!

3.2中的树形下拉框新增异步加载模式,适合数据量非常大的情况。参数传递机制与树组件的异步加载机制完全一致。


此外,树形下拉框也可以获取除keyvalue以外任意自定义属性的数据。

 

12)双向选择器新增特性

         双向选择器可以设置可选的最大条数了!

        

 

13)树形双选器新增特性

         树形双选器支持节点的异步加载了!

         3.2中的树形双选器新增异步加载模式,适合数据量非常大的情况。参数传递机制与树组件的异步加载机制完全一致。

        

 

14)条件过滤器新增特性

         条件过滤器支持自定义图标了!

        

可以为每个选项设置任意的图标。

 

15)数字步进器新增特性

         数字步进器新增了change事件,以满足一些用户的个性化需求。

 

16)同步上传控件新增特性

         同步上传控件支持自定义组件宽度了!

        

并且可以全面兼容各种浏览器。

 

17)表单验证新增特性

         表单验证新增了文本域验证、组合下拉框验证selectCustom、自动提示框suggestion验证和同步上传控件的非空验证。

 

18)表单编辑异步json赋值的改进

         之前版本中组件在页面初始化时已经被渲染了,json赋值后又重新渲染一遍。

         3.2版本异步json赋值时可以为每个组件新增fillType属性。这样初始时组件初始时将不被渲染,json赋值后才被渲染,以改进性能。

 

19grid表格新增特性

         Grid表格可以通过外部控制某些行的选中了!

        

         并且拥有选中的分页记忆功能。

         此外,还增加了如下示例:

Ø  可以动态的重新渲染成另一个表格,数据和列都可以不一样;

Ø  可以初始时不加载数据,动态设置url加载数据;

Ø  可以对内容作格式化处理;


Ø  可以动态设置滚动条的位置;

        

Ø  可以禁用或隐藏工具条中的某些项,方便和权限控制整合;

        

Ø  新增大数据量示例,一次加载500多条数据。

详细参见:www.360ui.net

展开阅读全文
打赏
0
4 收藏
分享
打赏
0 评论
4 收藏
0
分享
返回顶部
顶部