30组常用前端开发组件库,前端组件收集整理列表
2017-10-09 16:49
1491 查看
这里是收集的web前端开发常用前端开发组件库,搭建web
app常用的样式/组件等收集列表(移动优先)。主要包含前端框架,构建工具,自动化模块、jQuery插件、前端样式等,囊括最实用的前端开发组件库!
前端构建工具
gulp – The streaming build system
grunt – the JavaScript Task Runner
前端模块管理器
Bower – A package manager for the web
Browserify
Component
Duo
Require
4000
JS
Sea.js
css预处理器
Less – Less is More , Than CSS
Sass – Syntactically Awesome Style
Sheets
Stylus – Expressive,
dynamic, robust CSS
Bootstrap
Foundation
Amaze UI
Semantic UI
Pure CSS
topcoat
UIkit
Material UI
Framework7
mui
ionic framework
Fries
jQuery Mobile
JavaScript 框架
Angular
jQuery
Backbone.js
Ractive.js
KISSY
Zepto.js
Vanilla JS
Avalon
轻量级JavaScript框架
Min.js – Super minimal selector
and event library
skel.js – A lightweight responsive
framework
JavaScript 工具库
underscore.js
Way.js – 双向数据绑定库
Keys.js – 应用快捷键
cocos2d-html5
Egret Engine
LimeJS
EaselJS
three.js
AlloyStick
The-Best-JS-Game-Framework
CanvasEngine
Quintus
GMU
NEC
NEJ
Pure CSS Components
magic-of-css
HTML5 BOILERPLATE
Modernizr
Normalize.css
yue.css
typo.css
grid
Flexbox Grid
History.js – gracefully
supports the HTML5 History/State APIs
jquery-pjax – pushState+ajax
jquery-address –
Deep Linking
Notify.js(Web Notifications
API)
detector
Validator
Parsley
jquery.form.js – jQuery Form
Plugin
Validform
validator.js
formvalidator.js
Fort.js – 表单填写进度提示
Chosen
Select2
bootstrap-select
iCheck – 增强复选框和单选按钮
jQuery File
Upload Plugin
百度 Web Uploader
Uploadify
Plupload
arale-upload – 轻量级 iframe
and html5 file uploader
Dropzone.js – drag’n’drop
library拖拽上传
flow.js
Both Date
and Time picker widget based on twitter bootstrap
GMU
日历组件
Mobiscroll
Colorpicker
plugin for Twitter Bootstrap
TaggingJS – 可以灵活定制的
jQuery 标签系统插件
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
Moment.js
Smart Time
Ago – 显示相对时间
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
Masonry
Isotope – Filter & sort magical
layouts
imagesLoaded
Echo.js
lazySizes
jquery_lazyload
lazyload.js
waitForImages
– 图片加载监听库
FlexSlider
unslider – 小而美的轮播库
prettyPhoto
croppic – an image cropping
jquery plugin
NProgress.js
progress.js
Pace – Automatic page load
progress bar
jquery-ajax-progress
pushy – a responsive
off-canvas navigation menu
SuperFish – 基于jQuery的级联下拉菜单
Responsive
Nav – 响应式导航
jquery-scrollspy(1)
jquery-scrollspy(2)
Waypoints
jScroll
jquery-smooth-scroll
jquery.scrollTo
– 平滑滚动到页面指定位置
pagePiling.js
– 全屏滚动效果
multiscroll.js
– 分屏滚动效果
Animsition – 页面切换时的过渡效果
sticky – jQuery Plugin for
Sticky Objects
jquery.pin – 固定页面元素
Hammer.JS
Draggabilly – 专注于拖拽功能的
JS 库
Headroom.js – 在不需要页头时将其隐藏
Readmore.js – 内容显示与隐藏插件
jScrollPane
parallax.js
jparallax
google-code-prettify
highlight.js
Rainbow
ACE
CodeMirror
Crayon
Syntax Highlighter
prism – Lightweight, robust,
elegant syntax highlighting.
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
cross-storage –
Cross domain local storage
localForage
pouchdb
basil.js
mustache.js
Handlebars.js
artTemplate
baiduTemplate
JSRender
EJS – JavaScript Templates
Juicer – A Light Javascript
Templete Engine.
Tempo
json2html
alertify.js
AlertifyJS
SweetAlert
Messenger – 非常酷的弹框组件
PNotify
qTip2 – Pretty powerful tooltips
tooltip – CSS Tooltips
tooltipster – A jQuery
tooltip plugin
grumble.js – 气泡形状的提示(Tooltip)控件
Ouibounce – 离站提示控件
fancyBox – Fancy jQuery
lightbox
jquery-lightbox
– The popular lightbox script, ported to jQuery
Colorbox – a jQuery
lightbox
artDialog – 经典的网页对话框组件
DialogEffects
handsontable
– 在线可编辑excel表格
jQuery Bootgrid
– 用于ajax生成动态表格
DataTables – Table
plug-in for jQuery
zTree_v3 – jQuery Tree
Plugin
jstree – jQuery Tree Plugin
fancytree – Tree plugin
for jQuery
fetch – A window.fetch JavaScript
polyfill
reqwest – browser asynchronous
http requests
minAjax.js
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
Simditor – 简单快速的富文本编辑器
BachEditor – 一个有情怀的编辑器
bootstrap-markdown
marked – markdown解析器
Readability
json.human.js
– Json Formatting for Human Beings
CSS Colours
SVGeneration
jquery-cookie
FastClick – 处理移动端 click
事件 300 毫秒延迟
screenfull.js
– 全屏切换
Async.js – 异步操作
html2canvas – 实现纯JS网页截图
jquery.qrcode.js
– 生成二维码的 jQuery 插件
FocusPoint.js
实现图片的响应式裁剪
DD_belatedPNG.js
– 让IE6支持透明PNG图片
nakedpassword
– 用脱衣女帮助检测密码强度
frontend-guidelines
– Some HTML, CSS and JS best practices.
Codrops – Useful resources
Front-end Code
Standards & Best Practices
app常用的样式/组件等收集列表(移动优先)。主要包含前端框架,构建工具,自动化模块、jQuery插件、前端样式等,囊括最实用的前端开发组件库!
0. 前端自动化
前端构建工具gulp – The streaming build system
grunt – the JavaScript Task Runner
前端模块管理器
Bower – A package manager for the web
Browserify
Component
Duo
Require
4000
JS
Sea.js
css预处理器
Less – Less is More , Than CSS
Sass – Syntactically Awesome Style
Sheets
Stylus – Expressive,
dynamic, robust CSS
1. 前端框架
BootstrapFoundation
Amaze UI
Semantic UI
Pure CSS
topcoat
UIkit
Material UI
Framework7
mui
ionic framework
Fries
jQuery Mobile
2. JavaScript 框架汇总
JavaScript 框架Angular
jQuery
Backbone.js
Ractive.js
KISSY
Zepto.js
Vanilla JS
Avalon
轻量级JavaScript框架
Min.js – Super minimal selector
and event library
skel.js – A lightweight responsive
framework
JavaScript 工具库
underscore.js
Way.js – 双向数据绑定库
Keys.js – 应用快捷键
3. 前端游戏框架
cocos2d-html5Egret Engine
LimeJS
EaselJS
three.js
AlloyStick
The-Best-JS-Game-Framework
CanvasEngine
Quintus
4. ui组件库
GMUNEC
NEJ
Pure CSS Components
magic-of-css
5. 基础模版
HTML5 BOILERPLATEModernizr
Normalize.css
6. 排版
yue.csstypo.css
7. 网格系统
gridFlexbox Grid
8. HTML5 API 应用
History.js – gracefullysupports the HTML5 History/State APIs
jquery-pjax – pushState+ajax
jquery-address –
Deep Linking
Notify.js(Web Notifications
API)
9. UA 识别
detector
10. 表单处理
10.1 表单验证(Form Validator)
ValidatorParsley
jquery.form.js – jQuery Form
Plugin
Validform
validator.js
formvalidator.js
Fort.js – 表单填写进度提示
10.2 < select > 相关
ChosenSelect2
bootstrap-select
10.3 单选框/复选框相关
iCheck – 增强复选框和单选按钮
10.4 上传组件
jQuery FileUpload Plugin
百度 Web Uploader
Uploadify
Plupload
arale-upload – 轻量级 iframe
and html5 file uploader
Dropzone.js – drag’n’drop
library拖拽上传
flow.js
10.5 日期选择
Both Dateand Time picker widget based on twitter bootstrap
GMU
日历组件
Mobiscroll
10.6 取色
Colorpickerplugin for Twitter Bootstrap
10.7 标签插件(Tag)
TaggingJS – 可以灵活定制的jQuery 标签系统插件
11. 图表绘制
HighchartsChart.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
12. 日期格式化
Moment.jsSmart Time
Ago – 显示相对时间
13. 页面交互
13.1 Slider
slick – the last carouselyou’ll ever need
Swipe – the most accurate
touch slider
Swiper – Most modern
mobile touch slider
iscroll – Smooth scrolling
for the web
13.2 瀑布流
MasonryIsotope – Filter & sort magical
layouts
13.3 图片懒加载/加载监听
imagesLoadedEcho.js
lazySizes
jquery_lazyload
lazyload.js
waitForImages
– 图片加载监听库
13.4 图片轮播/展示
FlexSliderunslider – 小而美的轮播库
prettyPhoto
13.5 图片剪裁
croppic – an image croppingjquery plugin
13.6 进度条
NProgress.jsprogress.js
Pace – Automatic page load
progress bar
jquery-ajax-progress
13.7 侧滑插件(offcancas)
pushy – a responsiveoff-canvas navigation menu
13.8 菜单(Menu)
SuperFish – 基于jQuery的级联下拉菜单Responsive
Nav – 响应式导航
13.9 滚动侦测(ScrollSpy)
jquery-scrollspy(1)jquery-scrollspy(2)
Waypoints
13.10 滚动加载更多
jScroll
13.11 平滑滚动插件(Smooth Scroll)
jquery-smooth-scrolljquery.scrollTo
– 平滑滚动到页面指定位置
13.12 全屏滚动
pagePiling.js– 全屏滚动效果
13.13 分屏滚动
multiscroll.js– 分屏滚动效果
13.14 转场效果
Animsition – 页面切换时的过渡效果
13.15 固定元素(Sticky)
sticky – jQuery Plugin forSticky Objects
jquery.pin – 固定页面元素
13.16 触控事件
Hammer.JS
13.17 拖拽组件
Draggabilly – 专注于拖拽功能的JS 库
13.18 隐藏或展示页面元素
Headroom.js – 在不需要页头时将其隐藏Readmore.js – 内容显示与隐藏插件
13.19 滚动条
jScrollPane
13.20 视差滚动(Parallax Scrolling)
parallax.jsjparallax
14. 代码高亮插件/代码编辑器
google-code-prettifyhighlight.js
Rainbow
ACE
CodeMirror
Crayon
Syntax Highlighter
prism – Lightweight, robust,
elegant syntax highlighting.
15. UI Icon 组件
Font AwesomeGlyphter: The SVG Font Machine
Perfect Icons
iconizr
Cikonss – 纯CSS实现的响应式Icon
Simple Icons
16. 动画
animate.css – A cross-browserlibrary 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
17. 本地存储
cross-storage –Cross domain local storage
localForage
pouchdb
basil.js
18. 模板引擎
mustache.jsHandlebars.js
artTemplate
baiduTemplate
JSRender
EJS – JavaScript Templates
Juicer – A Light Javascript
Templete Engine.
Tempo
json2html
19. 通知组件/弹框组件
alertify.jsAlertifyJS
SweetAlert
Messenger – 非常酷的弹框组件
PNotify
20. 提示控件(Tooltips)
qTip2 – Pretty powerful tooltipstooltip – CSS Tooltips
tooltipster – A jQuery
tooltip plugin
grumble.js – 气泡形状的提示(Tooltip)控件
Ouibounce – 离站提示控件
21. 对话框/弹出层(lightbox)
fancyBox – Fancy jQuerylightbox
jquery-lightbox
– The popular lightbox script, ported to jQuery
Colorbox – a jQuery
lightbox
artDialog – 经典的网页对话框组件
DialogEffects
22. 文档/表格
handsontable– 在线可编辑excel表格
jQuery Bootgrid
– 用于ajax生成动态表格
DataTables – Table
plug-in for jQuery
23. 目录树插件
zTree_v3 – jQuery TreePlugin
jstree – jQuery Tree Plugin
fancytree – Tree plugin
for jQuery
24. Ajax模块
fetch – A window.fetch JavaScriptpolyfill
reqwest – browser asynchronous
http requests
minAjax.js
25. 音频/视频
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
26. 按钮
Buttons – A CSS buttonlibrary
ButtonComponentMorph
ProgressButtonStyles
CreativeButtons
CSS3 buttons
27. 富文本编辑器/Markdown编辑器/Markdown解析器
Simditor – 简单快速的富文本编辑器BachEditor – 一个有情怀的编辑器
bootstrap-markdown
marked – markdown解析器
28. 内容提取(Readability)
Readabilityjson.human.js
– Json Formatting for Human Beings
29. 颜色(CSS Colors)/SVG
CSS ColoursSVGeneration
30. 实用工具/其他插件
jquery-cookieFastClick – 处理移动端 click
事件 300 毫秒延迟
screenfull.js
– 全屏切换
Async.js – 异步操作
html2canvas – 实现纯JS网页截图
jquery.qrcode.js
– 生成二维码的 jQuery 插件
FocusPoint.js
实现图片的响应式裁剪
DD_belatedPNG.js
– 让IE6支持透明PNG图片
nakedpassword
– 用脱衣女帮助检测密码强度
前端参考集
frontend-guidelines– Some HTML, CSS and JS best practices.
Codrops – Useful resources
Front-end Code
Standards & Best Practices
相关文章推荐
- 30组常用前端开发组件库,前端组件收集整理列表
- 30组常用前端开发组件库,前端组件收集整理列表
- 前端组件收集整理列表
- 前端组件收集整理列表
- 零度常用前端开发框架整理
- 整理收集Web前端开发中的各种CSS规范
- [转] Web前端开发工程师常用技术网站整理
- 前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)
- 收集整理来自网络上的一些常见的 前端、H5面试题 前端开发面试题
- Android开发中常用的颜色收集整理
- ios开发常用第三方库收集以及整理
- Web前端开发工程师常用技术网站整理
- 网站常用组件收集整理
- IOS开发--常用工具类收集整理(Objective-C)(持续更新)
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- Web开发常用前端组件整理
- 二十三、【开源】EFW框架Web前端开发之常用组件(FusionCharts图表、ReportAll报表等)
- 前端界面开发资料收集整理
- 前端开发代码块收集整理
- ios开发过程中一些常用地址收集整理