前端元件，不多，只保留自己覺得適合和好用的

aisuhua發表於2016-01-03
前端元件

獨立的元件

表單驗證

  1. jQuery Validation Plugin http://jqueryvalidation.org/

下拉選單

  1. chosen https://github.com/harvesthq/chosen

  2. select2 https://github.com/select2/select2

燈箱效果

  1. fancyBox https://github.com/fancyapps/fancyBox

  2. lightbox2 https://github.com/lokesh/lightbox2

載入動畫

  1. spin.js https://github.com/fgnass/spin.js

  2. nprogress https://github.com/rstacruz/nprogress

時間選擇器

  1. clockpicker https://github.com/weareoutman/clockpicker

步驟條

  1. jquery-steps https://github.com/rstaib/jquery-steps

新手引導

  1. intro.js https://github.com/usablica/intro.js

檔案上傳

  1. jQuery-File-Upload https://github.com/blueimp/jQuery-File-Upload

  2. webuploader http://fex.baidu.com/webuploader/ （百度出品）

  3. dropzone https://github.com/enyo/dropzone

多媒體播放

  1. plyr https://github.com/selz/plyr

動畫效果

  1. animate.css https://github.com/daneden/animate.css

字型圖示

  1. Font-Awesome https://github.com/FortAwesome/Font-Awesome

  2. iconfont http://www.iconfont.cn/ （阿里巴巴出品）

圖片輪播

  1. slick https://github.com/kenwheeler/slick

  2. FlexSlider https://github.com/woothemes/FlexSlider

  3. Swiper https://github.com/nolimits4web/Swiper

favicon 效果

  1. favico.js https://github.com/ejci/favico.js

  2. tinycon https://github.com/tommoor/tinycon

訊息提示

  1. toastr https://github.com/CodeSeven/toastr

富文字編輯器

  1. summernote https://github.com/summernote/summernote

  2. simditor https://github.com/mycolorway/simditor（國人開發）

表單增強

  1. icheck https://github.com/fronteed/icheck

  2. switchery https://github.com/abpetkov/switchery

統計報表

  1. echarts http://echarts.baidu.com/（百度出品）

其他

  1. jquery-pjax https://github.com/defunkt/jquery-pjax（pushState + ajax = pjax）

  2. grumble.js https://github.com/jamescryer/grumble.js（氣泡效果，可以用作新功能提示）

基於 Bootstrap 的元件

表格

  1. bootstrap-table https://github.com/wenzhixin/bootstrap-table（國人開發）

時間選擇器

  1. bootstrap-datepicker https://github.com/eternicode/bootstrap-datepicker

  2. bootstrap-daterangepicker https://github.com/dangrossman/bootstrap-daterangepicker

訊息提示

  1. pnotify https://github.com/sciactive/pnotify

模態彈窗

  1. bootbox https://github.com/makeusabrew/bootbox（基礎，原生）

  2. bootstrap3-dialog https://github.com/nakupanda/bootstrap3-dialog（增強，自定義）

下拉選單

  1. bootstrap-select https://github.com/silviomoreto/bootstrap-select

  2. bootstrap-multiselect https://github.com/davidstutz/bootstrap-multiselect

Popover

  1. webui-popover https://github.com/sandywalker/webui-popover

皮膚主題

  1. bootswatch https://github.com/thomaspark/bootswatch

  2. todc-bootstrap https://github.com/todc/todc-bootstrap（Google-styled theme for Bootstrap）

  3. bootstrap-material-design https://github.com/FezVrasta/bootstrap-material-design

  4. bootstrap-flat http://scottdorman.github.io/bootstrap-flat/

  5. bootstrap-theme-slim https://github.com/overtrue/bootstrap-theme-slim

表單增強

  1. bootstrap-show-password https://github.com/wenzhixin/bootstrap-show-password（國人開發）

  2. bootstrap-switch https://github.com/nostalgiaz/bootstrap-switch

前端框架

  1. Bootstrap http://v3.bootcss.com/

  2. Semantic UI http://www.semantic-ui.cn/

  3. primer https://github.com/primer/primer（Github CSS toolkit and guidelines）

  4. amazeui http://amazeui.org/（國人開發）

這裡所羅列到的元件，是自己在平時工作和學習過程中使用到的。比較好的就會保留下來，作為一個總結和參考，也方便以後的翻閱。
以後自己看到更好的，也會及時更新。如果您有知道有更好用的元件，希望您能推薦給我哦~，謝謝！

相關文章