正在做的一个项目选择jquery作为前端js核心库。然后就想选一个基于jquery的ui库,然后悲催的事情发生了。

至于为什么使用jquery,一是因为不想为授权费用,而又不想引起可能法律纠纷;另一方面jquery也是所有最容易上手和流行的js库。

如果ext要用于商用就要付版权费,这个不行

dojo的文档实在是无语,虽然dojo很强大,但是入门门槛太高,学习曲线陡峭

至于其它的ui库组内也没人用过

于是就选了jquery

接下来找了几个基于jquery实现的ui库,大部分都是收费的,最终确定下来从easyui(后来听说easyui的授权许可与ext类似) ligerui和官方ui里面选一个

jquery ui的样式很难看,所以这次决定换一个别的ui库试试

easyui的layout嵌套有问题,怎么也解决不了,于是就决定使用ligerui。

ligerui的layout嵌套也有问题,不过我想了个办法绕过去了,会损失一些性能。

但是真正悲催的事情来了。

layout各个区域我试过了很多办法都加不上滚动条,center区域的div一通到底,有一部分跟bottom重叠了。grid的得到选择的数据行、添加数据等操作都不好使。而且各个组件提供的api与文档描述出入巨大,开放的api也不够丰富,方法和事件太少。

总之相当不好用,使用它就是噩梦。

最后终于在项目还没有进行太久的时候找机会重新使用jqueryui重构。

虽然jqueryui的样式太难看,但是它还是很好控制的,方法和事件也很丰富。样式难看可以找美工修改这不是大问题。

至于jqueryui没有的那些组件主要是tree、grid、layout、form、menu,前三个都在网上找到了专门的插件,后面两个准备自己实现。

tree推荐使用ztree,中国人自己开发的,网上评价很好,更新也很快。缺点是每次更新,api变化都挺大,一般不敢在项目中升级,否则恐怕要在用到ztree的地方改好多东西。

grid推荐使用jqGrid,大版本号已经升到4,搜索jquery grid、jquery datagrid排名第一,功能丰富,提供普通的datagrid treegrid和分组grid,还有分页条功能。

layout推荐使用jquery.layout。模仿ext的borderlayout实现,但是有很多差异。支持嵌套。样式比较难看,不过修改比较容易。

当时想图省事结果给自己找了大麻烦。

项目正在进入开发阶段之前,技术选型一定要做好,不能因为工期紧、压力大就草率为之。采用某个第三方组件之前必须关注下它的使用者都有哪些、文档丰富不丰富、授权协议、网上的评价如何。最后还要自己实现一些demo测试一下。否则可能会在开发过程中导致严重后果。

教训啊。

前端基于jquery的UI框架的更多相关文章

  1. 基于jquery的ui选择之路

    选定: 主框架:jqueryUi tree:ztree grid:jqGrid layout:jquery.layout 原由: 还有其他demo,ajax实现等参看连接: 正在做的一个项目选择jqu ...

  2. 基于Vue的Ui框架

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...

  3. element-ui iview-admin 都是基于vue的ui框架

    element-ui iview-admin 都是基于vue的ui框架

  4. Unity——基于UGUI的UI框架

    基于UGUI的UI框架 一.Demo展示 二.关键类 MonoSingle 继承MonoBehaviour的单例基类:做了一些特殊处理: 保证场景中必须有GameInit名称的物体,所有单例管理器脚本 ...

  5. 基于vue的UI框架集锦

    前端框架百花齐放.争奇斗艳,令人眼花缭乱.大神们一言不合就整一个框架出来,另小白们无所适从.下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀. (1)Eleme ...

  6. 基于Ant Design UI框架的React项目

    概述 这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目 详细 代码下载:http://www.demodashi.com/demo ...

  7. 移动端Rem适配(基于vue-cli3 ,ui框架用的是vant-ui)

    介绍postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 remlib-flexible 用于设置 rem 基准值 1.安装lib-flexible(用于设置 rem 基准值 ...

  8. 基于vue 的 UI框架 -- Mint UI

    网址: http://mint-ui.github.io/docs/#!/zh-cn 官网: http://mint-ui.github.io/#!/zh-cn vue2.0实例: http://bl ...

  9. 基于Vue的UI框架element el-table表格的自定义排序

    html部分: <el-table-column prop="phoneCache" label="手机缓存包编号" align="center ...

随机推荐

  1. PHP菜刀工具WebHandler

    PHP菜刀工具WebHandler   在Web渗透测试中,后台代码如果包含系统命令执行功能,并以用户提交的数据作为参数,就带来潜在的安全隐患.Kali Linux提供一款PHP菜单工具WebHand ...

  2. 【BZOJ 1061】 1061: [Noi2008]志愿者招募 (线性规划与网络流)**

    1061: [Noi2008]志愿者招募 Description 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短 ...

  3. COJ1013 WZJ的数据结构(十三)

    WZJ的数据结构(十三) 难度级别:D: 运行时间限制:1000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 给你一棵N个节点的有根树(根节点为1),每个节点有权 ...

  4. NOI.AC NOIP模拟赛 第五场 游记

    NOI.AC NOIP模拟赛 第五场 游记 count 题目大意: 长度为\(n+1(n\le10^5)\)的序列\(A\),其中的每个数都是不大于\(n\)的正整数,且\(n\)以内每个正整数至少出 ...

  5. 如何利用JS判断当前来路域名并跳转到指定页面

    1.如何利用JS判断当前来路域名并跳转到指定页面 获取当前请求路径var href = location.href ;if(href.indexOf("baidu")>-1) ...

  6. CentOS 7下启动postfix服务报错:fatal: parameter inet_interfaces: no local interface found for ::1

    sed -i 's/inet_interfaces = localhost/inet_interfaces = all' /etc/postfix/main.cf service postfix re ...

  7. ElasticSearch入门 :Windows下安装ElasticSearch

    这是ElasticSearch 2.4 版本系列的第一篇: ElasticSearch入门 第一篇:Windows下安装ElasticSearch ElasticSearch入门 第二篇:集群配置 E ...

  8. [Winform]关闭窗口使其最小化

    摘要 在用户操作关闭窗口的时候,而不是真正的关闭,使其最小化到任务栏,或者托盘. 核心代码 关闭操作,使其最小化到任务栏. private void Form1_Load(object sender, ...

  9. HDU 1075 What Are You Talking About (strings)

    What Are You Talking About Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 102400/204800 K ...

  10. Linux声卡驱动框图

    1.声卡驱动注册完成后的框图 2.open & hw_params 完.