50個網站後台必備功能/插件 (RWD 網頁設計) Top 50 jQuery

2017/12

jquery50


HTML5, ror, php, jsp, asp.net
基本上後台需要文字編輯器、檔案上傳、圖片處理、表單應用等功能,
常見的插件如下整理。

目錄 #

 

JS/HTML 框架 #


jQuery#
功能豐富的JavaScript庫
官網:http://jquery.com/
下載:http://jquery.com/download/


Bootstrap 3#
CSS前端框架
官網:http://getbootstrap.com/
下載:http://getbootstrap.com/getting-started#download



我的網站想要做一個後台,必備的功能需求
front-end /Responsive Admin Dasboard Template/ theme free 

返回目錄 (TOP)
 

日曆、日期、時間套件 #


FullCalendar #
功能強大的拖放日曆
官網:http://fullcalendar.io/
下載:http://fullcalendar.io/download/


Tiva Events Calendar
jQuery 行事曆。在日曆上顯示活動的完整信息
官網:http://tivatheme.com/tiva-events-calendar/
範例:http://tivatheme.com/tiva-events-calendar/
下載:http://tivatheme.com/tiva-events-calendar/

timeago.js 
『不是在此時 不知在何時 我想大約會是在冬季』
FB裡面會把當前時間轉換成模糊的狀態,例如一小時前,一天前...等。Timeago 就是是一個 jQuery 插件,可以很容易地支持自動更新模糊時間戳(例如“4分鐘前”或“大約1天前”)。
Timeago最初是為了使用在評論裡面添加易讀的時間戳。
你打開了這個頁面 (2 分鐘前)。
這個頁面最後修改於 (1天前)。
官網:http://timeago.yarp.com/#webgolds


Vertical Timeline #
垂直時間軸
官網:https://codyhouse.co/gem/vertical-timeline/
範例:https://codyhouse.co/demo/vertical-timeline/index.html
下載:https://codyhouse.co/redirect/?resource=vertical-timeline

timeline 時間線 #
  • 圖標可以任意定義(但並不推薦更改)
  • 標題區域並不意味著一定要加粗
  • 內容區域可自由填充
官網:www.layui.com/doc/element/timeline.html

DateRangePicker #
日期區間選擇器
官網:http://www.daterangepicker.com/
範例:http://www.daterangepicker.com/#examples
下載:https://github.com/dangrossman/bootstrap-daterangepicker/archive/master.zip

clockPicker #
時間選擇器,時鐘式樣
官網:http://weareoutman.github.io/clockpicker/
範例:http://weareoutman.github.io/clockpicker/
下載:https://github.com/weareoutman/clockpicker/archive/gh-pages.zip

moment.js #
一個輕量級的JavaScript庫日期解析、驗證操作,格式化日期的庫。
下載:github.com/moment/moment/

返回目錄 (TOP)
 

TABLE 表格 # #

DataTables (Table plug-in for jQuery)#
功能強大的HTML表格
範例:[JQUERY] webgolds-DATATABLES 套件範例及入門
官網:https://datatables.net/
下載:https://datatables.net/download/index



MySQL Ajax Table Editor​
包裝MySQL表編輯器功能。將數據庫從平面文件結構進行了標準化,能夠輕鬆地編輯連接數據庫中的字段。還有一個類似的叫做 phpMyEdit,不過可能有點混亂。

官網:https://mysqlajaxtableeditor.com/
範例:https://mysqlajaxtableeditor.com/BasicDemo.php
下載:https://mysqlajaxtableeditor.com/GetMateNow.php


返回目錄 (TOP)
 

頁面加載特效-進度條-遮罩 #


PROGRESS BAR.JS
輕鬆地為網絡創建響應式和時尚的進度條。即使在移動設備上,動畫效果也不錯。它提供了一些像Line,Circle 和SemiCircle的內置形狀,但也可以使用任何矢量圖形編輯器創建自定義的形狀進度條。
範例、下載:https://kimmobrunfeldt.github.io/progressbar.js/#webgolds

AOS-Animate On Scroll Library
頁面滾動元素動畫jQuery動畫庫
AOS允許使用者在向下滾動螢幕畫面時動畫元素

範例、下載:https://michalsnik.github.io/aos/#webgolds


LocalStorage 的資源加載器basket.js​ #
一款基於LocalStorage的資源加載器,可以用來緩存script和css,手機端使用速度快於瀏覽器直接緩存。是一個支持localStorage緩存腳本的小型JavaScript庫。如果腳本以前已經在本地保存,則它們將被簡單地加載並註入到當前文檔中。如果沒有,他們將被XHR'd立即使用,緩存以便將來不需要額外的負載。
官網:addyosmani.com/basket.js/

Picturefill(rwd-images.js)
自適應的圖片,選擇性載入大圖。在響應式佈局中提供優化的上下文圖像大小,以不同分辨率利用明顯不同的圖像大小。理想情況下,這可以使開發人員能夠在HTML中開始使用MOBILE 優化的圖像,並指定更大的尺寸用於具有更大屏幕分辨率的用戶 - 無需同時請求圖像大小,也不需要UA嗅探。
Picturefill有三個版本:
版本1模仿元素的圖片元素模式span。它不再被維護。
版本2是一個圖片元素草案規範的輕量級的polyfill 。
版本3.0.3是當前的穩定版本。

要了解如何使用Picturefill,請訪問項目網站(http://scottjehl.github.io/picturefill/#webgolds)。

註:filamentgroup/Responsive-Images 已棄用。


NProgress.js #
一個納米級進度條。經由上方實際的涓流動畫動態告訴你的用戶目前進度到哪邊了。
有時點擊連結後有某些原因造成等待的時間較久,使用者可能覺得沒反應就會重新載入,或是重複點擊,這樣的效果並不好,所以可以加上載入動畫,實作效果可以參考 Youtube 畫面上方的紅色讀取條。
範例、下載:http://ricostacruz.com/nprogress/

HoldOn.js
輕鬆地創建一個不可移動的遮罩(mask)覆蓋頁面,
可以顯示讀取進度,避免使用者操作其他項目。
是一個簡單的插件,允許您繪製覆蓋所有屏幕的div,並且將阻止用戶在背景中執行某些操作時單擊背景上的元素。
官網:https://sdkcarlos.github.io/sites/holdon.html
範例:https://sdkcarlos.github.io/sites/holdon.html#section-demo
下載:https://sdkcarlos.github.io/sites/holdon.html#section-download

ladda
Buttons 按鈕內置有Loading提示,點選按鈕後可以有效地橋接操作和回饋目前狀態
官網:http://lab.hakim.se/ladda/
範例:http://lab.hakim.se/ladda/
下載:https://github.com/hakimel/Ladda

返回目錄 (TOP)
 

圖表插件 # #


Flot #
簡單但功能強大的圖表插件
官網:http://www.flotcharts.org/
下載:http://www.flotcharts.org/downloads/flot-0.8.3.zip

d3.js #
資料視覺化套件,功能強大的可視化組件和數據驅動的方法,以DOM操作。
官網:https://d3js.org/
範例:https://github.com/d3/d3/wiki/Gallery
下載:https://github.com/d3/d3#http://blog.webgolds.com

Sparkline
迷你圖表(提供高雄網頁設計)
官網:http://omnipotent.net/jquery.sparkline/#s-about
範例:http://omnipotent.net/jquery.sparkline/#s-about
下載:http://omnipotent.net/jquery.sparkline/#s-download

Rickshaw
強大的圖表,可用於創建交互式時間序列圖
官網:http://code.shutterstock.com/rickshaw/
範例:http://code.shutterstock.com/rickshaw/examples/
下載:https://github.com/shutterstock/rickshaw


返回目錄 (TOP)
 

Highlighting 程式碼高亮化 # #


Ace(Ajax.org Cloud9 Editor) #
可在textarea 文字框中把程式語言語法突出顯示,例如JS/php/ptyhon等。
程式碼自動縮進和縮出,代碼折疊,可處理巨大的文件(最後版本,400萬行是上限)
官網:https://github.com/ajaxorg/ace/
下載:https://github.com/ajaxorg/ace/

將文字框內特殊文字上色 Highlight Within Textarea #
查看編輯文本區域時即時突出顯示。
範例:http://lonekorean.github.io/highlight-within-textarea/

文字高亮化 highlight: JavaScript text higlighting jQuery plugin
標籤/關鍵字在點擊文字後自動突出顯示相關文字,每個鏈接將突出顯示相應的單詞。
範例:http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html#webgolds


返回目錄 (TOP)
 

線上文字編輯器 #


Ckeditor 4.5.10 #
集成所見即所得的編輯器
官網:http://ckeditor.com/
範例:http://ckeditor.com/demo
下載:http://ckeditor.com/download


Summernote #
bootstrap 3 所見即所得HTML編輯器
官網:http://summernote.org/
範例:http://summernote.org/examples/
下載:http://summernote.org/getting-started/#blog.webgolds.com

返回目錄 (TOP)
 

Form 表單應用套件 # #


Parsley 前端表單驗證
JavaScript表單驗證庫。它可以幫助您在向用戶提交表單提交反饋意見之前,將其發送到您的服務器。它可以節省頻寬和服務器負載,並為使用者節省時間。
範例:http://parsleyjs.org/doc/examples.html#webgolds

rangeslider.js
可用於替換 <input type="range"> 數字範圍區間的套件。
重新計算onresize適合在RWD響應式設計中使用,也支援觸摸螢幕。
範例:http://rangeslider.js.org/

select2 4.0.3 #
jQuery的替代選擇框(select boxes)
官網:https://select2.github.io/
範例:https://select2.github.io/examples.html
下載:https://github.com/select2/select2/archive/4.0.3.zip
引用教學:https://select2.org/getting-started/installation#webgolds

iCheck plugin 1.0.2 #
jQuery的替代複選框和單選按鈕
官網:http://icheck.fronteed.com/
範例:http://icheck.fronteed.com/#demo
下載:https://github.com/fronteed/icheck/archive/1.x.zip

uiSelect #
AngularJS版本的select2
官網:https://github.com/angular-ui/ui-select
範例:http://angular-ui.github.io/ui-select/#examples
https://github.com/angular-ui/ui-select/tree/master/docs/examples
下載:https://github.com/angular-ui/ui-select/archive/master.zip

Cleave.js – 自動格式化表單輸入框的文本內容 #
幫助你自動格式輸入的文本內容。這個想法是提供一個簡單的方法來格式化您的輸入數據以增加輸入字段的可讀性。通過使用這個庫,您不需要編寫任何正則表達式來控制輸入文本的格式。然而台灣金站網頁設計提醒:這並不意味著取代任何驗證或掩碼庫,你仍應在後端驗證數據。它支持信用卡號碼、電話號碼格式(支持各個國家)、日期格式、數字格式、自定義分隔符,前綴和塊模式等,提供CommonJS/AMD模式以及ReactJS組件端口。
範例:nosir.github.io/cleave.js/

Materialize-stepper
表單步進器,一步一步帶領使用者填寫。
範例:https://kinark.github.io/Materialize-stepper/

jQuery Validation #
表單驗證插件
官網:https://jqueryvalidation.org/
範例:https://jqueryvalidation.org/files/demo/
下載:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip

Fort.js–表單填寫進度提示效果 #
表單填寫進度提示效果的JavaScript庫,你需要做的就是添加表單,剩下的任務就交給Fort.js算法了,使用非常簡單。提供了Default、Gradient、Sections以及Flash四種效果,滿足開發的各種場合需要。
範例:idriskhenchil.github.io/default/index.html

自動完成 textcomplete​
在填寫文字框時,自動出現相關文字的提示組
範例:https://github.com/yuku-t/textcomplete

X-editable #
讓網頁上的元素變成可以編輯的區塊 (bootstrap, jquery-ui, jquery only)
官網:https://vitalets.github.io/x-editable/
範例:https://vitalets.github.io/x-editable/demo-bs3.html?c=popup


Bootstrap Colorpicker 2.3.2 #
RGB顏色選擇器
可綁定事件,例如更改背景顏色
官網:http://mjolnic.com/bootstrap-colorpicker/
範例:http://mjolnic.com/bootstrap-colorpicker/
下載:https://github.com/mjolnic/bootstrap-colorpicker/archive/master.zip


返回目錄 (TOP)
 

Notification 訊息通知視窗 #


SweetAlert2 #
美觀的客製化提示框,可以取代瀏覽器本身的alert提示框。
官網:https://limonte.github.io/sweetalert2/
範例:https://limonte.github.io/sweetalert2/
下載:https://www.jsdelivr.com/projects/sweetalert2

layer Web 彈層組件 #
客製化提示框
官網:http://layer.layui.com/

Magnific Popup #
著名老牌子,提供燈箱和對話框
單圖像燈箱、變焦畫廊、彈出視頻或地圖(YouTube視頻/Vimeo視頻/Google地圖)、Ajax的彈出窗口、錯誤處理、內存管理-Popup有一個可擴展的微模板引擎,可重用現有的DOM元素(示例),當您的彈出窗口相同的模式時,該模型特別有用。
瀏覽器支持:
桌機:Chrome,Safari,FF,Opera,IE8 +,部分支持IE7。手機:Android 2.3以上版本的默認瀏覽器,iOS5 +,黑莓10+,WP7 +,Android手機Opera和Chrome。
License:MIT license
官網:http://dimsemenov.com/plugins/magnific-popup/

Popper.js #
Tooltips 提示類JS 插件,不需要依賴jQuery 庫,大小僅為3.5KB 左右,使用與配置相當簡單
功能介紹
  • 自定義提示方向:可隨意設置上下左右顯示,簡單一行代碼,就能設置
  • 滾動容器顯示
  • 支持拖曳移動:拖曳元素時,Tooltips 提示內容會自動粘附於被拖曳的容器。
  • 超出瀏覽器邊界,自動切的方向:有時因內容置於網頁邊緣,導致Tooltips 的提示不能完整顯示,而Popper.js 就解決了這個問題。
範例:https://popper.js.org/

對話框工具提示窗口 #
提供一個閃亮和可訪問的對話框工具提示窗口,使用ARIA
範例:https://a11y.nicolas-hoffmann.net/dialog-tooltip/
下載:https://github.com/nico3333fr/jquery-accessible-hide-show-aria

jQuery Toast 彈出式吐司通知 #
向用戶顯示簡潔可定制的通知框。
#notification #notificationbox #sticky notification #jQuery #toast message #toast
範例:http://kamranahmed.info/toast#quick-demos
下載:https://github.com/kamranahmedse/jquery-toast-plugin/tree/master/dist



Bootstrap Mobile FullScreen Modal Demo Large Demo Modal Small Demo Modal #
一款小型(1kb)jQuery插件,可將長滾動的Bootstrap模式轉換為全屏模式窗口,以改善移動設備上的用戶體驗。
範例:http://www.jqueryscript.net/demo/Mobile-Fullscreen-Bootstrap-Modals-jQuery
下載:http://www.jqueryscript.net/download/Mobile-Fullscreen-Bootstrap-Modals-jQuery.zip

返回目錄 (TOP)
 

樹狀選單-階層 #


多選樹型視圖MultiTreeView #
在TreeView的基礎上,添加了多選功能。
範例:https://regular-ui.github.io/jsmodule/multitreeview.html

jsTree 3.3.1
jquery插件,提供交互式的數狀選單結構。支持拖放、聯合編輯,創建和刪除。
官網:https://www.jstree.com/
範例:https://www.jstree.com/demo/
下載:https://github.com/vakata/jstree/zipball/3.3.1

Nestable
支援滑鼠拖拉和觸控式的多層分類選單列表
官網:https://github.com/dbushell/Nestable
範例:http://dbushell.github.io/Nestable/
下載:https://github.com/dbushell/Nestable/archive/master.zip

返回目錄 (TOP)
 

頁面顯示排版 #

Splitter分隔條插件(resizing-div-panel)
有左右分隔,上下分隔,可以拖動這個分隔條,讓左邊或者右邊的區域放大或縮小。
範例1:http://janfield.ca/github/jquery.enhsplitter/demo.html
範例2:http://demos.telerik.com/kendo-ui/splitter/index

滾動加載infinite-scroll​
infinite-scroll是一款滾動加載,滾動到最下到自動加載的輕量級JavaScript插件,簡單實用,按需加載提高用戶體驗,非常適合移動端使用,配合上面的圖片懶加載如虎添翼。
大小:20 KB
官網:http://www.infinite-scroll.com/
範例:http://www.dazeddigital.com/
下載:https://github.com/infinite-scroll/infinite-scroll

jquery.videoBG​
可將 video 影片視頻添加到網站背景
範例:http://syddev.com/jquery.videoBG/#webgolds
下載:https://github.com/sydlawrence/jquery.videoBG

返回目錄 (TOP)
 

影像處理-圖片剪裁 #

cropper v2.3.2
優秀的線上圖片裁剪功能,圖片剪裁
官網:https://fengyuanchen.github.io/cropper/
範例:https://fengyuanchen.github.io/cropper/
下載:https://github.com/fengyuanchen/cropper/archive/master.zip

imagesLoaded–檢測網頁中的圖片是否完成​加載
官網:imagesloaded.desandro.com/
範例:codepen.io/desandro/full/hlzaw/

Snabbt.js–極簡的JavaScript 動畫庫​
簡約的JavaScript動畫庫。它會平移,旋轉,縮放,傾斜和調整你的元素。通過矩陣乘法運算,變換等可以任何你想要的方式進行組合。最終的結果通過CSS3變換矩陣設置。
官網:daniel-lundin.github.io/snabbt.js

spectrum(Color Picker)
顏色調色盤,挑選顏色的解決方案。
可以在Chrome,Firefox和Safari devtools中運行,為網頁開發人員和設計人員提供更輕鬆的顏色選擇。
範例:https://bgrins.github.io/spectrum/#webgolds


tinycon
允許添加新的icon提供即時改變網站icon
官網:https://github.com/tommoor/tinycon
範例:http://blog.tommoor.com/tinycon/
下載:https://github.com/tommoor/tinycon/archive/master.zip

返回目錄 (TOP)
 

Photo 圖片顯示/燈箱圖庫 #


Owl Carousel 2
建一個美麗的RWD響應旋轉木馬滑塊。
觸摸並拖動支持,專為提高移動瀏覽體驗而設計。
範例:https://owlcarousel2.github.io/OwlCarousel2/#webgolds

Exif.js
用於讀取圖像文件 EXIF 數據的 JavaScript庫。
下載:https://github.com/exif-js/exif-js

Draggable Background
可拖動背景圖像的jQuery插件。
下載:https://github.com/kentor/jquery-draggable-background

Photoswipe + Justified.js mashup
混搭photowipe JavaScript畫廊(支持觸摸輸入)與Justified.js(其中提供圖片的圖像佈局),處理原先的justified.js沒有即時響應,因此另外添加了一個每次瀏覽器窗口的大小改變時,它都會重新計算圖片相冊元素的寬度。
下載:http://peterfabian.github.io/justiswipe_flickr_gallery/

★★★★★ PhotoSwipe
經典的相片、圖片顯示畫廊。JavaScript庫。
  • 加載和顯示圖像:PhotoSwipe創造出更快加載的幻覺。
  • 支持所有基本觸摸手勢:輕拍到下一張或上一張圖像,展開以放大,拖動到平移,捏合縮小或關閉,點擊切換控件,雙擊以進行縮放。
  • 響應圖像支持

範例、下載:http://photoswipe.com/


LightboxGallery
圖片顯示
官網:https://blueimp.github.io/Gallery/
範例:https://blueimp.github.io/Gallery/
下載:https://github.com/blueimp/Gallery/tags
License:MIT license

Yet Another jQuery Responsive Lightbox Plugin - VenoBox
VenoBox是一個響應和移動設備友好的jQuery lightbox插件,用片顯示當前頁面上的任何html元素(如圖像,iframe,視頻等)。支持Youtube和Vimeo視頻、iframe和google 地圖。支持iframe和谷歌地圖。如果覆蓋元素的高度高於窗口,則提供滾動條。
http://www.jqueryscript.net/demo/Yet-Another-jQuery-Responsive-Lightbox-Plugin-VenoBox
License:MIT license

Lightbox for Bootstrap
圖片顯示,使用Bootstraps模態插件來實現一個燈箱庫
官網:https://blueimp.github.io/Gallery/
範例:https://blueimp.github.io/Gallery/、 jsfiddle.net/Laoy2gqr/embedded/js,html,result/
下載:https://ashleydw.github.io/lightbox/

slick–功能強大的一個圖片滑動切換效果庫
基於jQuery 圖片滑動切換效果庫,接口豐富,支持各種動畫和各種樣式的切換滑動,支持RequireJS以及Bower安裝。
範例:kenwheeler.github.io/slick/

jQuery lightgallery​ ★★★★
圖片顯示,可客製化,模塊化,響應式的燈箱圖庫插件。
範例:http://sachinchoolur.github.io/lightGallery/
下載:http://sachinchoolur.github.io/lightGallery/
Open source license:GPLv3




Adaptive Gallery lightbox Plugin For jQuery - easyJqueryGallery
輕量級的 jQuery庫燈箱插件,可以在響應畫廊彈出窗口中顯示全尺寸圖像,並根據當前圖像大小自動縮小和擴展。
範例:http://www.jqueryscript.net/demo/Gallery-lightbox-Plugin-jQuery-easyJqueryGallery/
下載:http://www.jqueryscript.net/download/Gallery-lightbox-Plugin-jQuery-easyJqueryGallery.zip
License: MIT

Tiny Responsive Lightbox Gallery Plugin For jQuery - Viewbox
輕量級的 jQuery庫燈箱插件,在點擊縮略圖時立即在Lightbox中顯示大圖像的大圖。可以通過點擊下一個/上一個導航箭頭在圖像之間。任何響應式環境中都能完美運作。
範例:http://www.jqueryscript.net/demo/Tiny-Responsive-Lightbox-Gallery-Plugin-For-jQuery-Viewbox/
下載:http://github.com/pgooood/viewbox/archive/master.zip
License: MIT


Automatic Image Montage with jQuery​
自動創建一個蒙太奇,可用於liquid container容器或固定大小的容器(包括全螢幕),並可選擇填補所有空白。
範例:http://tympanus.net/Development/AutomaticImageMontage/
下載:http://tympanus.net/Development/AutomaticImageMontage/AutomaticImageMontage.zip


fancyBox
圖片顯示,用於顯示圖像,視頻等的jQuery lightbox JavaScript。觸摸啟用,響應和完全可定制。(授權方式MIT and GPL licenses)
官網:http://fancybox.net/
範例:http://fancybox.net/
下載:http://fancybox.net/

fancyBox3
圖片顯示,用於顯示圖像,視頻等的jQuery lightbox JavaScript。觸摸啟用,響應和完全可定制。(授權方式GPLv3 license)
官網:http://fancyapps.com/fancybox/3/


可拖動的圖片展示 Draggable Image Boxes Grid
帶有全螢幕網格的圖像和內容區域的樣板。一旦點擊縮略圖將展開為全尺寸圖像,選項框將展開為全屏內容區域。
範例:http://tympanus.net/Tutorials/DraggableImageBoxesGrid/
下載:http://tympanus.net/Tutorials/DraggableImageBoxesGrid/DraggableImageBoxesGrid.zip
 

MAP 地圖應用 #


gmaps.js
允許以簡單的方式使用 Google 地圖。
範例:https://hpneo.github.io/gmaps/

Multi-level Photo Map​
結合GOOGEL MAP地圖與圖片顯示
基於多層次地圖的圖像庫可以顯示與其位置相關的圖像。第一個級別表示每個圖像具有一組圖像的位置的位置,第二級別顯示每個單個圖像及其位置。使用Google地圖在左側顯示位置,而右側位置的顯示圖像。圖像可以在中等大小的模式或完全類似燈箱的模式下查看。

範例、下載:https://tympanus.net/codrops/2011/09/27/multi-level-photo-map/


返回目錄 (TOP)
 

延遲加載 #

Echo.js–圖片延遲加載插件
獨立的延遲加載圖片的JavaScript插件。Echo.js不依賴第三方庫,壓縮後不到1KB大小。延遲加載是提高網頁首屏顯示速度的一種很有效的方法,當圖片元素進入窗口可視區域的時候,它就會改變圖像的src屬性,從服務端加載所需的圖片,這也是一個異步的過程。
範例:github.com/toddmotto/echo


返回目錄 (TOP)
 

Tab 選項頁籤 #


Tab選項卡​
官網:http://www.layui.com/doc/element/tab.html#default

返回目錄 (TOP)
 

Upload 檔案上傳 #


DropzoneJS
提供拖放文件、圖像上傳以及預覽功能
官網:http://www.dropzonejs.com/
範例:http://www.dropzonejs.com/
http://www.startutorial.com/articles/view/how-to-build-a-file-upload-form-using-dropzonejs-and-php
http://www.php.net/manual/en/features.file-upload.post-method.php#example-354
下載:https://raw.github.com/enyo/dropzone/master/dist/dropzone.js

Plupload: Multi-runtime File-Uploader 2.1.9
強大的文件、圖像上傳功能,支援超大檔案上傳
實際應用:[JQUERY] PLUPLOAD 原生手冊 - 多檔上傳
官網:http://www.plupload.com/
範例:http://www.plupload.com/examples/
下載:http://www.plupload.com/download?f=http://blog.webgolds.com



返回目錄 (TOP)

Drag & Drop 拖拉功能 #


uiSortable
拖拉排序
官網:https://github.com/angular-ui/ui-sortable
範例:http://codepen.io/thgreasi/pen/KtsFH
下載:https://github.com/angular-ui/ui-sortable/archive/master.zip


jQuery UI Touch Punch
支援手機板觸控拖移功能
官網:http://touchpunch.furf.com/
範例:http://touchpunch.furf.com/
下載:https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js

輕鬆實現拖放功能-Draggabilly(Drag & Drop)​ #
Draggabilly是一個很小的JavaScript庫,專注於拖放功能。只需要簡單的設置參數就可以在你的網站用添加拖放功能。兼容IE8+瀏覽器,支持多點觸摸。可以靈活綁定事件,支持RequireJS以及Bower安裝。
官網:draggabilly.desandro.com/?f=http://blog.webgolds.com


返回目錄 (TOP)

Excel 存取插件 #


PHPExcel
可以讀寫、存取匯入匯出Excel檔案。
官網:https://phpexcel.codeplex.com/
範例:http://codeplex.codeplex.com/documentation
下載:https://phpexcel.codeplex.com/releases/view/119187


返回目錄 (TOP)
 

QR-code #


jQuery.qrcode
線上產生qrcode
官網:https://larsjung.de/jquery-qrcode/
範例:https://larsjung.de/jquery-qrcode/latest/demo/
下載:https://release.larsjung.de/jquery-qrcode/jquery-qrcode-0.14.0.zip

jquery.qrcode.js​
線上產生qrcode
官網:http://jeromeetienne.github.io/jquery-qrcode/
範例:http://jeromeetienne.github.io/jquery-qrcode/examples/basic.html
下載:https://github.com/jeromeetienne/jquery-qrcode/archive/master.zip


返回目錄 (TOP)
 

鍵盤滑鼠 #


jwerty
允許你綁定,觸發和組合字符串,使用鍵盤上的組合鍵觸發事件。
範例:https://www.keithcirkel.co.uk/jwerty/#webgolds


返回目錄 (TOP)


 

回上一頁

相關文章:

喜歡這篇文章嗎?立即分享

Posted : / Views: 10243
Last updated :2018-01-16