Skip to content

jQuery常用插件整理

qloog edited this page Dec 25, 2015 · 29 revisions

常用插件

日期插件

github: https://github.com/eternicode/bootstrap-datepicker
demo: http://eternicode.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox

下拉选择插件

github: https://github.com/harvesthq/chosen
demo: http://harvesthq.github.io/chosen/

步骤插件

github: https://github.com/rstaib/jquery-steps
demo: http://www.jquery-steps.com/Examples

富文本编辑器

github: https://github.com/mycolorway/simditor
demo: http://simditor.tower.im/

图片裁剪

demo: http://www.fullavatareditor.com/demo.html

表格插件jqGrid

blog: http://www.trirand.com/blog/?page_id=5
demo: http://www.guriddo.net/demo/bootstrap/
more: http://www.guriddo.net/demo/demos/jqgrid/
PS:还有一个是datatable

css动画

demo: http://daneden.github.io/animate.css/

单页导航

demo: http://github.com/davist11/jQuery-One-Page-Nav

ajax上传插件

github: https://github.com/blueimp/jQuery-File-Upload
demo: http://blueimp.github.io/jQuery-File-Upload/
配置项说明:https://github.com/blueimp/jQuery-File-Upload/wiki/Options
最小化配置说明:https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
PS: wiki很强大,但依赖的js较多(jquery.fileupload-*.js, 有5个+)

ajaxFileUpload(不好使,存在bug)

github: https://github.com/davgothic/AjaxFileUpload
使用说明:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html
PS: 只需要引入一个js文件即可。

Web Uploader

github: https://github.com/fex-team/webuploader/
官网:http://fex.baidu.com/webuploader/
PS: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。 采用大文件分片并发上传,极大的提高了文件上传效率。

select2

github: https://github.com/select2/select2
官网: https://select2.github.io/
PS: Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

zoomooz

demo: http://jaukia.github.io/zoomooz/
PS: 主要是做一些酷炫的动画效果。

fancybox

demo: http://fancyapps.com/fancybox/
PS: 弹层展示图片,支持左右点击切换、底部缩略图、顶部按钮、视频、地图等

jQuery Zoom

demo: http://www.jacklmoore.com/zoom/
PS: A plugin to enlarge images on touch, click, or mouseover.

jquery.imagezoom.js

demo: http://www.ijquery.cn/?p=489 PS: 鼠标悬停图片放大镜特效

ZOOM - jQuery photo gallery plugin

demo: http://www.xwcms.net/webAnnexImages/fileAnnex/20140406/55886/index.html
PS: jQuery制作zoom图片全屏放大弹出层插件。

表格插件:Bootstrap Table

github: https://github.com/wenzhixin/bootstrap-table-examples
demo: http://issues.wenzhixin.net.cn/bootstrap-table/
官网:http://bootstrap-table.wenzhixin.net.cn/

经典的网页对话框组件

github: https://github.com/aui/artDialog
demo: http://aui.github.io/artDialog/

表单校验插件 validate

github: https://github.com/jzaefferer/jquery-validation
文档: http://jqueryvalidation.org/validate
demo:http://jqueryvalidation.org/files/demo/
PS:
jquery.validate.min.js 主文件
additional-methods.min.js 额外添加的一些验证方法

Form 插件

官网: http://jquery.malsup.com/form/
使用案例: http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html

notifications 库 toastr

Github: https://github.com/CodeSeven/toastr
DEMO: http://codeseven.github.io/toastr/demo.html

Layer 一个可以让你想到即可做到的javascript弹窗(层)解决方案

官网:http://layer.layui.com/

React插件

react-bootstrap (基于 react 0.14.x)

Github: https://github.com/react-bootstrap/react-bootstrap
demo: http://react-bootstrap.github.io/

react-bootstrap-table

Github: https://github.com/AllenFang/react-bootstrap-table
DEMO: http://allenfang.github.io/react-bootstrap-table/example.html

fixed-data-table

Github: https://github.com/facebook/fixed-data-table
DEMO: http://facebook.github.io/fixed-data-table/