JavaScript专题③:Fort.js:给表单加上进度条 | JavaScript-Blocker:Safari上的油猴子插件 | Random Color:颜色生成器
发布在GitHub不完全装B指南 v2.02014年6月6日view:4699
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Fort.js:

  • 使用难度:★★

  • Star数:296

  • 亮点:实时显示表单填写进度

G哥说

进度条大家都不陌生了,之前也给大家推荐过两款小清新的进度条(回复关键词“jdt”查看),不知道有没有朋友用到呢?

在用户体验越来越重要的今天,如何留住用户、让用户能够完成注册成为了每一个网站的首要目标。而具体实施的时候,作为直面用户的表单就成为了重中之重。如何排列条目、如何选择控件、如何让用户知道是否填写正确、如何让用户得到有效反馈,各种研究层出不穷。

今天给大家推荐的这个库同样是面向表单的,不过它很特别的一点就是将进度条和表单结合了起来,用户在填写的时候可以直观的看到表单完成进度,很有创意。

来看一张效果图: enter image description here

表单有三个输入框,我填写了其中两个,页面最上方的蓝条就代表了填写进度。简单来说,这个库的原理就是通过判断输入框是否有内容来计算填写进度。

现在总是在说“微创新”,我觉得这就是一个很好的例子,很多“微创新”结合起来就会产生质变,造就真正的创新。

Fort.js官方首页


JavaScript-Blocker:

  • 使用难度:★★★

  • Star数:27

  • 亮点:支持油猴子脚本,掌控所有网页的JS文件

G哥说

油猴子(Greasemonkey)脚本这个词可能很多朋友没听过,这东西简单来说就是一段JS代码,你可以在你的浏览器中运行从而为各种网页添加各种功能。最常见的应用就是修改微博显示格式,让页面布局更加好看。

据我所知,油猴子的用途非常广泛,甚至很多大公司比如阿里内部也在使用,大家如果能写出几个实用的脚本出来还是能给自己加不少分的。

那么油猴子和油猴子脚本有什么关系呢?油猴子脚本就是JS代码,油猴子是浏览器的插件,实际上是一个容器,可以让你方便的管理油猴子脚本,有点像书收藏夹和书签的关系。

管理油猴子脚本的浏览器插件其实有很多,JavaScript-Blocker这个库就是其中之一,它最特别的一点是除了可以运行油猴子脚本之外,还可以管理页面上的所有JS文件。你可以决定是否加载某个JS文件,这在访问国外网页的时候是很有用的,因为网络或者墙的原因,总有那么几个没什么用的JS脚本(比如Google Analytics)会卡半天加载不了,这时候你就可以用JavaScript-Blocker把它们禁掉,这样就不会加载了。

需要注意的是,这个库是Safari的插件,别的浏览器是用不了的。对Safari插件开发感兴趣的朋友可以阅读一下源码。

这个库是@JP 推荐给我的,非常感谢~

JavaScript-Blocker官方首页


Random Color:

  • 使用难度:★

  • Star数:1313

  • 亮点:随机生成优雅美观的颜色

G哥说

看到标题很多朋友估计要喷我了,生成颜色用JS代码就可以啊,为什么还需要这么一个库呢?借用作者的一句话来解释一下:“用代码随机生成的颜色很多是灰色、棕色和难看的绿色”,所以这个库本质上是一个过滤器,随机颜色的时候会把难看的都过滤掉。

当然,仅仅是过滤还不够,作者还将颜色进行了分类,比如你可以指定色系比如红色系或者黄色系,你也可以指定颜色深度比如浅色还是深色,使用起来非常方便。

作者提到了两个用途:数据可视化以及生成式艺术,大家可以参考一下。

我个人觉得还可以增加一个配色功能,就是当你输入一个颜色的时候会帮你自动搭配出几个合适的颜色,就像某些应用所做的那样,如果有朋友感兴趣可以试着在这个库的基础上去做一下。

Random Color官方首页


如果大家觉得这篇文章还不错的话请动动手指分享一下吧~你们的支持就是我最大的动力!

欢迎扫描二维码关注我的微信号“GitHub不完全装B指南”,获取最新文章。

谢谢~

enter image description here

评论
发表评论
暂无评论

我的收藏