30組常用前端開發(fā)組件庫

30組常用前端開發(fā)組件庫，前端組件收集整理列表

?收藏 (2)

2015-07-08?分類：網(wǎng)站開發(fā)與網(wǎng)絡(luò)建設(shè)?圍觀：6486次

這里是收集的web前端開發(fā)常用前端開發(fā)組件庫蝶糯，搭建web app常用的樣式/組件等收集列表(移動優(yōu)先)察绷。主要包含前端框架志群，構(gòu)建工具浑彰，自動化模塊拾积、jQuery插件爷狈、前端樣式等植影，囊括最實用的前端開發(fā)組件庫！

0. 前端自動化

前端構(gòu)建工具

gulp – The streaming build system

grunt – the JavaScript Task Runner

前端模塊管理器

Bower – A package manager for the web

Browserify

Component

Duo

RequireJS

Sea.js

css預(yù)處理器

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

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 – 雙向數(shù)據(jù)綁定庫

Keys.js – 應(yīng)用快捷鍵

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. 基礎(chǔ)模版

HTML5 BOILERPLATE

Modernizr

Normalize.css

6. 排版

yue.css

typo.css

7. 網(wǎng)格系統(tǒng)

grid

Flexbox Grid

8. HTML5 API 應(yīng)用

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 – 表單填寫進(jìn)度提示

10.2 < select > 相關(guān)

Chosen

Select2

bootstrap-select

10.3 單選框/復(fù)選框相關(guān)

iCheck – 增強復(fù)選框和單選按鈕

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 標(biāo)簽插件(Tag)

TaggingJS – 可以靈活定制的 jQuery 標(biāo)簽系統(tǒng)插件

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

13.2 瀑布流

Masonry

Isotope – Filter & sort magical layouts

13.3 圖片懶加載/加載監(jiān)聽

imagesLoaded

Echo.js

lazySizes

jquery_lazyload

lazyload.js

waitForImages – 圖片加載監(jiān)聽庫

13.4 圖片輪播/展示

FlexSlider

unslider – 小而美的輪播庫

prettyPhoto

13.5 圖片剪裁

croppic – an image cropping jquery plugin

13.6 進(jìn)度條

NProgress.js

progress.js

Pace – Automatic page load progress bar

jquery-ajax-progress

13.7 側(cè)滑插件(offcancas)

pushy – a responsive off-canvas navigation menu

13.8 菜單(Menu)

SuperFish – 基于jQuery的級聯(lián)下拉菜單

Responsive Nav – 響應(yīng)式導(dǎo)航

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 轉(zhuǎn)場效果

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

13.15 固定元素(Sticky)

sticky – jQuery Plugin for Sticky Objects

jquery.pin – 固定頁面元素

13.16 觸控事件

Hammer.JS

13.17 拖拽組件

Draggabilly – 專注于拖拽功能的 JS 庫

13.18 隱藏或展示頁面元素

Headroom.js – 在不需要頁頭時將其隱藏

Readmore.js – 內(nèi)容顯示與隱藏插件

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實現(xiàn)的響應(yīng)式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 – 在網(wǎng)頁中加入各種滾動動畫效果

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

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 – 經(jīng)典的網(wǎng)頁對話框組件

DialogEffects

22. 文檔/表格

handsontable – 在線可編輯excel表格

jQuery Bootgrid – 用于ajax生成動態(tài)表格

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

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

Simditor – 簡單快速的富文本編輯器

BachEditor – 一個有情懷的編輯器

bootstrap-markdown

marked – markdown解析器

28. 內(nèi)容提取(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 – 實現(xiàn)純JS網(wǎng)頁截圖

jquery.qrcode.js – 生成二維碼的 jQuery 插件

FocusPoint.js 實現(xiàn)圖片的響應(yīng)式裁剪

DD_belatedPNG.js – 讓IE6支持透明PNG圖片

nakedpassword – 用脫衣女幫助檢測密碼強度

前端參考集

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

Codrops – Useful resources

Front-end Code Standards & Best Practices

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末何乎，一起剝皮案震驚了整個濱河市句惯，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌支救，老刑警劉巖抢野，帶你破解...
    沈念sama閱讀 219,366評論 6贊 508
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異各墨，居然都是意外死亡指孤，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門贬堵，熙熙樓的掌柜王于貴愁眉苦臉地迎上來恃轩，“玉大人，你說我怎么就攤上這事黎做〔骢耍” “怎么了？”我有些...
    開封第一講書人閱讀 165,689評論 0贊 356
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蒸殿，是天一觀的道長筷厘。 經(jīng)常有香客問我，道長宏所，這世上最難降的妖魔是什么酥艳？ 我笑而不...
    開封第一講書人閱讀 58,925評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮爬骤，結(jié)果婚禮上充石，老公的妹妹穿的比我還像新娘。我一直安慰自己霞玄，他們只是感情好骤铃，可當(dāng)我...
    茶點故事閱讀 67,942評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著溃列，像睡著了一般劲厌。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上听隐，一...
    開封第一講書人閱讀 51,727評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機與錄音哄啄，去河邊找鬼雅任。 笑死，一個胖子當(dāng)著我的面吹牛咨跌，可吹牛的內(nèi)容都是我干的沪么。 我是一名探鬼主播，決...
    沈念sama閱讀 40,447評論 3贊 420
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼锌半，長吁一口氣：“原來是場噩夢啊……” “哼禽车！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,349評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤殉摔，失蹤者是張志新（化名）和其女友劉穎州胳，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體逸月，經(jīng)...
    沈念sama閱讀 45,820評論 1贊 317
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡栓撞，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3贊 337
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了碗硬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓤湘。...
    茶點故事閱讀 40,127評論 1贊 351
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖恩尾，靈堂內(nèi)的尸體忽然破棺而出弛说，到底是詐尸還是另有隱情，我是刑警寧澤翰意，帶...
    沈念sama閱讀 35,812評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布木人，位于F島的核電站，受9級特大地震影響猎物，放射性物質(zhì)發(fā)生泄漏虎囚。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3贊 331
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一蔫磨、第九天 我趴在偏房一處隱蔽的房頂上張望淘讥。 院中可真熱鬧，春花似錦堤如、人聲如沸蒲列。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0贊 22
  • 一樁弒父案搀罢，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽蝗岖。三九已至，卻和暖如春榔至，著一層夾襖步出監(jiān)牢的瞬間抵赢，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工唧取， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留铅鲤，地道東北人。 一個月前我還...
    沈念sama閱讀 48,388評論 3贊 373
  • 代替公主和親
    正文 我出身青樓枫弟，卻偏偏與公主長得像邢享，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子淡诗，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,066評論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • 前端組件庫 搭建web app常用的樣式/組件等收集列表(移動優(yōu)先) 8. 路由和鏈接(Routing And U...
    guanguans閱讀 2,603評論 0贊 17
  • 0. 前端自動化(Workflow) 前端構(gòu)建工具 Yeoman – a set of tools for aut...
    JackWhite閱讀 2,332評論 1贊 12
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5骇塘？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)伊履。 注意：講述HT...
    kismetajun閱讀 27,489評論 1贊 45
  • 本文基于hbase-1.3.0源碼 1. 前言 本文主要介紹在cluster模式下（并且使用zookeeper協(xié)調(diào)...
    aaron1993閱讀 1,979評論 0贊 3
  • 一開始的瑪麗雅姆的是愛自己的父親的，每到星期四款违，她就希望自己父親來看自己唐瀑，每到這一刻她會坐立不安，心不在...
    寧靜致遠(yuǎn)安之若素閱讀 432評論 0贊 0