`
无尘道长
  • 浏览: 157337 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自己实现的基于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组件库的同学可以下来看看,或许对你有少许帮助,需要说明的是:

  1. 该项目是一个2年前被公司stop的项目,早已被公司抛弃,因此可以公开出来;
  2. 这个项目由于自己和团队的js水平有限,有些用法应该不是最佳实践,而且项目还有一些收尾工作需要做,没有达到产品级;
  3. 源码里面有些组件是直接使用的jquery UI的组件,各种原因,我直接把名字改成了项目名称,很无耻,但是没有办法;
  4. 如果使用chrome等对iframe访问本地文件有安全限制的浏览器查看demo时需要把项目部署到web容器中,通过浏览web项目的方式查看demo效果。

  附上一些界面的截图:

  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:

 

  • 大小: 258.6 KB
  • 大小: 10.5 KB
  • 大小: 7.3 KB
  • 大小: 59.9 KB
  • 大小: 23.7 KB
  • 大小: 43.3 KB
  • 大小: 20.2 KB
  • 大小: 40.9 KB
  • 大小: 27.9 KB
  • 大小: 40.3 KB
  • 大小: 45.8 KB
  • 大小: 31.7 KB
  • 大小: 21.9 KB
  • 大小: 44.3 KB
  • 大小: 14.7 KB
  • 大小: 2.9 KB
分享到:
评论
2 楼 billjoincheer 2014-01-20  
1 楼 liyonghui160com 2013-12-18  
 

相关推荐

Global site tag (gtag.js) - Google Analytics