自己实现的基于jquery的UI组件库
在上一家单位做软件开发平台(2012年前的事了),一做就是近5年时间,在离开的最后一段时间,中心觉得应该做一个自己的jquery UI组件库,但是团队中没有NX的JS高人,要招一个合适的做过JS UI组件库的同学实在太难,似乎我的JS水平比他们略高一些,加上我比较好学,喜欢专研技术,不怕苦,因此这个重担就落在我的头上了。
由于之前对js、html、css掌握的不是很好,因此买了若干书,边看边练,做了不少练习和总结,然后开始组建团队并集中培训,在具体设计前,调研了EXT、Jquery UI、Dorado、YUI、easyUI,甚至包括SAP的Web Dynpro,最后决定基于jquery和jquery UI,在jquery UI上进行扩展,实现Grid、Tree等组件,这个项目从准备、需求到设计、实现最后形成可演示的Demo,总共花了半年时间。
我在上家公司虽然从一线开发做到team leader、开发经理,最终负责整个开发平台(20多人的规模),但是没有做过从一无所有到出成果的这么一个项目,从始至终,需求、设计、开发等等完全由自己控制,因此想做好的愿望尤为强烈(从那时开始养成做事情就想做好的习惯),有了愿望就累了,除了我规定的项目团队每周必须加3天班外,我自己在家周末也会加班。
这个项目,我搭好了框架,并自己实现了最复杂的表格组件Grid,最后形成了演示Demo后,由于公司合并等原因导致项目终止,后来我也离开了这个呆了近5年的公司,这已经过了2年时间了,经常还想起当初做的这个UI组件库,总想为它做点什么,今天实在是忍不住,就写一篇blog,表达一下心情吧,并把我的这个项目源码奉上,有想了解grid实现原理或者想自己开发Ui组件库的同学可以下来看看,或许对你有少许帮助,需要说明的是:
- 该项目是一个2年前被公司stop的项目,早已被公司抛弃,因此可以公开出来;
- 这个项目由于自己和团队的js水平有限,有些用法应该不是最佳实践,而且项目还有一些收尾工作需要做,没有达到产品级,还请看得同学多多体谅;
- 源码里面有些组件是直接使用的jquery UI的组件,各种原因,我直接把名字改成了项目名称,很无耻,但是没有办法。
附上一些界面的截图:
1、演示demo主欢迎界面
2、html组件
3、树型组件
4、Grid组件
Grid组件的主要实现逻辑:
1、渲染前:
a、分析用户配置项options:主要是列定义columns属性;列数据data属性等
b、计算Grid界面的布局信息,比如:Grid的宽、高、布局div的top值等
c、准备模板
2、渲染:
a、传给jquery的jtemplates模板插件模板和模板数据(数据、布局信息等)在浏览器中渲染出Grid表格
3、渲染后:
a、对Grid渲染后的界面进行补充处理,比如:对Grid进行隔行换色、检查是否需要出现滚动条等
b、为Grid组件绑定事件处理器
Grid的渲染分两部分进行:非body部分(标题栏、列头、查询输入框等),body部分(展示数据的区域),非body部分在body部分之前渲染。
Grid组件部分截图如下:
最后附上源代码,由于iteye对附件大小有限制,因此删除了依赖的jar包,需要自己copy相应的jar文件到lib目录下才可以运行,依赖的jar:
-
本文附件下载:
- sotower-ui.rar (9.6 MB)
已有 0 人发表留言,猛击->> 这里<<-参与讨论
ITeye推荐
相关 [jquery ui] 推荐:
jQuery Tools:Web开发必备的 jQuery UI 库
- - 博客园_首页免费的 jQuery UI 主题集合
- - 博客园_iTech's Blog分享一款jQuery的UI插件:Ninja UI
- - CSDN博客推荐文章自己实现的基于jquery的UI组件库
- - Web前端 - ITeye博客UI框架选型
- - ITeye博客JQuery 选择器
- - CSDN博客Web前端推荐文章点击我
. 像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.点击我
. //给class为demo的元素添加行为.