前端組件庫大合集-必備收藏

 

• • 前端組件庫

    搭建web app經常使用的樣式/組件等收集列表(移動優先)

    0. 前端自動化(Workflow)

    • 前端構建工具
      • Yeoman – a set of tools for automating development workflow
      • gulp – The streaming build system
      • grunt – the JavaScript Task Runner
      • F.I.S – 前端集成解決方案
    • 前端模塊管理器
      • Bower – A package manager for the web
      • Browserify
      • Component
      • Duo
      • RequireJS
      • Sea.js
    • css預處理器
      • Less – Less is More , Than CSS
      • Sass – Syntactically Awesome Style Sheets
      • Stylus – Expressive, dynamic, robust CSS

    1. 前端框架(Frameworks)

    • Bootstrap
    • Foundation
    • Amaze UI
    • Semantic UI
    • Pure CSS
    • topcoat
    • UIkit
    • Material UI
    • Framework7
    • mui
    • ionic framework
    • Fries
    • jQuery Mobile

    2. JavaScript 框架彙總

    • JavaScript 框架
      • react
      • 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-html5
    • Egret Engine
    • LimeJS
    • EaselJS
    • three.js
    • AlloyStick
    • The-Best-JS-Game-Framework
    • CanvasEngine
    • Quintus

    4. ui組件庫

    • GMU
    • NEC
    • NEJ
    • Pure CSS Components
    • magic-of-css

    5. 基礎模版

    • HTML5 BOILERPLATE
    • Modernizr
    • Normalize.css
    • Responsive – 響應式佈局

    6. 排版

    • yue.css
    • typo.css
    • chinese-copywriting-guidelines – 中文文案排版指南

    7. 網格系統

    • grid
    • Flexbox Grid

    8. HTML5 API 應用

    • History.js – gracefully supports 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)

    • Validator
    • Parsley
    • jquery.form.js – jQuery Form Plugin
    • Validform
    • validator.js
    • formvalidator.js
    • Fort.js – 表單填寫進度提示

    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
    • Dropzone.js – drag’n’drop library拖拽上傳
    • flow.js

    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 標籤系統插件

    10.8 自動完成插件

    • At.js – 一個Twitter/微博樣式的@自動完成插件
    • jquery-textcomplete – 智能搜索提示框/自動補全

    10.9 樣式修正

    • autosize – 使文本框自動適應所輸入的內容

    11. 圖表繪製

    • 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

    12. 日期格式化

    • Moment.js
    • 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
    • OwlCarousel – create beautiful responsive carousel slider
    • jquery-mousewheel – jQuery鼠標滾輪滾動偵測插件

    13.2 瀑布流

    • Masonry
    • Isotope – Filter & sort magical layouts

    13.3 圖片懶加載/加載監聽

    • imagesLoaded
    • Echo.js
    • lazySizes
    • jquery_lazyload
    • lazyload.js
    • waitForImages – 圖片加載監聽庫

    13.4 圖片輪播/展現

    • FlexSlider
    • unslider – 小而美的輪播庫
    • prettyPhoto

    13.5 圖片剪裁/處理

    • croppic – an image cropping jquery plugin
    • jQuery.eraser – 圖像擦除插件

    13.6 進度條

    • NProgress.js
    • progress.js
    • 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
    • jquery.scrollTo – 平滑滾動到頁面指定位置

    13.12 全屏滾動

    • pagePiling.js – 全屏滾動效果

    13.13 分屏滾動

    • multiscroll.js – 分屏滾動效果

    13.14 轉場效果

    • Animsition – 頁面切換時的過渡效果

    13.15 固定元素(Sticky)

    • sticky – jQuery Plugin for Sticky Objects
    • jquery.pin – 固定頁面元素

    13.16 觸控事件

    • Hammer.js
    • jquery.event.move.js

    13.17 拖拽組件

    • Draggabilly – 專一於拖拽功能的 JS 庫

    13.18 隱藏或展現頁面元素

    • Headroom.js – 在不須要頁頭時將其隱藏
    • Readmore.js – 內容顯示與隱藏插件

    13.19 滾動條

    • jScrollPane

    13.20 視差滾動(Parallax Scrolling)

    • parallax.js
    • jparallax

    14. 代碼高亮插件/代碼編輯器

    • google-code-prettify
    • highlight.js
    • 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. 動畫

    • 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

    17. 本地存儲

    • cross-storage – Cross domain local storage
    • localForage
    • pouchdb
    • basil.js

    18. 模板引擎

    • mustache.js
    • Handlebars.js
    • artTemplate
    • baiduTemplate
    • JSRender
    • EJS – JavaScript Templates
    • Juicer – A Light Javascript Templete Engine.
    • Tempo
    • json2html

    19. 通知組件/彈框組件

    • alertify.js
    • AlertifyJS
    • SweetAlert
    • Messenger – 很是酷的彈框組件
    • PNotify
    • Notify.js – A simple, versatile notification library

    20. 提示控件(Tooltips)

    • qTip2 – Pretty powerful tooltips
    • tooltip – CSS Tooltips
    • tooltipster – A jQuery tooltip plugin
    • grumble.js – 氣泡形狀的提示（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 window.fetch JavaScript polyfill
    • 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 button library
    • ButtonComponentMorph
    • ProgressButtonStyles
    • CreativeButtons
    • CSS3 buttons
    • jquery.onoff – Interactive, accessible toggle switches for the web.

    27. 富文本編輯器/Markdown編輯器/Markdown解析器

    • Simditor – 簡單快速的富文本編輯器
    • BachEditor – 一個有情懷的編輯器
    • bootstrap-markdown
    • marked – markdown解析器

    28. 內容提取(Readability)

    • Readability
    • json.human.js – Json Formatting for Human Beings

    29. 顏色(CSS Colors)/SVG

    • CSS Colours
    • SVGeneration

    30. 實用工具/其餘插件

    • 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

 

本文來源地址：  https://www.janecc.com/he-sets-the-front-end-component-library-the-essential-collection.html