前端组件库大合集
05 Jun 2015##前端组件库大合集
####前端自动化
1、前端构建工具
- Yeoman – a set of tools for automating development workflow
- gulp – The streaming build system
- grunt – the JavaScript Task Runner
- F.I.S – 前端集成解决方案
2、前端模块管理器
3、css预处理器
- Less – Less is More , Than CSS
- Sass – Syntactically Awesome Style Sheets
- Stylus – Expressive, dynamic, robust CSS
####前端框架(Frameworks)
- Bootstrap
- Foundation
- Amaze UI
- Semantic UI
- Pure CSS
- topcoat
- UIkit
- Material UI
- Framework7
- mui
- ionic framework
- Fries
- jQuery Mobile
####Javascript 框架汇总
1、javascript框架
2、轻量级javascript框架
3、javascript工具库
####前端游戏框架
- cocos2d-html5
- Egret Engine
- LimeJS
- EaselJS
- three.js
- AlloyStick
- The-Best-JS-Game-Framework
- CanvasEngine
- Quintus
####UI组件库
####基础模板
####排版
####网格布局
####HTML5 API 应用
- History.js – gracefully supports the HTML5 History/State APIs
- jquery-pjax – pushState+ajax
- jquery-address – Deep Linking
- Notify.js(Web Notifications API)
####UA 识别
####表单处理
1、表单验证(Form Validator)
- Validator
- Parsley
- jquery.form.js – jQuery Form Plugin
- Validform
- validator.js
- formvalidator.js
- Fort.js – 表单填写进度提示
2、< select > 相关
3、单选框/复选框相关
4、上传组件
- jQuery File Upload Plugin
- 百度 Web Uploader
- Uploadify
- Plupload
- arale-upload – 轻量级 iframe and html5 file uploader
- Dropzone.js – drag’n’drop library拖拽上传
- flow.js
5、日期,日历选择
6、取色
7、 标签插件(Tag)
-TaggingJS – 可以灵活定制的 jQuery 标签系统插件
8、自动完成插件
9、样式修正
####图表,图形绘制
- Highcharts
- Chart.js – Simple HTML5 Charts using Canvas
- 百度 ECharts
- Chartist.js
- D3.js – A JavaScript visualization library for HTML and SVG.
- intro-to-d3 – a D3.js tutorial
- Raphaël
####日期格式化
####页面交互
1、Slider
- slick – the last carousel you’ll ever need
- Swipe – the most accurate touch slider
- Swiper – Most modern mobile touch slider
- iscroll – Smooth scrolling for the web
- OwlCarousel – create beautiful responsive carousel slider
- jquery-mousewheel – jQuery鼠标滚轮滚动侦测插件
2、瀑布流
3、图片懒加载/加载监听
4、图片轮播/展示
5、图片剪裁/处理
6、进度条
7、侧滑插件(offcancas)
8、菜单(Menu)
9、滚动侦测(ScrollSpy)
10、滚动加载更多
11、平滑滚动插件(Smooth Scroll)
12、全屏滚动
13、分屏滚动
14、转场效果
15、固定元素(Sticky)
16、触控事件
17、拖拽组件
18、隐藏或展示页面元素
19、滚动条
20、视差滚动(Parallax Scrolling)
代码高亮插件/代码编辑器
- google-code-prettify
- highlight.js
- Rainbow
- ACE
- CodeMirror
- Crayon Syntax Highlighter
- prism – Lightweight, robust, elegant syntax highlighting.
####UI Icon 组件
- Font Awesome
- Glyphter: The SVG Font Machine
- Perfect Icons
- iconizr
- Cikonss – 纯CSS实现的响应式Icon
- Simple Icons
####动画
- animate.css – A cross-browser library of CSS animations.
- Transit – CSS transitions and transformations for jQuery
- Move.js – 简化CSS3动画的JS库
- ScrollMe – 在网页中加入各种滚动动画效果
- Effeckt.css – A Performant Transitions and Animations Library
- NEC动画库
- csshake – CSS classes to move your DOM
- magic – CSS3 Animations with special effects
- Hover.css
- css-loaders
- SpinKit
####本地存储
####模板引擎
- fxtpl
- mustache.js
- Handlebars.js
- artTemplate
- baiduTemplate
- JSRender
- EJS – JavaScript Templates
- Juicer – A Light Javascript Templete Engine.
- Tempo
- json2html
####通知组件/弹框组件
- alertify.js
- AlertifyJS
- SweetAlert
- Messenger – 非常酷的弹框组件
- PNotify
- Notify.js – A simple, versatile notification library
####提示控件(Tooltips)
- qTip2 – Pretty powerful tooltips
- tooltip – CSS Tooltips
- tooltipster – A jQuery tooltip plugin
- grumble.js – 气泡形状的提示(Tooltip)控件
- Ouibounce – 离站提示控件
文档/表格
####目录树插件
####Ajax模块
####音频/视频
- jPlayer – HTML5 Audio & Video for jQuery
- video.js – HTML5 & Flash video player
- Accessible HTML5 Video Player – PayPal 开源的 HTML5 视频播放器
- Clappr – 开源的Web视频播放器
- Plyr – A simple HTML5 media player
- FitVids.js – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
- BigVideo.js – The jQuery Plugin for Big Background Video
- BigScreen – A simple library for using the JavaScript Full Screen API
- Vide – 视频背景
- winamp2-js
####按钮
- Buttons – A CSS button library
- ButtonComponentMorph
- ProgressButtonStyles
- CreativeButtons
- CSS3 buttons
- jquery.onoff – Interactive, accessible toggle switches for the web.
富文本编辑器/Markdown编辑器/Markdown解析器
- Simditor – 简单快速的富文本编辑器
- BachEditor – 一个有情怀的编辑器
- bootstrap-markdown
- marked – markdown解析器
- stackedit–markdown在线编辑器
####内容提取(Readability)
####颜色(CSS Colors)/SVG
####实用工具/其他插件
- jquery-cookie
- FastClick – 处理移动端 click 事件 300 毫秒延迟
- screenfull.js – 全屏切换
- Async.js – 异步操作
- html2canvas – 实现纯JS网页截图
- jquery.qrcode.js – 生成二维码的 jQuery 插件
- FocusPoint.js 实现图片的响应式裁剪
- DD_belatedPNG.js – 让IE6支持透明PNG图片
- nakedpassword – 用脱衣女帮助检测密码强度
- PDF.js – 一个 JavaScript 编写的 PDF 阅读器
####前端参考集
- frontend-guidelines – Some HTML, CSS and JS best practices.
- Codrops – Useful resources
- Front-end Code Standards & Best Practices
- frontend-dev-bookmarks
本文转自轩风阁,欢迎访问。