50多个强大的jQuery插件应用实例.
jQuery：收集一些基于jQuery框架开发的控件（jquery插件）
jQuery：收集一些基于jQuery框架开发的控件（jquery插件）jQuery：收集一些基于jQuery框架开发的控件/jquery插件Coda Popup Bubbles采用jQuery开发，类似“冒泡”效果的提醒弹出框。
主页:/doc/f98298580.html,/coda-popup-bubbles/下载:/doc/f98298580.html,/coda-popup-bubbles/ （没找到）示例:/doc/f98298580.html,/demo/coda-bubble.htmlSimple Effects PluginsjQuery特效插件，可以实现收缩，隐藏，显示，淡入/淡出和上下滑动效果等．主页:/doc/f98298580.html,/2008/02/simple-effects-plugins下载:/doc/f98298580.html,/2008/02/simple-effects-plugins （没找到）示例:/doc/f98298580.html,/2008/02/simple-effects-pluginsmcDropdown jQuery Plug-inmcDropdown是一个独特的UI控件，它能够让用户在一个复杂分级的树形下拉选项中进行选择。
主页:/doc/f98298580.html,/labs/mcdropdown_jqu ery_plugin.htm下载:/doc/f98298580.html,/labs/downloads/jquer y.mcdropdown.zip示例:/doc/f98298580.html,/labs/mcdropdown_jqu ery_pluginjQuery.Hotkeys plugin这个jQuery插件能够帮助你快速创建键盘触发事件。
支持任意组合键。
主页:/doc/f98298580.html,/p/js-hotkeys/ 下载:/doc/f98298580.html,/files/jshotkeys-0.7.8.zip示例:/doc/f98298580.html,/test-static-01.htmljGrowljGrowl用于制作消息弹出框的jQuery插件。
jQuery插件汇总(待添加)
本文由我司收集整编，推荐下载，如有疑问，请与我司联系jQuery 插件汇总（待添加）2013/10/08 0 jQuery 插件jQuery Spin Button 自定义文本框数自增或自减jQuery 插件JQuery Pager 分页器实现javascript 分页功能jQuery 插件FontSizer 实现Javascript 自定义动态调整网页文字大小jQuery 插件Magnify 放大镜实现javascript 图片放大功能jQuery 插件tooltip 提示条实现Javascript 动态文字或图片提示效果jQuery 插件Step Carousel Viewer 实现Javascript 图片滑动旋转效果jQuery 插件accordion 折叠菜单实现Javascript 展开收缩菜单功能jQuery 插件ImageFlyout 弹出图片实现javascript 放大图片功能jQuery 插件SmoothNavigationalMenu 导航菜单实现Javascript 下拉多级菜单功能jQuery 插件PiroBox 弹出图片盒实现Javascript 新窗口全屏图片展示功能jQuery 插件CalendarWidget 日历工具实现Javascript 简单日历功能jQuery 插件Datepicker 日期选择器实现Javascript 自定义日期时间选择功能jQuery 插件TableSearch 表搜索实现Javascript 搜索表内容功能jQuery 插件floatbox 浮动层实现javascript 弹出浮动窗口功能jQuery 插件timers 定时器实现javascrip 定时或按钮控制功能jQuery 插件absolutizePrototypePort 实现Javascript 绝对定位jQuery 插件$.event.special.drag 拖动实现javascript 随意定制拖动功能jQuery 插件smartFocus 实现javascript 文本框blur 焦点显示或隐藏默认效果jQuery 插件AjaxFileUpload 文件上传实现Javascript 多文件上传功能jQuery 插件AjaxManager 实现Javascript 自定义ajax 请求和响应时间功能jQuery 插件AjaxQueue 队列实现Javascript 队列或同步请求功能jQuery 插件ajaxContent 实现javascript 通过ajax 获取任意内容jQuery 插件Add2Cart 添加到购物车实现javascript 动态提示添加到购物车效果jQuery 插件animateToClass 实现javascript 自定义动画效果jQuery 插件Lightweight Rich Text Editor 轻量级编辑器jQuery 插件Adjacent 实现动态获取相邻元素增加自定义效果jQuery 插件ColorBox 彩盒实现javascript 自定义灯箱效果jQuery 插件James 实现javascript 自动完成提示功能jQuery 插件Validate 验证表单实现javascript 表单验证功能jQuery 插件Validation 验证表单实现javascript 表单智能验证功能jQuery 插件QuickPaginate 快速分页实现javascript 分页功能jQuery 插。
jQuery内容折叠效果插件用法实例分析(附demo源码)_
jQuery内容折叠效果插件用法实例分析(附demo源码)_这篇文章主要介绍了jQuery内容折叠效果插件用法,结合实例形式分析了jQuery绽开折叠插件jquery.coolfieldset.js的具体用法技巧,并附带demo源码供读者下载参考,需要的伴侣可以参考下本文实例讲解并描述了jQuery内容折叠效果插件用法。
分享给大家供大家参考，具体如下：!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "l4/strict.dtd"htmlheadtitlejQuery Collapsible Fieldset/titlescript src="js/jquery.min.js"/scriptscript language="javascript" type="text/javascript"src="js/jquery.coolfieldset.js"/scriptlink rel="stylesheet" type="text/css" href="css/jquery.coolfieldset.css" //headbodyh1jQuery Collapsible Fieldset/h1fieldset id="fieldset1" class="coolfieldset"legendDefault/legenddivpBy default the bfieldset/b is opened or expanded at start. Click on its blegend/b to close or collapse it./ppThe code is simply like below/ppre$('#fieldset1').coolfieldset();/pre/div/fieldsetbr/fieldset id="fieldset2" class="coolfieldset"legendClosed at start/legenddivpIf we want the fieldset to be closed or collapsed at start, just add b{collapsed:true}/b as the argument./ppre$('#fieldset2').coolfieldset({collapsed:true});/div/fieldsetbr/fieldset id="fieldset4" class="coolfieldset"legendAnimation Speed/legenddivpYou can also define the animation speed for the fieldset while collapsing or expanding by using bspeed/b option. Acceptable values are "bfast/b", "bmedium/b", "bslow/b", or a number in millisecond./p pre$('#fieldset3').coolfieldset({speed:"fast"});/pre/div/fieldsetbr/fieldset id="fieldset5" class="coolfieldset"legendNo Animation/legenddivpIf you don't want to use animation effect, please use banimation/b option and fill its value withbfalse/b./ppre$('#fieldset4').coolfieldset({animation:false}); /pre/div/fieldsetbr/br/fieldset id="fieldset3" class="coolfieldset"legendNotes :/legenddivulliAll content inside fieldset (except the blegend/b tag) should be placed inside the bdiv/b tag./liliEdit the bjquery.coolfieldset.css/b to change the fieldset style./li/ul/div/fieldsetscript$('#fieldset1, #fieldset3').coolfieldset();$('#fieldset2').coolfieldset({collapsed:true});$('#fieldset4').coolfieldset({speed:"fast"});$('#fieldset5').coolfieldset({animation:false}); /script/body/html盼望本文所述对大家jQuery程序设计有所关心。
jQuery常用插件大全
Horizontal accordion: jQuery基于jQuery开发，非常简单的水平方向折叠控件。
Horizontal accordion: jQueryjQuery-Horizontal Accordion具有XBOX360 blade界面风格的水平方向Accordion。
jQuery-Horizontal AccordionAutoComplete-JQueryjQuery插件易于集成到现在的表单中(Form)。
AutoComplete-JQueryFacebook like Autocomplete基于jQuery开发，类似于FaceBoox提供的AutoCompleter。
Facebook like AutocompletejQuery Autocomplete ModjQuery Autcomplete插件。
能够限制下拉菜单显示的结果数。
jQuery Autocomplete Modjqac基于Jquery开发的Autocomplete插件。
具有易于使用，配置简单，既可以利用Ajax读取数据也可以直接从本地获取数据。
jqacjQuery Tag Suggestion类似于提供的tag suggesting功能。
jQuery Tag SuggestionAutocomplete-jQuery ajax利用jQuery(Ajax)，PHP和MySQL开发的AutoCompleter。
Autocomplete-jQuery ajaxjQuery.Suggest跨浏览器支持，基于jQuery开发的Autocomplete library。
jQuery.SuggestAutocomplete- jQuery plugin一个jQuery Autocompleter，提供缓存选项来限制对服务器的请求。
Autocomplete- jQuery pluginjquery-aop为JavaScript增加面向方面编程特性的jQuery插件。
Jquery实现超酷的日程安排插件
Jquery实现超酷的日程安排插件这是一款功能超强大的插件，它可以自由管理自己的日程安排，有3种模式，分别为日，周，月，这样的话管理起来就非常清晰，如果想要保存数据，那就要配合后台程序了。
<script type="text/javascript">$(document).ready(function() {//[id,title,start,end，全天日程，跨日日程,循环日程,theme,'',''] var view="week";__CURRENTDATA=[['6147','你好啊',new Date(1338427800000),newDate(1338431400000),0,0,1,0,1,'','']];var op = {view: view,theme:3,showday: new Date(),EditCmdhandler:Edit,DeleteCmdhandler:Delete,ViewCmdhandler:View,onWeekOrMonthToDay:wtd,onBeforeRequestData: cal_beforerequest,onAfterRequestData: cal_afterrequest,onRequestDataError: cal_onerror,url: "calendar.php?mode=get" ,quickAddUrl: "calendar.php?mode=quickadd" ,quickUpdateUrl: "calendar.php?mode=quickupdate" ,quickDeleteUrl: "calendar.php?mode=quickdelete" //快速删除日程的/* timeFormat:" hh:mm t", //t表示上午下午标识,h 表示12小时制的小时，H表示24小时制的小时,m表示分钟tgtimeFormat:"ht" //同上 */};var $dv = $("#calhead");var _MH = document.documentElement.clientHeight;var dvH = $dv.height() + 2;op.height = _MH - dvH;op.eventItems =__CURRENTDATA;var p = $("#gridcontainer").bcalendar(op).BcalGetOp();if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow);}$("#caltoolbar").noSelect();$("#hdtxtshow").datepicker({ picker: "#txtdatetimeshow", showtarget: $("#txtdatetimeshow"),onReturn:function(r){var p =$("#gridcontainer").BCalGoToday(r).BcalGetOp();if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow);}}});function cal_beforerequest(type){var t="正在加载数据...";switch(type){case 1:t="正在加载数据...";break;case 2:case 3:case 4:t="正在处理请求...";break;}$("#errorpannel").hide();$("#loadingpannel").html(t).show();}function cal_afterrequest(type){switch(type){case 1:$("#loadingpannel").hide();break;case 2:case 3:case 4:$("#loadingpannel").html("操作成功!"); window.setTimeout(function(){ $("#loadingpannel").hide();},2000); break;}}function cal_onerror(type,data){$("#errorpannel").show();}function Edit(data){var eurl="";if(data){var url = StrFormat(eurl,data);OpenModelWindow(url,{ width: 600, height: 400, caption:"管理日程",onclose:function(){$("#gridcontainer").BCalReload();}});}}function View(data){var vurl="";if(data){var url = StrFormat(vurl,data);OpenModelWindow(url,{ width: 600, height: 400, caption: "查看日程"});}}function Delete(data,callback){$.alerts.okButton="确定";$.alerts.cancelButton="取消";hiConfirm("是否要删除该日程?", '确认',function(r){ r && callback(0);});}function wtd(p){if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow);}$("#caltoolbar div.fcurrent").each(function() {$(this).removeClass("fcurrent");})$("#showdaybtn").addClass("fcurrent");}//显示日视图$("#showdaybtn").click(function(e) {//document.location.href="#day";$("#caltoolbar div.fcurrent").each(function() {$(this).removeClass("fcurrent");})$(this).addClass("fcurrent");var p = $("#gridcontainer").BCalSwtichview("day").BcalGetOp(); if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow);}});//显示周视图$("#showweekbtn").click(function(e) {//document.location.href="#week";$("#caltoolbar div.fcurrent").each(function() {$(this).removeClass("fcurrent");})$(this).addClass("fcurrent");var p =$("#gridcontainer").BCalSwtichview("week").BcalGetOp();if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow); }});//显示月视图$("#showmonthbtn").click(function(e) {//document.location.href="#month";$("#caltoolbar div.fcurrent").each(function() { $(this).removeClass("fcurrent");})$(this).addClass("fcurrent");var p =$("#gridcontainer").BCalSwtichview("month").BcalGetOp(); if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow); }});$("#showreflashbtn").click(function(e){$("#gridcontainer").BCalReload();});//点击新增日程$("#faddbtn").click(function(e) {var url ="";OpenModelWindow(url,{ width: 500, height: 400, caption: "新增日程"});});//点击回到今天$("#showtodaybtn").click(function(e) {var p = $("#gridcontainer").BCalGoToday().BcalGetOp();if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow);}});//上一个$("#sfprevbtn").click(function(e) {var p = $("#gridcontainer").BCalPrev().BcalGetOp();if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow);}});//下一个$("#sfnextbtn").click(function(e) {var p = $("#gridcontainer").BCalNext().BcalGetOp(); if (p && p.datestrshow) {$("#txtdatetimeshow").text(p.datestrshow);}});$("#changetochinese").click(function(e){location.href="?lang=zh-cn";});$("#changetoenglish").click(function(e){location.href="?lang=en-us";});$("#changetoenglishau").click(function(e){location.href="?lang=en-au";});});</script>。
JQuery常用插件
JQuery常用插件1．报表插件jqPlot案例一：2．表格插件table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。
大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table 更容易添加CSS样式。
但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。
这里推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。
如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。
1.DataTables-强大的jQuery表格插件DataTables是提供了大量特性的强大jQuery表格插件。
例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。
2.uiTableFilter-jQuery表格过滤插件uiTableFilter是一个用于表格行筛选的jQuery插件。
插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。
3.Scrollable HTML Table-jQuery表格滚动插件Scrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。
4.Tablesorter-jQuery表格排序插件Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。
它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。
5.Flexigrid-Web2.0 jQuery表格插件Flexigrid 是一个轻量级的Web2.0 jQuery插件。
它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。
JQUERY实用大全
本文翻译自：Cats Who Code(后期大量翻译：The Website is very good)1.平滑滚动到页面顶部我们以一个热门，实用的代码片段开始：下面的4行jquery代码，页面访问者通过点击id 为[#top]，滑动到页面的顶部；$("a[href='#top']").click(function() {$("html, body").animate({ scrollTop: 0 }, "slow");return false;});2.克隆表格的表头到表格底部为了使自己的表格可读性更强，将表格的表头克隆到表格底部是个不错的注意。
下面就是这个实用的代码片段。
var $tfoot = $('<tfoot></tfoot>');$($('thead').clone(true, true).children().get().reverse()).each(function(){$tfoot.append($(this));});$tfoot.insertAfter('table thead');3.加载外部内容你需要添加外部内容到div标签么？如果使用jquery，这就变得很简单，具体实例如下：$("#content").load("somefile.html", function(response, status, xhr) {// error handlingif(status == "error") {$("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);}});4.相同高度的标签纵列当你的网站是用纵列来显示的内容是，如果所有的模块列都是等高度的将会更好看，更整洁。
37款开源jQuery表格插件
37款开源jQuery表格插件我们一般使用HTML表格来显示数据，我们都知道div更容易设计，更灵活。
但是现在你使用这些精彩的jQuery表格插件，将更简单、灵活、更多风格。
下面介绍了37款开源jQuery表格插件。
感谢FineReport报表软件公司的整理。
jQuery网格插件 jqGridjqGrid 是一个用来显示网格数据的jQuery插件，文档比较全面，附带中文版本。
主要特点:-Full control with JavaScript API-Data returned from the server is XML-Simple configuration-Ability to load big datasets (paging)-Resizable columns-Server-side sorting-Support of links, images, checkboxes-You can add more than one grid on a sigle page (master-detail)-Paging•授权协议： MIT•开发语言： JavaScript•操作系统：跨平台jQuery表格插件 jQuery grid view plugin jqGridView是新的，富客户端的，基于XML ， Ajax网格插件的jQuery库。
jqGridView提供专业的解决方案，代表和编辑表格数据在网络上。
精心设计的，具有强大的脚本API的，这可编辑网格是很简单的DHTML与XML 的配置，并显示出令人信服的成果与大量数据。
jqGridView可以轻松地执行好期待（管理通过的CSS ）。
jqGridView并不平台根据插件，它可用于不同的网络编程平台，如：ASP技术.NET /的ASP ， PHP中，爪哇岛， CGI脚本等jqGridView 已高度鲍泽兼容性。
主要特性:* Column resizing.* Server-side sorting.* Server-side paging.* Server-side filtering.* 100% XML support.* Inline row edit.* Columns templates.支持的浏览器包括:* Opera 9.0* Firefox 1.5* Safari 3.0* IE 6.0•授权协议：未知•开发语言： JavaScript•操作系统：跨平台jQuery表格插件 Flexigrid for jQuery Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
50多个强大的jQuery插件应用实例
原文:50+ Amazing Jquery Examples- Part1
jquery是近段时间里比较流行的一个javascript框架，不断有使用者开发出新的 jQuery插件。
下面收集了50个开发者最喜欢使用的jQuery插件。
这仅仅是第一个系列，你先品尝，第二道大餐即将到来。
Sliding Panels －滑动门控制
1 Sliding Panels For jQuery -元素可以展开或关闭，创建出手风琴的滑动效果。
(2 jQuery Collapse-这个jQuery插件同样点击后滑动展开或关闭DIV层。
Menu －菜单
3 LavaLamp
(4 A Navigation Menu- 锚链接的无序列表嵌套, 可以添加2级菜单
(5 SuckerFish Style
Tabs –选项卡
6 jQuery UI Tabs / Tabs 3–基于 jQuery 的一个Tab选项卡导航
(7 TabContainer Theme–当用户在选项卡之间进行切换时，产生JQuery风格的淡出动效果。
Accordion－手风琴效果
8 jQuery Accordion
Demo
(9 Simple JQuery Accordion menu
SlideShows －幻灯片
10 jQZoom-让你在你的网页上很简单的实现图片的缩放功能。
(11 Image/Photo Gallery Viewer- 一个图像/相片的画廊展示插件。
可以让你对图片进行分组、并产生像Flash一样的多种浏览特效。
Transition Effects –过渡特效
12 InnerFade –可以让网页中的任何元素产生淡化效果
(13 Easing Plugin-另外一个简单的过渡效果插件
(14 Highlight Fade
(15 jQuery Cycle Plugin- 拥有多种过渡效果的一个Gallery插件。
奇幻的jQuery
16 Riding carousels with jQuery–这个jQuery插件可以生成一个水平或垂直的列表，并且允许你控制DIV层的滑动显示。
Demo :
Color Picker －拾色器
17 Farbtastic -这个 jQuery 插件可以让你通过Javascript添加一个或多个拾色器widgets到一个页面中。
Demo :
(18 jQuery Color Picker LightBox －灯箱效果
19 jQuery ThickBox–is a webpage user interface dialog widget written in JavaScript.
Demo :
(20 SimpleModal Demos–its goal is providing developers with a cross-browser overlay and container that will be populated with content provided to SimpleModal.
Demo :
(21 jQuery lightBox Plugin– simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery′s selector.
Demo :
(
iframe
22 JQuery iFrame Plugin
Form Validation -表单验证器
23 Validation–有一套完整相当的形式验证规则。
该插件还动态地创建ID和联系信息。
Demo :
(24 Ajax Form Validation–在客户端使用jquery验证的一种形式，它可以验证用户名是否有效等。
Demo :
(25 jQuery AlphaNumeric -欢迎对对表单域中的某些字符进行限制
Form Elements －表单事件
(26 bobox–从现在的选择元素中创建一个个性的html组合Demo is here.
(27 jQuery Checkbox -样式化选择框，从而提高交互能力。
(28 File Style Plugin for jQuery -File Style插件让你可以使用图像做为文件浏览按钮，你还可以样式化文件名称区域。
Star Rating －星形评级系统
(29 Simple Star Rating System
30Half-Star Rating Plugin
ToolTips －提示工具
31 Tooltip Plugin Examples–一个花俏的提示应用。
可以对提示信息进行自定义位置, 设置阴影效果和添加更多内容等.你可以点击demo 演示.
(32 The jQuery Tooltip
Tables Plugins －表格插件
33 Zebra Tables Demo -使用jQuery来创建出斑马线风格的数据表格，鼠标悬浮时能改变背景色。
Demo :
(34 Table Sorter Plugin - 把一个标准的HTML表格分解成Thead和Tbody标签构成的分类表格，不需要刷新。
它能够成功地解析和整理多种类型的数据，包括联系资料。
(35 AutoScroll for jQuery -可以生成网页表格的热点自动滚动效果
(36 Scrollable HTML table plugin- 用来转换表格为普通的滚动HTML。
不需要额外的编码。
Demo :
Draggable Droppables And Selectables 拖拽
37 Sortables - 一个简单强大的拖拽插件。
(38 Draggables and droppables- 这是一个很好的演示。
用来实现拖拽树形菜单项目的操作
Style Switcher －切换风络
39 Switch stylesheets with jQuery允许访客选择他们喜欢的网站样式，使用了Cookie记录，也就是同一个用户下次再访问时，除非他不切换，否则会保留他选择的样式。
Demo演示. Rounded Corners 圆角效果40 jQuery Corner Demo
(41 JQuery Curvy Corners- 这个插件可以让你生成光滑、无锯齿的圆角效果。
Must See jQuery Examples 应该了解的一些jQuery应用实例42 jQuery Air–一个非常非常特别的客户管理界面应用插件，太特别了，太太太特别了。
Demo :
(43 HeatColor
Demo :
(44 Simple jQuery Examples
(45 Date Picker -一个灵活个性的jQuery日历组件。
Demo :
(46 ScrollTo -这个jQuery插件可以让你实现当点击链接时中滚动到页面中的某一对象
(47 3-Column Splitter Layout一个3栏布局分配插件。
(48 Pager jQuery -一个小巧的 jQuery插件，用来增加分页的页码效果
(49 Select box manipulation
(50 Cookie Plugin for jQuery
51 JQuery BlockUI Plugin。