1. 程式人生 > >前端各類插件、處理

前端各類插件、處理

輕量 per lis ons smoke oop 集成 -c 進度提示

spa單頁

  • https://github.com/peachananr/onepage-scroll 創建一個單頁滾動網站
  • https://github.com/lvming6816077/H5FullscreenPage
  • https://github.com/alvarotrigo/fullPage.js
  • https://github.com/qiqiboy/pageSwitch
  • https://github.com/lukehaas/Scrollify
  • https://github.com/hakimel/reveal.js HTML PPT 框架

form表單相關

  • https://github.com/idriskhenchil/Fort.js 時尚、現代的表單填寫進度提示效果

===表單美化===

  • https://github.com/fronteed/icheck
  • https://vsn4ik.github.io/bootstrap-checkbox/
  • https://github.com/forsigner/magic-check

===表單驗證===

  • https://github.com/alfredobarron/smoke
  • https://github.com/niceue/nice-validator
  • https://github.com/elclanrs/jq-idealforms
  • https://github.com/guillaumepotier/Parsley.js

===日期===

  • https://github.com/dangrossman/bootstrap-daterangepicker
  • https://github.com/moment/moment javascript 解析,驗證,操作,和展示日期
  • https://github.com/fengyuanchen/datepicker
  • https://github.com/hilios/jQuery.countdown
  • https://github.com/chmln/flatpickr 一款輕量級的、強大的日期選擇器,零依賴

===自動高度===

  • https://github.com/jackmoore/autosize

===自動完成===

  • https://github.com/yuku-t/jquery-textcomplete
  • http://sniperwolf.github.io/taggingJS/
  • https://github.com/fengyuanchen/completer
  • https://github.com/nicolasbize/magicsuggest
  • https://github.com/leaverou/awesomplete/ 比datalist更強大更實用,零依賴的簡單自動補全插件

===下拉列表===

  • https://github.com/gustavohenke/bselect
  • http://loopj.com/jquery-tokeninput/
  • https://github.com/select2/select2
  • http://selectize.github.io/selectize.js/
  • http://davidstutz.github.io/bootstrap-multiselect/
  • https://github.com/harvesthq/chosen
  • https://github.com/wenzhixin/multiple-select

===上傳===

  • https://github.com/mailru/FileAPI
  • https://github.com/moxiecode/plupload
  • https://github.com/blueimp/jQuery-File-Upload
  • https://github.com/fex-team/webuploader
  • https://github.com/weixiyen/jquery-filedrop
  • http://rubaxa.github.io/jquery.fileapi/

===編輯器===

  • https://github.com/mycolorway/simditor
  • https://github.com/neilj/Squire
  • https://github.com/basecamp/trix
  • https://github.com/wangfupeng1988/wangEditor
  • https://github.com/summernote/summernote
  • https://github.com/pandao/editor.md
  • https://github.com/Houfeng/mditor 一個簡潔、易於集成、方便擴展、期望舒服的編寫 markdown 的編輯
  • https://github.com/quilljs/quill/ 可以靈活自定義的開源的富文本編輯器

===表單數據===

  • https://github.com/maxatwork/form2js
  • https://github.com/tinganho/jquery.formParams

===格式化===

  • https://github.com/igorescobar/jQuery-Mask-Plugin
  • https://github.com/nosir/cleave.js/ 自動格式化表單輸入框的文本內容

dialog彈出相關

===彈窗===

  • https://github.com/VersatilityWerks/jAlert
  • https://github.com/t4t5/sweetalert 替代 Alert 的漂亮的提示效果
  • https://github.com/aui/artDialog
  • https://github.com/HubSpot/messenger
  • https://github.com/marcosesperon/Messi
  • https://github.com/jackmoore/colorbox
  • https://github.com/makeusabrew/bootbox
  • http://stephanwagner.me/jBox
  • https://github.com/craftpip/jquery-confirm
  • https://github.com/sentsin/layer

===通知===

  • https://github.com/justindomingue/ohSnap
  • https://github.com/needim/noty
  • https://github.com/fabien-d/alertify.js
  • https://github.com/ericprieto/simply-toast
  • https://github.com/notifyjs/notifyjs
  • https://github.com/sciactive/pnotify
  • https://github.com/csilva2810/notifier JavaScript 和 CSS 打造的一款漂亮的通知提示組件

===提示===

  • https://github.com/HubSpot/tooltip
  • https://github.com/iamceege/tooltipster
  • https://github.com/jaz303/tipsy
  • https://github.com/paulkinzett/toolbar
  • https://github.com/stevenbenner/jquery-powertip
  • https://github.com/atomiks/tippyjs 一個輕量級的純 JS 消息提示庫

devtools開發工具

  • https://github.com/vladikoff/grunt-devtools

mobile移動端相關

  • https://github.com/ftlabs/fastclick 消除移動端瀏覽器上的點擊事件 300ms 延遲
  • https://github.com/hammerjs/hammer.js/ 一款小巧的手勢庫

===導航菜單===

  • https://github.com/mango/slideout 觸摸滑出式 Web App 導航菜單

===選擇器===

  • https://github.com/ustbhuangyi/picker 一款輕量級IOS風格的JavaScript選擇器

mouse鼠標相關

===Hover===

  • https://github.com/gudh/ihover
  • https://github.com/kazzkiq/balloon.css
  • https://github.com/IanLunn/Hover CSS3鼠標移到元素上面的動畫效果

===鼠標事件===

  • https://github.com/jquery/jquery-mousewheel

===滾動監控===

  • https://github.com/imakewebthings/waypoints
  • https://github.com/flesler/jquery.scrollTo
  • https://github.com/mpalpha/animate-scroll
  • https://github.com/jlmakes/scrollreveal 使元素以非常酷帥的方式進入畫布 (Viewpoint)
  • https://github.com/infinite-scroll/infinite-scroll 一款滾動加載按需加載的輕量級插件

===滾動條===

  • https://github.com/kswedberg/jquery-smooth-scroll
  • https://github.com/rochal/jQuery-slimScroll
  • https://github.com/cubiq/iscroll
  • https://github.com/jamesflorentino/nanoScrollerJS
  • https://github.com/inuyaksa/jquery.nicescroll
  • https://github.com/Automattic/antiscroll
  • https://github.com/ustbhuangyi/better-scroll 小巧,靈活的 JavaScript 模擬滾動條的插件

===右鍵菜單===

  • https://github.com/swisnl/jQuery-contextMenu

===跟隨===

  • https://github.com/garand/sticky
  • https://github.com/davist11/jQuery-Stickem
  • https://github.com/leafo/sticky-kit

===拖拽排序===

  • https://github.com/RubaXa/Sortable 一款用於實現元素拖拽排序的功能的插件
  • https://github.com/farhadi/html5sortable
  • https://github.com/desandro/draggabilly 輕松實現拖放功能(Drag & Drop)

data數據處理

  • https://github.com/nosir/cleave.js 用於格式化文本框輸入內容的插件

===模板引擎===

  • https://github.com/blueimp/JavaScript-Templates
  • https://github.com/aui/artTemplate
  • https://github.com/xtemplate/xtemplate
  • https://github.com/ecomfe/etpl

===PJAX===

  • https://github.com/defunkt/jquery-pjax

===Fetch===

  • https://github.com/github/fetch

===模擬數據===

  • https://github.com/jakerella/jquery-mockjax

===loadsh===

  • https://github.com/lodash/loadsh

===es6-shim===

  • https://github.com/paulmillr/es6-shim

image圖片相關

  • https://github.com/desandro/imagesloaded 檢測網頁中的圖片是否加載完成

===相冊===

  • https://github.com/fat/zoom.js
  • https://github.com/krewenki/jquery-lightbox
  • https://github.com/scaron/prettyphoto
  • https://github.com/blueimp/Bootstrap-Image-Gallery
  • https://github.com/yairEO/photobox
  • https://github.com/sachinchoolur/lightGallery
  • https://github.com/sachinchoolur/lightgallery.js

===幻燈片/走馬燈===

  • https://github.com/dimsemenov/PhotoSwipe
  • https://github.com/nolimits4web/Swiper 經典的移動觸摸滑塊輪播插件
  • https://github.com/thebird/Swipe
  • https://github.com/jssor/slider
  • https://github.com/woothemes/FlexSlider
  • https://github.com/idiot/unslider
  • https://github.com/OwlFonk/OwlCarousel
  • https://github.com/kenwheeler/slick 功能異常強大的一個圖片滑動切換效果庫
  • https://github.com/wtm/jquery.snapscroll
  • https://github.com/kswedberg/jquery-carousel-lite
  • https://github.com/qiqiboy/touchslider
  • https://github.com/joelambert/Flux-Slider
  • https://github.com/gilbitron/Ideal-Image-Slider
  • https://github.com/lyfeyaj/Swipe 非常輕量級的一個圖片滑動切換效果庫
  • https://github.com/metafizzy/flickity 支持觸摸、響應式的圖片滑動切換效果庫

===圖片壓縮===

  • https://github.com/think2011/localResizeIMG

===圖片裁切===

  • https://github.com/fengyuanchen/cropper
  • https://github.com/blueimp/JavaScript-Load-Image
  • https://github.com/sconsult/croppic
  • https://github.com/acornejo/jquery-cropbox

===懶加載(延遲加載)===

  • https://github.com/toddmotto/echo 利用 data-* 屬性實現的圖片延遲加載插件
  • https://github.com/callmecavs/layzr.js
  • https://github.com/tuupola/jquery_lazyload

===加載監控===

  • https://github.com/desandro/imagesloaded

===二維碼===

  • https://github.com/jeromeetienne/jquery-qrcode

animation動畫相關

  • https://github.com/daniel-lundin/snabbt.js 極簡的 JavaScript 動畫庫

information項目資料

===regularjs===

  • https://github.com/regularjs/regular

===加載器===

  • https://github.com/seajs/seajs

===項目===

  • https://github.com/mz121star/NJBlog
  • https://github.com/nswbmw/N-blog
  • https://github.com/phanan/koel

===資料===

  • https://github.com/moklick/frontend-stuff
  • https://github.com/vhf/free-programming-books
  • https://github.com/alsotang/node-lessons
  • https://github.com/Aaaaaashu/Front-End-Style-Guide
  • https://github.com/foru17/front-end-collect
  • https://github.com/AlloyTeam/Mars
  • https://github.com/remy/html5demos
  • https://github.com/youyudehexie/node123
  • https://github.com/hawx1993/Front-end-Interview-questions
  • https://github.com/shichuan/javascript-patterns
  • https://github.com/HubSpot/youmightnotneedjquery
  • https://github.com/oneuijs/You-Dont-Need-jQuery
  • https://github.com/jobbole/awesome-javascript-cn

===async 例子===

  • https://github.com/alsotang/async_demo

other其他相關

===XSS===

  • https://github.com/leizongmin/js-xss

===漢字轉拼音===

  • https://github.com/hotoo/pinyin

===雪花特效===

  • https://github.com/loktar00/JQuery-Snowfall

===圖表制作===

  • https://github.com/ecomfe/echarts
  • https://github.com/flot/flot

===進度條===

  • https://github.com/rstacruz/nprogress
  • https://github.com/usablica/progress.js

===剪切板===

  • https://github.com/zeroclipboard/zeroclipboard
  • https://github.com/zenorocha/clipboard.js

===過濾===

  • http://isotope.metafizzy.co/

===打分===

  • https://github.com/wbotelhos/raty

===閱讀更多===

  • https://github.com/kswedberg/jquery-expander
  • https://github.com/jedfoster/Readmore.js

===畫布===

  • https://github.com/rezoner/CanvasQuery
  • https://github.com/blueimp/JavaScript-Canvas-to-Blob 將畫布內容轉成二進制流

===各種判斷===

  • https://github.com/arasatasaygin/is.js
  • https://github.com/viljamis/feature.js

===懶加載===

  • https://github.com/rgrove/lazyload

===jQuery插件===

  • https://github.com/bitovi/jquerypp

===實現jQuery庫===

  • https://github.com/MeCKodo/forchange

前端各類插件、處理