自己实现的基于jquery的UI组件库

标签: jquery ui | 发表时间:2013-12-18 01:00 | 作者:无尘道长
出处:http://www.iteye.com

  在上一家单位做软件开发平台(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的组件,各种原因,我直接把名字改成了项目名称,很无耻,但是没有办法。

  附上一些界面的截图:

  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:

 





已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery ui] 推荐:

[转] jQuery ui框架

- - CSDN博客Web前端推荐文章
   jQuery ui框架很多,除了官方提供的 jquery UI(如果你还不知道什么是 jQuery UI,请看 下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于 jquery核心类库实现的ui框架.

jQuery Tools:Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validator(表单验证)、Rangeinput(范围选择)、Dateinput(日期选择)等众多功能.

免费的 jQuery UI 主题集合

- - 博客园_iTech's Blog
转自: http://www.iteye.com/news/26308. jQuery UI是jQuery用户界面组件库,提供了大量广泛使用的部件和功能,包含常用的日期选择器、滑块、手风琴效果、进度条、拖拉支持等,而且它是主题化的,可以利用ThemeRoller自定义自己的主题. 本文整理了一些高度自定义、免费并且质量高的 jQuery UI主题(如Bootstrap或Windows-Metro),希望对你有所帮助.

分享一款jQuery的UI插件:Ninja UI

- - CSDN博客推荐文章
日期:2011/12/26  来源: GBin1.com. 今天分享一款jQuery的UI插件 -. Ninja UI,这个插件使用jQuery本身的语法来开发界面元素,而且你不需要关注CSS样式相关设定,因为整个CSS样式都被直接写到了插件中,不过坏处是,你需要在开发前就确定好CSS,同时目前提供俩个类型的主题.

自己实现的基于jquery的UI组件库

- - Web前端 - ITeye博客
  在上一家单位做软件开发平台(2012年前的事了),一做就是近5年时间,在离开的最后一段时间,中心觉得应该做一个自己的jquery UI组件库,但是团队中没有NX的JS高人,要招一个合适的做过JS UI组件库的同学实在太难,似乎我的JS水平比他们略高一些,加上我比较好学,喜欢专研技术,不怕苦,因此这个重担就落在我的头上了.

UI框架选型

- - ITeye博客
  最近公司的一个新项目要进行UI框架的选型,我把选型的思路和过程跟大家分享一下.   在选型之前,我们先要定一下选型的标准,就像人生一样,想清楚“自己要的是什么”是最重要的.   选型的标准分为几部分:. 业务是根本,和大部分的技术一样,框架没有好坏之分,只有适合与不适合.         我们项目是一个通讯类的监控项目,用户群是移动、电信等运营商的运维人员,系统的特点是:.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.