首页 › 前端开发综合论坛 › 30组常用前端开发组件库

江珊 發表於 2019-9-4 22:27:00

30组常用前端开发组件库

<p>这里是收集的web前端开发常用前端开发组件库，搭建web app常用的样式/组件等收集列表(移动优先)。主要包含前端框架，构建工具，自动化模块、jQuery插件、前端样式等，囊括最实用的前端开发组件库！</p>
<p>0. 前端自动化</p>
<p>前端构建工具</p>
<p>gulp – The streaming build system</p>
<p>grunt – the JavaScript Task Runner</p>
<p>前端模块管理器</p>
<p>Bower – A package manager for the web</p>
<p>Browserify</p>
<p>Component</p>
<p>Duo</p>
<p>RequireJS</p>
<p>Sea.js</p>
<p>css预处理器</p>
<p>Less – Less is More , Than CSS</p>
<p>Sass – Syntactically Awesome Style Sheets</p>
<p>Stylus – Expressive, dynamic, robust CSS</p>
<p>1. 前端框架</p>
<p>Bootstrap</p>
<p>Foundation</p>
<p>Amaze UI</p>
<p>Semantic UI</p>
<p>Pure CSS</p>
<p>topcoat</p>
<p>UIkit</p>
<p>Material UI</p>
<p>Framework7</p>
<p>mui</p>
<p>ionic framework</p>
<p>Fries</p>
<p>jQuery Mobile</p>
<p>2. JavaScript 框架汇总</p>
<p>JavaScript 框架</p>
<p>Angular</p>
<p>jQuery</p>
<p>Backbone.js</p>
<p>Ractive.js</p>
<p>KISSY</p>
<p>Zepto.js</p>
<p>Vanilla JS</p>
<p>Avalon</p>
<p>轻量级JavaScript框架</p>
<p>Min.js – Super minimal selector and event library</p>
<p>skel.js – A lightweight responsive framework</p>
<p>JavaScript 工具库</p>
<p>underscore.js</p>
<p>Way.js – 双向数据绑定库</p>
<p>Keys.js – 应用快捷键</p>
<p>3. 前端游戏框架</p>
<p>cocos2d-html5</p>
<p>Egret Engine</p>
<p>LimeJS</p>
<p>EaselJS</p>
<p>three.js</p>
<p>AlloyStick</p>
<p>The-Best-JS-Game-Framework</p>
<p>CanvasEngine</p>
<p>Quintus</p>
<p>4. ui组件库</p>
<p>GMU</p>
<p>NEC</p>
<p>NEJ</p>
<p>Pure CSS Components</p>
<p>magic-of-css</p>
<p>5. 基础模版</p>
<p>HTML5 BOILERPLATE</p>
<p>Modernizr</p>
<p>Normalize.css</p>
<p>6. 排版</p>
<p>yue.css</p>
<p>typo.css</p>
<p>7. 网格系统</p>
<p>grid</p>
<p>Flexbox Grid</p>
<p>8. HTML5 API 应用</p>
<p>History.js – gracefully supports the HTML5 History/State APIs</p>
<p>jquery-pjax – pushState+ajax</p>
<p>jquery-address – Deep Linking</p>
<p>Notify.js(Web Notifications API)</p>
<p>9. UA 识别</p>
<p>detector</p>
<p>10. 表单处理</p>
<p>10.1 表单验证(Form Validator)</p>
<p>Validator</p>
<p>Parsley</p>
<p>jquery.form.js – jQuery Form Plugin</p>
<p>Validform</p>
<p>validator.js</p>
<p>formvalidator.js</p>
<p>Fort.js – 表单填写进度提示</p>
<p>10.2 &lt; select &gt; 相关</p>
<p>Chosen</p>
<p>Select2</p>
<p>bootstrap-select</p>
<p>10.3 单选框/复选框相关</p>
<p>iCheck – 增强复选框和单选按钮</p>
<p>10.4 上传组件</p>
<p>jQuery File Upload Plugin</p>
<p>百度 Web Uploader</p>
<p>Uploadify</p>
<p>Plupload</p>
<p>arale-upload – 轻量级 iframe and html5 file uploader</p>
<p>Dropzone.js – drag’n’drop library拖拽上传</p>
<p>flow.js</p>
<p>10.5 日期选择</p>
<p>Both Date and Time picker widget based on twitter bootstrap</p>
<p>GMU 日历组件</p>
<p>Mobiscroll</p>
<p>10.6 取色</p>
<p>Colorpicker plugin for Twitter Bootstrap</p>
<p>10.7 标签插件(Tag)</p>
<p>TaggingJS – 可以灵活定制的 jQuery 标签系统插件</p>
<p>11. 图表绘制</p>
<p>Highcharts</p>
<p>Chart.js – Simple HTML5 Charts using Canvas</p>
<p>百度 ECharts</p>
<p>Chartist.js</p>
<p>D3.js – A JavaScript visualization library for HTML and SVG.</p>
<p>intro-to-d3 – a D3.js tutorial</p>
<p>12. 日期格式化</p>
<p>Moment.js</p>
<p>Smart Time Ago – 显示相对时间</p>
<p>13. 页面交互</p>
<p>13.1 Slider</p>
<p>slick – the last carousel you’ll ever need</p>
<p>Swipe – the most accurate touch slider</p>
<p>Swiper – Most modern mobile touch slider</p>
<p>iscroll – Smooth scrolling for the web</p>
<p>13.2 瀑布流</p>
<p>Masonry</p>
<p>Isotope – Filter &amp; sort magical layouts</p>
<p>13.3 图片懒加载/加载监听</p>
<p>imagesLoaded</p>
<p>Echo.js</p>
<p>lazySizes</p>
<p>jquery_lazyload</p>
<p>lazyload.js</p>
<p>waitForImages – 图片加载监听库</p>
<p>13.4 图片轮播/展示</p>
<p>FlexSlider</p>
<p>unslider – 小而美的轮播库</p>
<p>prettyPhoto</p>
<p>13.5 图片剪裁</p>
<p>croppic – an image cropping jquery plugin</p>
<p>13.6 进度条</p>
<p>NProgress.js</p>
<p>progress.js</p>
<p>Pace – Automatic page load progress bar</p>
<p>jquery-ajax-progress</p>
<p>13.7 侧滑插件(offcancas)</p>
<p>pushy – a responsive off-canvas navigation menu</p>
<p>13.8 菜单(Menu)</p>
<p>SuperFish – 基于jQuery的级联下拉菜单</p>
<p>Responsive Nav – 响应式导航</p>
<p>13.9 滚动侦测(ScrollSpy)</p>
<p>jquery-scrollspy(1)</p>
<p>jquery-scrollspy(2)</p>
<p>Waypoints</p>
<p>13.10 滚动加载更多</p>
<p>jScroll</p>
<p>13.11 平滑滚动插件(Smooth Scroll)</p>
<p>jquery-smooth-scroll</p>
<p>jquery.scrollTo – 平滑滚动到页面指定位置</p>
<p>13.12 全屏滚动</p>
<p>pagePiling.js – 全屏滚动效果</p>
<p>13.13 分屏滚动</p>
<p>multiscroll.js – 分屏滚动效果</p>
<p>13.14 转场效果</p>
<p>Animsition – 页面切换时的过渡效果</p>
<p>13.15 固定元素(Sticky)</p>
<p>sticky – jQuery Plugin for Sticky Objects</p>
<p>jquery.pin – 固定页面元素</p>
<p>13.16 触控事件</p>
<p>Hammer.JS</p>
<p>13.17 拖拽组件</p>
<p>Draggabilly – 专注于拖拽功能的 JS 库</p>
<p>13.18 隐藏或展示页面元素</p>
<p>Headroom.js – 在不需要页头时将其隐藏</p>
<p>Readmore.js – 内容显示与隐藏插件</p>
<p>13.19 滚动条</p>
<p>jScrollPane</p>
<p>13.20 视差滚动(Parallax Scrolling)</p>
<p>parallax.js</p>
<p>jparallax</p>
<p>14. 代码高亮插件/代码编辑器</p>
<p>google-code-prettify</p>
<p>highlight.js</p>
<p>Rainbow</p>
<p>ACE</p>
<p>CodeMirror</p>
<p>Crayon Syntax Highlighter</p>
<p>prism – Lightweight, robust, elegant syntax highlighting.</p>
<p>15. UI Icon 组件</p>
<p>Font Awesome</p>
<p>Glyphter: The SVG Font Machine</p>
<p>Perfect Icons</p>
<p>iconizr</p>
<p>Cikonss – 纯CSS实现的响应式Icon</p>
<p>Simple Icons</p>
<p>16. 动画</p>
<p>animate.css – A cross-browser library of CSS animations.</p>
<p>Transit – CSS transitions and transformations for jQuery</p>
<p>Move.js – 简化CSS3动画的JS库</p>
<p>ScrollMe – 在网页中加入各种滚动动画效果</p>
<p>Effeckt.css – A Performant Transitions and Animations Library</p>
<p>NEC动画库</p>
<p>csshake – CSS classes to move your DOM</p>
<p>magic – CSS3 Animations with special effects</p>
<p>Hover.css</p>
<p>css-loaders</p>
<p>SpinKit</p>
<p>17. 本地存储</p>
<p>cross-storage – Cross domain local storage</p>
<p>localForage</p>
<p>pouchdb</p>
<p>basil.js</p>
<p>18. 模板引擎</p>
<p>mustache.js</p>
<p>Handlebars.js</p>
<p>artTemplate</p>
<p>baiduTemplate</p>
<p>JSRender</p>
<p>EJS – JavaScript Templates</p>
<p>Juicer – A Light Javascript Templete Engine.</p>
<p>Tempo</p>
<p>json2html</p>
<p>19. 通知组件/弹框组件</p>
<p>alertify.js</p>
<p>AlertifyJS</p>
<p>SweetAlert</p>
<p>Messenger – 非常酷的弹框组件</p>
<p>PNotify</p>
<p>20. 提示控件(Tooltips)</p>
<p>qTip2 – Pretty powerful tooltips</p>
<p>tooltip – CSS Tooltips</p>
<p>tooltipster – A jQuery tooltip plugin</p>
<p>grumble.js – 气泡形状的提示（Tooltip）控件</p>
<p>Ouibounce – 离站提示控件</p>
<p>21. 对话框/弹出层(lightbox)</p>
<p>fancyBox – Fancy jQuery lightbox</p>
<p>jquery-lightbox – The popular lightbox script, ported to jQuery</p>
<p>Colorbox – a jQuery lightbox</p>
<p>artDialog – 经典的网页对话框组件</p>
<p>DialogEffects</p>
<p>22. 文档/表格</p>
<p>handsontable – 在线可编辑excel表格</p>
<p>jQuery Bootgrid – 用于ajax生成动态表格</p>
<p>DataTables – Table plug-in for jQuery</p>
<p>23. 目录树插件</p>
<p>zTree_v3 – jQuery Tree Plugin</p>
<p>jstree – jQuery Tree Plugin</p>
<p>fancytree – Tree plugin for jQuery</p>
<p>24. Ajax模块</p>
<p>fetch – A window.fetch JavaScript polyfill</p>
<p>reqwest – browser asynchronous http requests</p>
<p>minAjax.js</p>
<p>25. 音频/视频</p>
<p>jPlayer – HTML5 Audio &amp; Video for jQuery</p>
<p>video.js – HTML5 &amp; Flash video player</p>
<p>Accessible HTML5 Video Player – PayPal 开源的 HTML5 视频播放器</p>
<p>Clappr – 开源的Web视频播放器</p>
<p>Plyr – A simple HTML5 media player</p>
<p>FitVids.js – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.</p>
<p>BigVideo.js – The jQuery Plugin for Big Background Video</p>
<p>BigScreen – A simple library for using the JavaScript Full Screen API</p>
<p>Vide – 视频背景</p>
<p>winamp2-js</p>
<p>26. 按钮</p>
<p>Buttons – A CSS button library</p>
<p>ButtonComponentMorph</p>
<p>ProgressButtonStyles</p>
<p>CreativeButtons</p>
<p>CSS3 buttons</p>
<p>27. 富文本编辑器/Markdown编辑器/Markdown解析器</p>
<p>Simditor – 简单快速的富文本编辑器</p>
<p>BachEditor – 一个有情怀的编辑器</p>
<p>bootstrap-markdown</p>
<p>marked – markdown解析器</p>
<p>28. 内容提取(Readability)</p>
<p>Readability</p>
<p>json.human.js – Json Formatting for Human Beings</p>
<p>29. 颜色(CSS Colors)/SVG</p>
<p>CSS Colours</p>
<p>SVGeneration</p>
<p>30. 实用工具/其他插件</p>
<p>jquery-cookie</p>
<p>FastClick – 处理移动端 click 事件 300 毫秒延迟</p>
<p>screenfull.js – 全屏切换</p>
<p>Async.js – 异步操作</p>
<p>html2canvas – 实现纯JS网页截图</p>
<p>jquery.qrcode.js – 生成二维码的 jQuery 插件</p>
<p>FocusPoint.js 实现图片的响应式裁剪</p>
<p>DD_belatedPNG.js – 让IE6支持透明PNG图片</p>
<p>nakedpassword – 用脱衣女帮助检测密码强度</p>
<p>前端参考集</p>
<p>frontend-guidelines – Some HTML, CSS and JS best practices.</p>
<p>Codrops – Useful resources</p>
<p>Front-end Code Standards &amp; Best Practices</p><br><br>
来源：https://www.cnblogs.com/SallyShan/p/11461922.html

查看完整版本: 30组常用前端开发组件库