JQuery和javascript优秀插件收集

Posted 2020-08-20 zhangmin1314

JQuery插件库: http://plugins.jquery.com/

有趣的时钟: http://ynif.v099.10000net.cn/demo/shijian/3/shijian/index.html

别人收集信息
8个实用的页面布局和用户界面jQuery插件http://blog.ui90.com/eight-practical-jquery-plugin-page-layout-and-user-interface.html
15款最好的 jQuery 网格布局插件（Grid Plugins） http://www.cnblogs.com/lhb25/p/15-jquery-grid-plugins.html
2013年优秀jQuery插件 http://www.cnblogs.com/feng524822/p/3319534.html
2014年50个程序员最适用的免费JQuery插件 http://www.oschina.net/news/53614/useful-jquery-libraries
为开发者准备的 10 个新鲜的框架 http://www.oschina.net/translate/10-fresh-frameworks-for-developers

 

全套UI:
全球jQuery的UI框架集锦，有国产DWZ框架入选 http://www.4wei.cn/archives/1001093
收集源于http://www.iteye.com/problems/85278
JQuery:
JQuery UI http://jqueryui.com/demos/
jquery-ui-bootstrap http://www.bootcss.com/p/jquery-ui-bootstrap/#overlay
DWZ富客户端框架 http://j-ui.com/
Easy UI http://www.jeasyui.com/demo/main/index.php 半开源
quickui http://www.quickui.net/v3/pages/sample.html 免费和收费两个版本
jqwidgets http://www.jqwidgets.com/jquery-widgets-demo/ 收费
LigerUI http://ligerui.com/, 更新很慢, 网上说问题很多,谨慎使用
JQuery Tools : http://jquerytools.org/demos/
kendo http://demos.kendoui.com/ 免费版本不提供后台组件等, TreeGrid的实现http://mleibman.github.io/SlickGrid/examples/example5-collapsing.html,group实现 http://www.telerik.com/forums/how-to-set-grid-grouping-programatically
w2ui http://w2ui.com/web/demo，grid无分页。
mini ui http://www.miniui.com/docs/api/index.html
OperaMasksUI一个完整的UI 官网https://code.google.com/p/operamasks-ui/ Demo http://ui.operamasks.org/website/demos.html
对话框 http://aui.github.io/artDialog
淘宝前段框架Kissy： http://docs.kissyui.com/1.4/docs/html/demo/index.html
前端开发框架选型清单 http://www.infoq.com/cn/news/2014/05/web-ui-framework?utm_source=infoq&utm_medium=popular_links_homepage

前端框架：样式主题
Foundation - 我最喜欢的前端框架 http://foundation.zurb.com/index.html
Bootstrap - 最流行的 http://getbootstrap.com/
Pure - 从未用过，但是看起来很酷 http://purecss.io/
Polymer – Google Material Design全平台实现的一部分，很酷的交互细节 （ 这行是Easy加的，GFWED http://www.polymer-project.org/
20 个免费的 Bootstrap 模板 http://www.oschina.net/news/53505/20-free-bootstrap-templates
Flat UI Flat UI http://www.bootcss.com/p/flat-ui/
分享22个最新的HTML & CSS3 UI开发工具
http://www.iteye.com/topic/1135071
2014年8月 10 个全新的 Bootstrap 3 管理模板 http://www.oschina.net/news/54800/10-new-bootstrap-3-admin-templates-august-2014
为应用程序设计的 10 个超酷的图标集 http://www.oschina.net/news/54982/10-cool-icon-sets-for-app-design

 

 

拖放布局:
jQuery拖拽布局插件Portal http://www.jq22.com/jquery-info364, 一些说明在http://www.jqcool.net/jquery-portalyi.html，IE9以下的就不要用了，看不到效果。
jQuery Protlets: http://sonspring.com/journal/jquery-portlets，详解:http://a151555.iteye.com/blog/1853184
可拖放的布局插件 gridster.js http://gridster.net/
gridster.js 这是神话般的拖动和拖放多列网格已经到来。Gridster是一个jQuery插件，允许建立直观的拖动的布局元素跨越多个列。http://gridster.net/， Internet Explorer 9+, Firefox, Chrome, Safari and Opera.
shapeshift http://mcpants.github.io/jquery.shapeshift/
jQuery拖放插件集合 http://www.jb51.net/article/30069.htm
UI Layout http://layout.jquery-dev.net/demos.cfm
freetile.js Freetile是一个jQuery的插件，使该组织的网页内容在一个高效，动态和响应布局。http://yconst.com/web/freetile/
有用的jQuery布局插件推荐 http://www.zhangjiaojiao.cn/jquery/184.html
采用jquery ui的sorttable拖动排序插件实现拖动效果 http://www.helloweba.com/view-blog-72.html

静态布局
jLayout不错的布局 http://www.bramstein.com/projects/jlayout/jquery-plugin.html
网格布局 Mason.js http://masonjs.com/
6款强大的创建和加强网站布局的jQuery插件http://developer.51cto.com/art/201106/266708.htm
8个实用的页面布局和用户界面jQuery插件http://blog.ui90.com/eight-practical-jquery-plugin-page-layout-and-user-interface.html

 

 

图表
jQuery Visualize Plugin http://www.filamentgroup.com/examples/charting_v2/index_2.php,浏览器支持：IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9.
HTML5 canvas在IE中不支持但是Google维护了一个类库能将Canvas翻译成VML，这样可以允许在任意版本IE中运行
jQuery Sparklines 动态图表 http://omnipotent.net/jquery.sparkline/#s-about
javascript图表Highcharts http://www.highcharts.com/, 中文网http://www.hcharts.cn/, 演示 http://www.hcharts.cn/demo/index.php
在线进度条：http://preloaders.net/
用于构建交互式图表的最佳 jQuery 图表库 http://www.oschina.net/translate/best-jquery-chart-libraries-for-building-interactive-charts
5个最顶级jQuery图表类库插件 http://www.gbtags.com/technology/jquery/jquerytop5charting/
10 个 jQuery 图表插件推荐 http://blog.jobbole.com/21136/
jsPlumb jQuery插件 jsPlumb这个jQuery插件为开发者提供了一种可视化连接网页元素的方法 http://jsplumbtoolkit.com/demo/home/dom.html，
jsPlumb开发入门教程（实现html5拖拽连线）http://blog.csdn.net/zhaoxy_thu/article/details/9532143
Jquery+jsPlumb流程图实现 http://hi.baidu.com/dlbup/item/125f24c982e61878ced4f802,
使用jsPlumb制作流程图设计器http://www.cnblogs.com/lwme/p/use-jsplumb-make-flowChart-designer.html，
使用 JsPlumb 绘制拓扑图的通用方法 http://blog.csdn.net/lovesqcc/article/details/14003987
NVD3.js http://www.oschina.net/p/nvd3js 是一个基于D3.js的开源图表JavasScript 类库，它可生成具有交互性的图表，定制性也非常高。它可用于绘制线性图、柱状图、饼图等多种常见的图表类型。它的使用方法也非常简单，如果你正好用过 D3.js，上手是相当容易的。
Echarts动态加载图表数据 http://www.iteye.com/topic/1134808

 

非JQuery UI:
1. dojo http://dojotoolkit.org/demos
2. openlaszlo http://www.openlaszlo.org/showcase
3. qooxdoo http://qooxdoo.org/demo
4. ZK http://www.zkoss.org/demo/
5. Bootstrap http://www.bootcss.com/
其他: 没查看过,不知道情况怎么样
Fbootstrapp,BootMetro, Kickstrap, Foundation, GroundworkCSS, Gumby, HTML , ickStart, IVORY, Kube

 

Grid表格:
18个最好的 jQuery 表格插件 http://www.oschina.net/news/16973/18-best-jquery-data-table-plugin
jQuery treetable http://plugins.jquery.com/treetable/, demo: http://ludo.cubicphuse.nl/jquery-treetable/
jqGrid http://www.trirand.com/blog/jqgrid/jqgrid.html
jQuery Grid Plugin http://paramquery.com/demos
columnHover http://p.sohei.org/jquery-plugins/columnhover/jQuery插件，可以当鼠标悬停时，可以高亮表格中的整个列。
Sigma Grid(纯javascript开发的Ajax数据表格，超级强大) http://www.cnblogs.com/ly5201314/archive/2009/07/21/1528009.html
datatables http://datatables.net/examples/index

 

对Grid的独立排序工具
table sorter ，此插件可以将带有THEAD和TBODY标签的标准HTML表转化成可排序表，而无需刷新页面。Table sorter可以成功地解析多种类型的数据并进行排序。
源码http://tablesorter.com/docs//演示 http://tablesorter.com/docs/#Demo
jQuery Table，这是一个操作简单的jQuery插件，可帮助你将数据创建成可排序的表格。
源码http://codecanyon.net/item/jquery-table/2392027?ref=lvraa/演示http://codecanyon.net/item/jquery-table/full_screen_preview/2392027?ref=lvraa
Beautiful Data，这是个了不起的方法，可以为枯燥的HTML表增加分页和排序功能。此插件也可以用于指定了源文件的CSV和JSON数据。
源码http://codecanyon.net/item/beautiful-data/132137?ref=lvraa/演示http://codecanyon.net/item/beautiful-data/full_screen_preview/132137?ref=lvraa
jQuery columnManager 插件，此插件可以切换表中纵列内容的可见性（折叠和展开它们），并且保存数据直到下次访问。
源码http://p.sohei.org/jquery-plugins/columnmanager//演示http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html

Excel表格
Handsontable 类似excel: http://handsontable.com/
7个跟excel相关的插件：7+ JQUERY MICROSOFT EXCEL TYPE PLUGINS
http://www.jquery4u.com/plugins/7-jquery-microsoft-excel-type-plugins/
dhtmlxSpreadsheet http://www.dhtmlx.com/docs/products/dhtmlxSpreadsheet/
jQuery.sheet http://www.visop-dev.com/Project+jQuery.sheet
Table Generator http://www.tablesgenerator.com/

 

菜单导航：
15 Fresh jQuery Menu Plugins and Tutorials http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/
jquery-simple-context-menu右键菜单 http://joewalnes.github.io/jquery-simple-context-menu/example.html
jQuery contextMenu 右键菜单 http://medialize.github.io/jQuery-contextMenu/demo.html，下载地址:https://github.com/medialize/jQuery-contextMenu
ddsmoothmenu无限级菜单 http://www.iteye.com/topic/1132911
具备八种不同方式滑出的菜单栏特效http://www.dglives.com/demo/slide-push-menus-source/
jQuery导航插件 One-Page-Nav http://www.oschina.net/p/one-page-nav
各种下拉菜单 ，多级下拉菜单，向上展开菜单 左侧展开菜单 http://freejs.iteye.com/blog/2112430

 

 

上传下载：
Plupload，很不错的上传插件 http://www.plupload.com/example_queuewidget.php
它的中文例子说明:http://www.aixueit.com/thread-304-1-1.html,如果想覆盖事件和得到返回值，就使用它的pluploadQueue()方法。注意：这个插件的文件在jsp上引入是有顺序的，否则问题出在哪里，都很难发现的。http://www.16kan.com/question/detail/134602.html
jQuery File Upload： http://blueimp.github.io/jQuery-File-Upload/
jquery.fileDownload.js Library 下载插件http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/，Demo: http://jqueryfiledownload.apphb.com/

 

提示
菜单的冒泡效果:BubbleUp jQuery Plugin to Spice Up Your Menu http://bloggingexperiment.com/bubbleup-jquery-plugin
十个提示插件： http://medleyweb.com/web-dev/10-great-jquery-notification-plugins/
qTip 一个提示工具: http://craigsworks.com/projects/qtip/docs/,在对话框的使用 http://jsfiddle.net/EuJNf/4/
Toastr 一个模仿android的提示工具 http://codeseven.github.io/toastr/demo.html,官网：http://codeseven.github.io/toastr/
Pines Notify http://pinesframework.org/pnotify/
Noty http://needim.github.com/noty/
jNotify http://www.myjqueryplugins.com/jNotify 支持ie7以上
Notify http://redeyeoperations.com/plugins/Notify/
Notify! http://www.greepit.com/notify/
Sticky http://thrivingkings.com/read/Sticky-A-super-simple-notification-system-built-with-jQuery
MiniJS Notification[包含许多功能] http://minijs.com/plugins/8/notification
jQuery Toast Message http://akquinet.github.com/jquery-toastmessage-plugin/
Gritter for jQuery http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/
jQuery Notification Plugin http://www.9lessons.info/2011/10/jquery-notification-plugin.html
jQuery.toast – toast notifications http://plugins.jquery.com/toast/
--->Demo: http://htmlpreview.github.io/?https://github.com/Soldier-B/jquery.toast/blob/master/example/jquery.toast.html

 

几个格式化输入
http://digitalbush.com/projects/masked-input-plugin/
http://plentz.github.io/jquery-maskmoney/
密码输入: http://antelle.github.io/passfield/
jQuery Fileinput Plugin文件输入框: http://jsfiddle.net/hleinone/UF4nr/
jQuery File Upload文件输入框 http://blueimp.github.io/jQuery-File-Upload/
SCEditor编辑器 http://www.sceditor.com/
jQuery Autosize 文本框自动高宽度 http://www.jacklmoore.com/autosize/
jQuery Super Labels另类输入提示 http://remy.bach.me.uk/superlabels_demo/
jWizard输入提示 http://www.dbarnes.info/jWizard/#Demonstration

 

选择器
Javascript image dropdown 3.5.2 一个不错的下拉框 http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html
是个不错的下拉框：http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
chosen 类似下拉框多选插件 http://harvesthq.github.io/chosen/,使用方法和ie6问题：http://www.cnblogs.com/pshay/archive/2012/12/13/2813877.html
select2 http://ivaynberg.github.io/select2/
Selectize.js下拉多选 http://brianreavis.github.io/selectize.js/
4 个多才多艺的 jQuery 下拉菜单插件 http://panyongzheng.iteye.com/blog/1909865
Brute Select格式化下拉框 http://grassator.github.io/jquery-brute-select/
jquery.chained.js 连级数据 http://www.appelsiini.net/projects/chained/demo.html
multiselect两边多选框 http://loudev.com/
TextExt很好的下拉选择器：http://textextjs.com/
DropKick.js一个自定义的下拉框 http://www.gbtags.com/gb/demoviewer/1801/e347550f-b4c7-48e6-837e-fbebe4505ce7/DropKick-master%7Cexample%7Cexamples.html.htm
dropdown-check-list 有checkbox的下拉框 https://code.google.com/p/dropdown-check-list/
自定义checkbox和radio的样式 可以换肤 http://freejs.iteye.com/blog/2082027

 

日期日历时间
一些日期控件收集: http://www.itokit.com/2012/0822/74694.html
datepicker 97 http://www.my97.net/dp/demo/resource/2.1.asp
jQuery Date Input多语言日期 http://www.jonathanleighton.com/projects/date-input/
jQuery Calendar 一个不错的日历 http://opensource.teamdf.com/calendar/examples/week.html，文档:http://opensource.teamdf.com/calendar/docs/
Ion.Calendar 2.0.0日期: http://ionden.com/a/plugins/ion.calendar/en.html
pickadate.js 日期时间 http://amsul.ca/pickadate.js/
continuous-calendar日历 http://reaktor.github.io/jquery-continuous-calendar/
jquery-simple-datetimepicker 日期时间: http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.html
zebra-datepicker日期 http://stefangabos.ro/jquery/zebra-datepicker/
jQuery UI Datepicker插件timepicker时分秒 http://free0007.iteye.com/blog/2080588

 

画廊
Rondell画廊 http://projects.sebastianhelzle.net/jquery.rondell/
jcarousel画廊 http://sorgalla.com/jcarousel/
fotorama画廊 http://fotorama.io/
jquery图片幻灯片,Jquery特效 http://www.iteye.com/topic/1132110
30个精美的jQuery幻灯片效果插件和教程 http://www.cnblogs.com/lhb25/archive/2011/08/18/stunning-jquery-slider-plugins-and-tutorials.html
10个精选 jQuery 幻灯片插件 http://www.siqiboke.com/post/492.html
SLF一个很不错的画廊http://darsa.in/sly/#!examples
满屏画廊：http://buildinternet.com/project/supersized/

幻灯片
jquery图片滚动特效banner http://www.17sucai.com/pins/demoshow/349
自动播放 http://bxslider.com/examples

在线编辑器:
KindEditor http://www.kindsoft.net/index.php
10 个免费的 jQuery 可视化编辑器插件 http://www.oschina.net/news/18329/10-free-jquery-rich-text-editors

滚动条
Scroller滚动条 http://www.benplum.com/formstone/scroller/
Perfect Scrollbar – 完美的 jQuery 滚动条插件 http://noraesae.github.io/perfect-scrollbar/
jScrollPane 滚动条插件 http://jscrollpane.kelvinluck.com/index.html#examples
jScroller2 滚动动画 http://jscroller2.markusbordihn.de/

杂项
equalize.js 均衡的高度或宽度的元素的jQuery插件 http://tsvensen.github.io/equalize.js/
jQuery的滚动路径,一个插件定义自定义的滚动路径。这使用画布味的语法来绘制直线和圆弧。http://joelb.me/scrollpath/
jQuery Knob 旋转输入 [url]http://effinroot.eiremedia.netdna-
cdn.com/repo/plugins/forms-controls/jquery-knob/index.html[/url]
textrange文本选择 http://dwieeb.github.io/jquery-textrange/
Fancyform表单皮肤 http://lutrasoft.nl/jQuery/fancyform/
jQuery.dForm js表单控件 http://jsfiddle.net/Zt4Rz/
jQuery Custom Forms 表单皮肤: http://vebersol.net/demos/jquery-custom-forms/
jQuery++加强插件 http://jquerypp.com/
放大缩小 http://jaukia.github.io/zoomooz/
jsTree 树插件 http://jstree.com/demo
zTree: http://www.ztree.me/v3/demo.php
equalize.js 自动适应宽度高度 http://tsvensen.github.io/equalize.js/
控件墙 http://jquery-jkit.com/
Kwicks for jQuery 别致的手风琴效果 http://devsmash.com/projects/kwicks
miniTip jQuery Plugin 提示插件http://goldfirestudios.com/blog/81/miniTip-jQuery-Plugin
Smallipop 提示插件 http://projects.sebastianhelzle.net/jquery.smallipop
jQuery Fullscreen 最大化插件 https://github.com/private-face/jquery.fullscreen
dragend JS横向拖动翻页 http://stereobit.github.io/dragend/
jQuery.bPopup.js弹出框 http://dinbror.dk/bpopup/
jquery按条件筛选产品效果 类似京东选择：http://www.97zzw.com/plus/demonstrate.php?aid=1197
http://www.97zzw.com/jscode/other/1197.html
xml2json-xslt xml跟json转换插件 https://code.google.com/p/xml2json-xslt/
Tab 10款实用的 jQuery Tab 切换插件和教程 http://www.cnblogs.com/lhb25/archive/2012/11/26/10-useful-jquery-tab-plugins.html
Base64编码插件:http://plugins.jquery.com/base64/
jQuery MD5 加密插件及使用方法 http://www.veryhuo.com/a/view/14299.html
jquery生成pdf插件jsPDF http://www.iteye.com/topic/1134811
jQuery 插件 shCircleLoader载入插件 http://www.oschina.net/p/shcircleloader
jQuery货币格式化: http://www.jq22.com/jquery-info326, 例子: http://www.jq22.com/Demo326
时间格式化插件jquery-dateFormat http://ajia.github.io/blog/2013/06/07/shi-jian-ge-shi-hua-cha-jian-jquery-dateformat/
Midnight.js 可以让你随时切换固定的页面头部 http://www.oschina.net/p/midnight-js
colorpicke颜色选择器 http://demo.jb51.net/js/2012/ColorPicker/,如果要选择高版本的jquery,要修改源码$("#colorpanel")的z-index=1000000,$("#_cclose").live(\'click\'...)成$("#_cclose").on(\'click\'...)
jQuery 复选框和单选框插件 checkBo http://www.oschina.net/p/checkbo
网站使用教程框架 Intro.js http://www.oschina.net/p/intro-js
jQuery Autosize 根据输入内容自动调整文本框高度的Jquery插件 http://www.oschina.net/p/jquery-autosize

 

转载自：http://www.cnblogs.com/lhb25/default.html