30组常用前端开发组件库,前端组件收集整理列表

2023年6月21日发(作者：)

0. 前端自动化



前端构建工具





gulp – The streaming build system

grunt – the JavaScript Task Runner



前端模块管理器













Bower – A package manager for the web

Browserify

Component

Duo

RequireJS



css预处理器







Less – Less is More , Than CSS

Sass – Syntactically Awesome Style Sheets

Stylus – Expressive, dynamic, robust CSS

1. 前端框架













Bootstrap

Foundation

Amaze UI

Semantic UI

Pure CSS

topcoat 













UIkit

Material UI

Framework7

mui

ionic framework

Fries

jQuery Mobile

2. JavaScript 框架汇总



JavaScript 框架

















Angular

jQuery

KISSY

Vanilla JS

Avalon



轻量级JavaScript框架





– Super minimal selector and event library

– A lightweight responsive framework



JavaScript 工具库







– 双向数据绑定库

– 应用快捷键

3. 前端游戏框架



















cocos2d-html5

Egret Engine

LimeJS

EaselJS

AlloyStick

The-Best-JS-Game-Framework

CanvasEngine

Quintus

4. ui组件库











GMU

NEC

NEJ

Pure CSS Components

magic-of-css

5. 基础模版







HTML5 BOILERPLATE

Modernizr

6. 排版





7. 网格系统





grid

Flexbox Grid

8. HTML5 API 应用









– gracefully supports the HTML5 History/State APIs

jquery-pjax – pushState+ajax

jquery-address – Deep Linking

(Web Notifications API)

9. UA 识别



detector

10. 表单处理

10.1 表单验证(Form Validator)















Validator

Parsley

– jQuery Form Plugin

Validform

– 表单填写进度提示 10.2 < select > 相关







Chosen

Select2

bootstrap-select

10.3 单选框/复选框相关



iCheck – 增强复选框和单选按钮

10.4 上传组件















jQuery File Upload Plugin

百度 Web Uploader

Uploadify

Plupload

arale-upload – 轻量级 iframe and html5 file uploader

– drag’n’drop library拖拽上传

10.5 日期选择







Both Date and Time picker widget based on twitter bootstrap

GMU 日历组件

Mobiscroll

10.6 取色



Colorpicker plugin for Twitter Bootstrap

10.7 标签插件(Tag)



TaggingJS – 可以灵活定制的 jQuery 标签系统插件 11. 图表绘制











Highcharts

– Simple HTML5 Charts using Canvas

百度 ECharts

– A JavaScript visualization library for HTML and SVG.



intro-to-d3 – a tutorial

12. 日期格式化





Smart Time Ago – 显示相对时间

13. 页面交互

13.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

13.2 瀑布流





Masonry

Isotope – Filter & sort magical layouts

13.3 图片懒加载/加载监听





imagesLoaded









lazySizes

jquery_lazyload

waitForImages – 图片加载监听库

13.4 图片轮播/展示







FlexSlider

unslider – 小而美的轮播库

prettyPhoto

13.5 图片剪裁



croppic – an image cropping jquery plugin

13.6 进度条









Pace – Automatic page load progress bar

jquery-ajax-progress

13.7 侧滑插件(offcancas)



pushy – a responsive off-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-scroll

To – 平滑滚动到页面指定位置

13.12 全屏滚动



– 全屏滚动效果

13.13 分屏滚动



– 分屏滚动效果

13.14 转场效果



Animsition – 页面切换时的过渡效果

13.15 固定元素(Sticky)





sticky – jQuery Plugin for Sticky Objects

– 固定页面元素

13.16 触控事件



13.17 拖拽组件



Draggabilly – 专注于拖拽功能的 JS 库

13.18 隐藏或展示页面元素



– 在不需要页头时将其隐藏 

– 内容显示与隐藏插件

13.19 滚动条



jScrollPane

13.20 视差滚动(Parallax Scrolling)





jparallax

14. 代码高亮插件/代码编辑器















google-code-prettify

Rainbow

ACE

CodeMirror

Crayon Syntax Highlighter

prism – Lightweight, robust, elegant syntax highlighting.

15. UI Icon 组件













Font Awesome

Glyphter: The SVG Font Machine

Perfect Icons

iconizr

Cikonss – 纯CSS实现的响应式Icon

Simple Icons

16. 动画 





















– A cross-browser library of CSS animations.

Transit – CSS transitions and transformations for jQuery

– 简化CSS3动画的JS库

ScrollMe – 在网页中加入各种滚动动画效果

– A Performant Transitions and Animations Library

NEC动画库

csshake – CSS classes to move your DOM

magic – CSS3 Animations with special effects

css-loaders

SpinKit

17. 本地存储









cross-storage – Cross domain local storage

localForage

pouchdb

18. 模板引擎











artTemplate

baiduTemplate

JSRender 







EJS – JavaScript Templates

Juicer – A Light Javascript Templete Engine.

Tempo

json2html

19. 通知组件/弹框组件











AlertifyJS

SweetAlert

Messenger – 非常酷的弹框组件

PNotify

20. 提示控件(Tooltips)











qTip2 – Pretty powerful tooltips

tooltip – CSS Tooltips

tooltipster – A jQuery tooltip plugin

– 气泡形状的提示（Tooltip）控件

Ouibounce – 离站提示控件

21. 对话框/弹出层(lightbox)











fancyBox – Fancy jQuery lightbox

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 Tree Plugin

jstree – jQuery Tree Plugin

fancytree – Tree plugin for jQuery

24. Ajax模块







fetch – A JavaScript polyfill

reqwest – browser asynchronous http requests

25. 音频/视频













jPlayer – HTML5 Audio & Video for jQuery

– HTML5 & Flash video player

Accessible HTML5 Video Player – PayPal 开源的 HTML5 视频播放器

Clappr – 开源的Web视频播放器

Plyr – A simple HTML5 media player

– A lightweight, easy-to-use jQuery plugin for fluid width

video embeds.





– 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 button library

ButtonComponentMorph

ProgressButtonStyles

CreativeButtons

CSS3 buttons

27. 富文本编辑器/Markdown编辑器/Markdown解析器









Simditor – 简单快速的富文本编辑器

BachEditor – 一个有情怀的编辑器

bootstrap-markdown

marked – markdown解析器

28. 内容提取(Readability)





Readability

– Json Formatting for Human Beings

29. 颜色(CSS Colors)/SVG





CSS Colours

SVGeneration

30. 实用工具/其他插件





jquery-cookie

FastClick – 处理移动端 click 事件 300 毫秒延迟 













– 全屏切换

– 异步操作

html2canvas – 实现纯JS网页截图

– 生成二维码的 jQuery 插件

实现图片的响应式裁剪

DD_ – 让IE6支持透明PNG图片

nakedpassword – 用脱衣女帮助检测密码强度

前端参考集







frontend-guidelines – Some HTML, CSS and JS best practices.

Codrops – Useful resources

Front-end Code Standards & Best Practices

2023年6月21日发(作者：)

0. 前端自动化



前端构建工具





gulp – The streaming build system

grunt – the JavaScript Task Runner



前端模块管理器













Bower – A package manager for the web

Browserify

Component

Duo

RequireJS



css预处理器







Less – Less is More , Than CSS

Sass – Syntactically Awesome Style Sheets

Stylus – Expressive, dynamic, robust CSS

1. 前端框架













Bootstrap

Foundation

Amaze UI

Semantic UI

Pure CSS

topcoat 













UIkit

Material UI

Framework7

mui

ionic framework

Fries

jQuery Mobile

2. JavaScript 框架汇总



JavaScript 框架

















Angular

jQuery

KISSY

Vanilla JS

Avalon



轻量级JavaScript框架





– Super minimal selector and event library

– A lightweight responsive framework



JavaScript 工具库







– 双向数据绑定库

– 应用快捷键

3. 前端游戏框架



















cocos2d-html5

Egret Engine

LimeJS

EaselJS

AlloyStick

The-Best-JS-Game-Framework

CanvasEngine

Quintus

4. ui组件库











GMU

NEC

NEJ

Pure CSS Components

magic-of-css

5. 基础模版







HTML5 BOILERPLATE

Modernizr

6. 排版





7. 网格系统





grid

Flexbox Grid

8. HTML5 API 应用









– gracefully supports the HTML5 History/State APIs

jquery-pjax – pushState+ajax

jquery-address – Deep Linking

(Web Notifications API)

9. UA 识别



detector

10. 表单处理

10.1 表单验证(Form Validator)















Validator

Parsley

– jQuery Form Plugin

Validform

– 表单填写进度提示 10.2 < select > 相关







Chosen

Select2

bootstrap-select

10.3 单选框/复选框相关



iCheck – 增强复选框和单选按钮

10.4 上传组件















jQuery File Upload Plugin

百度 Web Uploader

Uploadify

Plupload

arale-upload – 轻量级 iframe and html5 file uploader

– drag’n’drop library拖拽上传

10.5 日期选择







Both Date and Time picker widget based on twitter bootstrap

GMU 日历组件

Mobiscroll

10.6 取色



Colorpicker plugin for Twitter Bootstrap

10.7 标签插件(Tag)



TaggingJS – 可以灵活定制的 jQuery 标签系统插件 11. 图表绘制











Highcharts

– Simple HTML5 Charts using Canvas

百度 ECharts

– A JavaScript visualization library for HTML and SVG.



intro-to-d3 – a tutorial

12. 日期格式化





Smart Time Ago – 显示相对时间

13. 页面交互

13.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

13.2 瀑布流





Masonry

Isotope – Filter & sort magical layouts

13.3 图片懒加载/加载监听





imagesLoaded









lazySizes

jquery_lazyload

waitForImages – 图片加载监听库

13.4 图片轮播/展示







FlexSlider

unslider – 小而美的轮播库

prettyPhoto

13.5 图片剪裁



croppic – an image cropping jquery plugin

13.6 进度条









Pace – Automatic page load progress bar

jquery-ajax-progress

13.7 侧滑插件(offcancas)



pushy – a responsive off-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-scroll

To – 平滑滚动到页面指定位置

13.12 全屏滚动



– 全屏滚动效果

13.13 分屏滚动



– 分屏滚动效果

13.14 转场效果



Animsition – 页面切换时的过渡效果

13.15 固定元素(Sticky)





sticky – jQuery Plugin for Sticky Objects

– 固定页面元素

13.16 触控事件



13.17 拖拽组件



Draggabilly – 专注于拖拽功能的 JS 库

13.18 隐藏或展示页面元素



– 在不需要页头时将其隐藏 

– 内容显示与隐藏插件

13.19 滚动条



jScrollPane

13.20 视差滚动(Parallax Scrolling)





jparallax

14. 代码高亮插件/代码编辑器















google-code-prettify

Rainbow

ACE

CodeMirror

Crayon Syntax Highlighter

prism – Lightweight, robust, elegant syntax highlighting.

15. UI Icon 组件













Font Awesome

Glyphter: The SVG Font Machine

Perfect Icons

iconizr

Cikonss – 纯CSS实现的响应式Icon

Simple Icons

16. 动画 





















– A cross-browser library of CSS animations.

Transit – CSS transitions and transformations for jQuery

– 简化CSS3动画的JS库

ScrollMe – 在网页中加入各种滚动动画效果

– A Performant Transitions and Animations Library

NEC动画库

csshake – CSS classes to move your DOM

magic – CSS3 Animations with special effects

css-loaders

SpinKit

17. 本地存储









cross-storage – Cross domain local storage

localForage

pouchdb

18. 模板引擎











artTemplate

baiduTemplate

JSRender 







EJS – JavaScript Templates

Juicer – A Light Javascript Templete Engine.

Tempo

json2html

19. 通知组件/弹框组件











AlertifyJS

SweetAlert

Messenger – 非常酷的弹框组件

PNotify

20. 提示控件(Tooltips)











qTip2 – Pretty powerful tooltips

tooltip – CSS Tooltips

tooltipster – A jQuery tooltip plugin

– 气泡形状的提示（Tooltip）控件

Ouibounce – 离站提示控件

21. 对话框/弹出层(lightbox)











fancyBox – Fancy jQuery lightbox

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 Tree Plugin

jstree – jQuery Tree Plugin

fancytree – Tree plugin for jQuery

24. Ajax模块







fetch – A JavaScript polyfill

reqwest – browser asynchronous http requests

25. 音频/视频













jPlayer – HTML5 Audio & Video for jQuery

– HTML5 & Flash video player

Accessible HTML5 Video Player – PayPal 开源的 HTML5 视频播放器

Clappr – 开源的Web视频播放器

Plyr – A simple HTML5 media player

– A lightweight, easy-to-use jQuery plugin for fluid width

video embeds.





– 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 button library

ButtonComponentMorph

ProgressButtonStyles

CreativeButtons

CSS3 buttons

27. 富文本编辑器/Markdown编辑器/Markdown解析器









Simditor – 简单快速的富文本编辑器

BachEditor – 一个有情怀的编辑器

bootstrap-markdown

marked – markdown解析器

28. 内容提取(Readability)





Readability

– Json Formatting for Human Beings

29. 颜色(CSS Colors)/SVG





CSS Colours

SVGeneration

30. 实用工具/其他插件





jquery-cookie

FastClick – 处理移动端 click 事件 300 毫秒延迟 













– 全屏切换

– 异步操作

html2canvas – 实现纯JS网页截图

– 生成二维码的 jQuery 插件

实现图片的响应式裁剪

DD_ – 让IE6支持透明PNG图片

nakedpassword – 用脱衣女帮助检测密码强度

前端参考集







frontend-guidelines – Some HTML, CSS and JS best practices.

Codrops – Useful resources

Front-end Code Standards & Best Practices