是时候好好安利下LuLu UI框架了!

这篇文章发布于 2018年06月12日,星期二,21:13,归类于 jQuery相关。 阅读 59250 次, 今日 3 次 56 条评论

 

你问我有什么不同?

只是更自由,更纯粹,和用户走得更近。

你好,LuLu!

LuLu UI是一个基于jQuery,针对PC网站,兼容IE8+或IE7+的前端UI框架,包含20+静态或动态UI组件。

LuLu UI是一个非常适合面向用户网站产品的前端UI组件库,包含20+静态或动态UI组件,根据主题不同,可以兼容到IE9+或IE8+或IE7+。

目前支持3个主题:

  • modern主题。基于jQuery,兼容IE7+,针对PC网站。分sass, css和js 3个目录,如果你不想要sass,那这个文件夹就不用管。图片资源在css目录下。
  • peak主题。基于jQuery,兼容IE8+,针对PC网站。分sass, css和js 3个目录,如果你不想要sass,那这个文件夹就不用管。图片资源在css目录下。
  • pure主题。原生JavaScript编写,兼容IE9+,PC,Mobile网站通用。分css和js 2个目录,没有图片资源目录,所有图像CSS内联。

贴近用户

LuLu UI更温暖,更自然,更亲近,更关注细节和用户体验,对用户侧非常友好,因此,非常适合面向外部用户的网站开发。有别于Ant Design这类更适合中后台开发的UI框架。

上手简单

LuLu整个项目就是提供一些UI组件的JS和CSS,很纯粹的JS和CSS,没有任何矫揉造作的“变身”处理。

因此,想要使用LuLu UI,直接引入CSS和JS文件地址就可以使用了。HTML还是原来的HTML,CSS还是原来的CSS。什么Vue什么MV*什么高大上概念完全不需要掌握,参照文档,复制复制,粘贴粘贴,效果就出来了。

API文档参见:LuLu UI API中文文档

使用场景广泛

LuLu UI既保留了jQuery插件即插即用的特性,也支持适合多人合作的模块化加载方式,因此适用场景更加广泛。

例如:

  • 单人完成的某个简单运营活动页,需要个弹框提示功能,可以直接引入LuLu UI中的Dialog.js,就可以使用了。
  • 某网站看中了LuLu UI某一个组件,例如日期选择功能,想拿过来使用,<script>引入日期选择JS,然后就可以使用了。
  • 对于多人合作大型项目,可以使用类似seajs这样的加载器进行模块化加载与开发。

所有组件无论是单独使用,还是体系内使用,文档均提供了demo演示。

成熟

LuLu UI 2015年就诞生了,到现在已经有3年了,跟那些年轻的UI框架不同,LuLu UI可是见过很多世面的,谦逊内敛不聒噪,没必要大肆鼓吹,口碑说话。

开源是件严肃的事情,LuLu UI一直认为,如果组件还没有达到不动如山的境地,那就应该继续埋头打磨。这么多年过去了,经过对内对外多个大中小型项目的验证与打磨,无论是交互细节还是代码本身细节,LuLu UI现在都已经可以做到不显山露水了。

体验好

LuLu UI不会把什么“极致体验”挂在嘴上,极致是没有尽头的。LuLu UI也就做到用户使用无感知这种程度。

举个例子,如果用户是通过鼠标点击按钮打开的弹框,则弹框界面平平无奇;如果用户是通过ENTER回车键点击按钮打开的弹框,则弹框中的按钮默认会outline高亮!

见下面截屏示意:

除了多年不断优化的无数交互小细节,LuLu UI还适配retina视网膜屏幕,同时支持屏幕阅读设备无障碍访问,以及很少UI框架支持的keyboard键盘无障碍访问。坐下,坐下,都是基本操作而已。

代码学习素材

LuLu UI的JS代码非常适合萌新参考与学习。

层次简单,逻辑清晰,注释详尽与规范,代码朴实无华,没有炫技,非常适合阅读和理解,是不可多得的学习素材。

与众不同的设计思想

表现为3点:

  1. 面向设计理念;
  2. 没有版本概念;
  3. 面向HTML开发

面向设计理念让LuLu UI在视觉和交互表现上更有情感,更有温度;摒弃面向功能那种大而全开发思想,于是LuLu UI的代码更加简约,组件更轻便灵活。

LuLu UI框架是没有版本的概念,只有一个唯一的母体在慢慢迭代。当面对一个新的项目,拷贝这个母体,然后这个拷贝的LuLu UI就和项目耦合在一体,与母体没有任何关系,你就可以根据设计需求、产品需求任意修改项目中的LuLu UI的CSS和JS,从而保证视觉还原,产品品质和开发质量。

面向HTML开发,使得LuLu UI更语义,对辅助设备更友好,同时技术栈更偏向HTML和CSS,也使得广大JS相对偏弱,在视觉表现较强的前端更容易上手,可以更友好地还原设计和增强体验。

LuLu UI所有与众不同的设计思想,都是方便外部用户,方便体验侧前端同学进行开发,方便设计师视觉还原和创意实现,归根结底可以有更好的用户体验和产品品质。如果是面向中后台开发的UI框架,则会面向数据,面向功能设计,组件应用会规避书写CSS和HTML,以方便开发侧前端同学进行开发。可见不同产品形态和不同用户群体决定了不同了UI框架设计理念。

设计师同事一定会很喜欢LuLu UI框架的。

稀缺性

既懂设计又会代码同时在体验方向有较多积累的前端是稀缺的。所以,LuLu UI也是稀缺的,在PC端用户侧网站开发上,LuLu UI有着不可匹敌的竞争力!

阅文前端荣誉出品

感谢前腾讯诸位同事,现阅文诸位同事在LuLu UI建设上的帮助。

分享到:


发表评论(目前56 条评论)

  1. sp42说道:

    今时今日还没上 MVVM,实话说,是倒退,君不见 MVVM 带来革命性的生产力?

  2. 努力进阶得小青蛙说道:

    input带计数得,不会自动计数啊,真想贴图

  3. llq说道:

    文章图片为什么加载不出来

  4. 菲菲说道:

    我看可官网,怎么说呢,里面的设计很有质感,很温暖的感觉,看着很舒服,但是有个遗憾就是没有自适应的功能。如果有这个功能的话,就完美了。

  5. 回校的第一天说道:

    日期插件,翻页的左右箭头在ie9会出现同一方向,右边箭头显示为左边的箭头。
    然后问下,日期能否限制选择最多多少天;例如最多选择2个月,可以是2019-01-01至2019-02-28,也可以是2019-03-01至2019-04-31,也就是时间范围不限,但是最多允许选择两个月,不知道该插件该怎么实现这个功能。

  6. 多啦葫芦娃说道:

    https://l-ui.com/single/apis/range.html range范围选择单独使用示意
    这里应该是不透明度。

  7. skyssssss说道:

    很不错

  8. jinn说道:

    像radio checkbox这种,怎么拿到选中的值?

  9. tians说道:

    项目开源的好处是,用的人越多,用的场景越多,就可能遇到问题,使项目能够更加完美。

  10. 选择日期范围说道:

    选择日期范围:当设定min值后,无法选择设定min值的当前月,只能从min值的下一个月开始选择,希望能调整为从min值的当前月可选。急需,谢谢!

    • 张 鑫旭说道:

      好的,我看下。

      请问有demo吗?没能复现你所说的问题。

      • 选择日期范围说道:

        就是官网里的demo,min值是“2017-11-10”,但无法从2017年11月开始选择,只能从2017年12月开始选择。

      • 选择日期范围说道:

        您好!官网demo里的选择日期范围控件,设定min值后还是不能从当月可选,不知今日能否调整好,急需!

  11. kunkka说道:

    日期选择控件有加入周、季度选择吗?

  12. 日期范围选择说道:

    LULU UI里的日期范围选择demo无效,应该如何解决,急!急!急!

  13. 华晨说道:

    非常赞,对内用 Vue.js、React,对外尤其是 to B,真的非常非常赞的选择!ღ( ´・ᴗ・` )比心

  14. Capricair说道:

    和bootstrap区别是什么?有哪些优势?

  15. leo说道:

    这个框架还是蛮漂亮的,看了部分css源码 老师很厉害,虽然现在都是vue,react这种框架大行其道,但jq还是有它的适用场景的

  16. haha说道:

    能把jq去掉就完美了

  17. 智媒体说道:

    非常好,刚好需要这个。

  18. 猫咪君-VRlie说道:

    请问一下旭哥,你gif截图的工具用的是什么。看上去不错的样子

  19. debugger说道:

    弹窗组件是真的好用,赞一下

  20. java web说道:

    天啦噜
    膜拜大神

  21. 132说道:

    为什么这么执着于 jq 呢……
    虽然我个人很不喜欢 ui 库,因为不管再怎么设计,也不能满足所有场景的设计需求

    但是比起 antd 这种,jq 就更没救了呀
    为什么一定要背道而驰,在所有人都研究 react、vue 的时候,非要对 jq 充满执念

    我没有其他意思,只是每次看到阅文都是这种内容,就发一下吧

    • 张 鑫旭说道:

      LuLu UI的设计就不是为了满足所有场景设计的,但是所有的场景都能使用LuLu UI。jQuery对to C的网站更适合,react、vue适合对内的中后台项目,管理后台等。

      • 132说道:

        我举个简单的例子,小说翻页,webapp 中的小说翻页,如果用 jq 或者 zepto,去做 history 的事件,是很费劲的,但是 vue 和react 就能超级方便的使用路由

        我们拼命的在研究 ssr,而你们团队老师背道而驰的宣扬 jq,唉

        • skyssssss说道:

          jq更通用适合左右的项目,每个框架,都有使用的场景的,不能带有偏见

    • sadkilo说道:

      或者只有你这些无知的才敢鄙视jquery,你喜欢研究react、vue是你的事,你代表不了所有人

  22. 何所思说道:

    感谢楼主,好人一生平安

  23. 码客说道:

    先试用一下看看

  24. 蛋炒饭说道:

    缺少下拉多选 12格

  25. 酸溜土豆丝说道:

    文档报错了。。。
    pagination.php:1 Mixed Content: The page at ‘https://www.zhangxinxu.com/sp/lulu/mockup/content/apis/pagination.php’ was loaded over HTTPS, but requested an insecure script ‘http://qidian.gtimg.com/lulu/theme/peak/js/plugin/sea.js’. This request has been blocked; the content must be served over HTTPS.

  26. sodarfish说道:

    可以加一下布局组件么

  27. 金礼秋说道:

    还是觉得基于dom的操作和更新太繁琐了.不过还是有适用他的场景.

  28. hzm说道:

    老项目的后台用这个很合适,表格功能强大点就好了,例如可以固定表格头移动之类的

  29. mengkun说道:

    360极速浏览器,宽屏幕文档显示两页的情况下隐藏的 input 会显示出来,如图:https://ws1.sinaimg.cn/large/0072Lfvtly1fsae74p2jsj31hc0spgrh.jpg

  30. 广建说道:

    不错,赞

  31. nocode说道:

    不错,准备试试

  32. web_ljy说道:

    兼容IE7+(modern主题)或IE8+(peak主题)的前端UI框架,
    目前modern主题,(两个都兼容到的话就完美了哈哈)

  33. web_ljy说道:

    既然是jq了,兼容到ie8+为啥不考虑IE7,很多部分的还是会有考虑到ie7的。希望可以兼容到。可能会更多人使用这个.

  34. 雄蚊子说道:

    API文档页面价格返回顶端按钮哦。不然鼠标滚轮要滚死了。

  35. Patchouli说道:

    感觉是挺不错的偏前端的UI框架,设计师会很喜欢吧。但是对于团队而言,如果习惯了bootstrap似乎很难说服替换。优点是学习成本低,缺点应该是组件少一点以及没有自适应吧,整体看下来感觉很不错,赞一个~

  36. fu说道:

    赞一个,

  37. NWBoor说道:

    文档有问题

  38. mfk说道:

    还可以。没看到响应式相关的代码,目测只能在PC上用。而且组件有点少,常见的下拉菜单、左右滑动(slider)、进度条等都没有。