weidoun / front-end-plugins

前端常用插件汇总

Plugins整理

目录

• 工具类
• 浏览器增强类
• 表单类
• 图片类
• UI组件类
• 用户体验增强
• 其他类
• Bootstrap相关类
• JS Plugins仓库

工具类

• 方便操作对象，数组等的工具库
  • underscore.js
  • lo-dash 与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建
  • Sugar 在原生对象上增加一些工具方法
  • functional.js 提够了一些Curry的支持
  • bacon.js 函数式编程，cool
  • streamjs 用流的方式来对数组，对象进行系列操作
• 异步流程控制
  • 发布订阅
    • eventproxy 朴灵出品
    • Arbiter.js
  • q Promise风格的
  • Async.js
• 时间库
  • moment
  • datejs
• 浏览器探测
  • Bowser 探测具体浏览器和版本
  • ua-parser-js 探测具体浏览器和版本，操作系统，设备类型等
• 调试
  • JavaScript Debug 对console.log的简单封装，当浏览器不支持console.log时，输出在一个页面元素里
  • log 让控制台输出的log有样式
• uri.js uri操作
• cookie 增删改cookie的工具库
• BigDecimal.js 提高精度的数字操作

浏览器增强类

让一些旧浏览器变牛逼的库

• Selectivizr 让IE 6-8一些的css3选择器
• ieBetter 让ie6-8有高级浏览器的特性
• ExplorerCanvas 让IE8-的浏览器支持canvas
• CSS3 Pie 让IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js时，box-radious的元素有背景色时，不显示背景色。。。
• https://github.com/anselmh/object-fit 让浏览器支持object-fit这css规则
• HTML5 Cross Browser Polyfills 一堆Polyfills

选择器增强

• Lining.js 让浏览器实现类似::nth-line(), ::nth-last-line()的效果

未归类

• prefixfree 用了它，写css时，就不需要加浏览器的前缀了

表单类

• jquery-file-upload 上传文件组件
• zTree 文件树形视图控件

表单验证

• jquery-validation
• jQuery-Validation-Engine

表单元素美化

• uniform 提供对下拉框，单，复选框，按钮等表单元素的美化
• select2 多选下拉框
• DropKick 下拉框，单，多选。外观比uniform好
• switchery ios7风格的开关组件
• nouislider 用滚动条来设置/控制（音量等）
• range.css 美化input[type=range]元素的外观

图片类

• holderjs 生成占位图片
• lazyload
• imagesLoaded 选取的图片都加载好后执行调回

浏览图片

• fancybox 弹出查看图片，视屏等等 demo
• yoxview 弹出查看图片，图片尺寸缩放很自然

图片墙

• wookmark

UI组件类

数据可视化(图表)

• Echarts 百度出品
• highcharts 功能强大。是收费的。
• Plottable.JS 基于D3的一个图表库
• flot 文档不给力
• chartJs 中文文档 demo很漂亮，很清晰。比较轻量级。
• ichartJs **的一个家伙搞的，感觉还不错。

待办事宜日历

• full calendar 支持脱放的方式来改变待办事宜的时间
• Simple Events Calendar 外观很喜欢。收费 5$

时间选取组件

• jQuery ui datepicker 经典，不是很好看
• pickadate 轻量级，手机友好的，漂亮。但貌似只能在弹出层中显示，而没有下拉这种方式显示。
• zebra-datepicker 可配置性很强。但貌似只能在弹出在右上方。。。
• bootstrap-datepicker bootstrap风格。
• dateRangePicker 选取时间段。bootstrap风格。该组件依赖Twitter Bootstrap, Moment.js和jQuery.

自定义滚动条

• perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。
• iscroll 在移动设备上用不错

表格组件

• datatables 表格可交互（对内容进行排序，删除等）
• backgrid 各种功能，带分页，可编辑表格内容。很棒。
• excellentexport 把表格的内容生成excel。兼容 Firefox, Chrome, IE6+

选取颜色

• Spectrum

编辑器

• ace 代码编辑器，可以用来做demo演示
• ckeditor
• ueditor 百度做的
• tinymce 对html内容进行实时的编辑
• summernote 在移动设备上用不错

HTML5播放器

• jwplayer 被大量网站使用
• html5media 简单的h5player，轻量级
• jplayer 功能强太，可换肤

展示

• Impress.js 各种旋转，和奇特的体验
• fullPage 全屏显示。用滚轮来翻页
• pagePiling 和fullPage类似
• turn.js 做一本书，带漂亮的翻页的效果

幻灯

• coin-slider 兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。
• wowslider 幻灯切换时各种很炫的效果。收费。
• cycle2 普通的幻灯，竟然不支持垂直滚动。。。
• jcarousel 普通的幻灯，不兼容IE6
• reveal 3d滚动。做ppt相当不错
• nodePPT 国人做的，做ppt也相当不错。有些方面比 reveal做的还好。但生成导出的html有些问题
• roundabout 3d切换，看的后面图片的边

弹出框

• Magnific-Popup 兼容PC，Mobile。还不错，有5k+的star
• layer 国人开发的，兼容ie6+。不喜欢其调用方式。

动画效果

• mixitup 用漂亮的动画效果来完成排序和筛选
• jQuery.Marquee 跑马灯效果
• quickflip 卡片翻转效果
• 卡片翻转效果2 兼容性可以。写的比较简单：1，只支持x方向翻转 2,类名都是规定好的 3，只能被调用一次。 需要改写一下。我的改进版见这里
• TheaterJS 模拟两个人在屏幕上对话
• midnight.js 文字颜色随着背景变，屌炸了
• color-animation jquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。
• transit 对元素进行css的变换

视觉差插件

• scrollorama 比较简单
• superscrollorama 能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。
• scrolldeck

flash

• swfobj 能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。

用户体验增强类

• Intro.js 用来介绍网站的功能很不错。也可以做新手引导。
• blockUI Lolding组件。
• simple-hint 提示信息。用css做的。兼容性IE 9+。
• dotdotdot 文字溢出时，添加在文字末尾加省略号
• jQuery-menu-aim 二级菜单的切换如Amazon主页上一样迅速
• AnythingZoomer 放大镜功能
• 美化/高亮语法代码
  • google-code-prettify
  • DlHighlight 仅支持JavaScript、CSS、XML、HTML 这4语法高亮
• please 按要求随机舒服的颜色

其他类

• Ink 响应式html邮件框架
• 性能测试
• 抓取，解析RSS内容（不能跨域，所以后台要做代理，所谓的解析Rss其实就是解析xml）
  • jFeed
  • jRss 简单版的jFeed
• scriptcam 与摄像头交互

Bootstrap相关类

• 免费皮肤
  • AdminLTE

JS Plugins仓库

• jster
• node modules
• awesome-nodejs