扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
//200多个插件如下 实际开发中 请选择合适的使用
成都创新互联公司专注于企业营销型网站建设、网站重做改版、满城网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站定制开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为满城等各大城市提供网站开发制作服务。
1:文件上传类jQuery插件
Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.
2:表单验证类jQuery插件
jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.
3:表单选择框类jQuery插件
jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).
4:表单基本、输入框、选择框等jQuery插件
jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.
5:时间、日期和颜色选取类jQuery插件
jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.
6:投票类jQuery插件
jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.
7:搜索类jQuery插件
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHPMySQL).
quick Search jQuery Plugin.
8:jQuery编辑器插件
jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.
9:多媒体、视频、Flash等类jQuery插件
jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.
图片类jQuery插件
ThickBox.
jQuery lightBox plugin.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.
10:Google地图类jQuery插件应用
jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.
11:游戏类jQuery插件
Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).
12:表格,网格类jQuery插件
UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.
13:统计类jQuery插件
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.
14:边框、圆角、背景类jQuery插件
jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.
14:文字和超链接类jQuery插件
jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.
15:文本提示类jQuery插件
jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.
16:菜单和导航类jQuery插件
jQuery Tabs Plugin – awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.
17:幻灯片、手风琴特效类jQuery插件
jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.
18:拖放类jQuery插件
UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.
19:XML XSL JSON Feeds相关jQuery插件
XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.
20:浏览器
Wresize – IE Resize event Fix Plugin.
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.
21:警告, 提示, 确认等对话框
jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.
CSS
jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.
22:DOM、AJAX和其它JQuery插件
FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery..
Jquery实现颜色选择器插件是一款很实用的功能插件,可以灵活设置undefined(不传参数时)、字符串、函数、undefined:把选择的颜
色设置到绑定bigColorpicker的元素的value上。、字符串:把选择的颜色设置到id为"字符串"的元素的value上。、函数:执行传入
的函数以实现自定义的获取颜色后的动作。、engine:可以是undefined、p(或P)、l(或L、在bigColorpicker展现颜色选择
区域小格时有两种实现方式:、
一、是一张背景图片,采用光标定位的方式获取颜色。p(或P)、
二、每个小格就是一个li,设置li的背景颜色。l(或L)、实现方式的不同,效率有所差异,可以自己在使用时选择,默认是p(或P)。、
undefined(不传参数时):使用默认p(或P)、sideLength:设置颜色区域的大小取值范围为2~10,默认为6,只有engine为L
时才生效
jQuery插件分为3类,即封装方法插件,封闭函数插件,选择器插件,但最后一种很少要去开发使用,自定义的插件各类多数属于前面两种.
1.封装方法插件
封装方法插件在本质上来说,是一个对象级别的插件,这类插件首先通过jQuery选择器获取对象,并为对象添加方法,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器,因此,成为开发插件的首选.
2.封装函数插件
封闭函数插件是一个类级别的插件,这类插件最大的特点,就是可以直接给jQuery添加静态方法,并且可以将函数置于jQuery命名空间中,如最为觉的就是$.ajax(),$.trim()全局性函数,都是以内部插件的形式植入jQuery内核中.
编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护。本文将详细介绍如何编写jQuery插件
类型
jQuery的插件主要分为3种类型
1、封装对象方法
这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如:parent()方法、appendTo()方法等。这些方法在现在来看都是jQuery本身自带的方法了。平时,我们是可以直接拿来就用的,只需引入jQuery库就行
2、封装全局函数
可以将独立的函数加到jQuery命名空间下,如常用的jQuery.ajax()、去首尾空格的jQuery.trim()方法等,都是jQuery内部作为全局函数的插件附加到内核上去的
3、选择器插件
虽然jQuery的选择器十分强大,但是在少数情况下,还是会需要用到选择器插件来扩充一些自己喜欢的选择器
要点
1、jQuery插件的文件名推荐命名为jQuery.[插件名].js,以免和其他JS库插件混淆
2、所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上
3、在插件内部的this指向的是当前通过选择器获取的jQuery对象,而不像一般方法那样,如click,内部的this指向的是DOM元素
4、可以通过this.each来遍历所有的元素
5、所有的方法或函数插件,都应当以分号结尾。否则压缩的时候可能出现问题。为了稳妥些,甚至可以在插件头部先加上一个分号,以免他人不规范的代码影响自身的插件代码
6、插件应该返回一个jQuery对象,以保证插件的可链式操作
7、避免在插件内部使用$作为jQuery对象的别名,而应使用完整的jQuery来表示,避免冲突。当然,也可以利用闭包来回避这种问题,使插件内部继续使用$作为jQuery的别名
闭包
利用闭包的特性,即可以避免内部临时变量影响全局空间,又可以在插件内容继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的:
(function(){
/*这里放置代码*/
})();
首先定义一个匿名函数function(){/*这里放置代码*/},然后用括号括起来,变成(function(){/*这里放置代码*/})这种形式,最后通过()这个运算符来执行。可以传递参数进行,以供内部函数使用
//为了更好的兼容性,开始前有个分号
;(function($){ //此处将$作为匿名函数的形参
/*这里放置代码,可以使用$作为jQuery的缩写别名*/
})(jQuery); //这里就将jQuery作为实参传递给匿名函数了
上面的代码是一种常见的jQuery插件的结构
插件机制
jQuery提供了两个用于拓展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法。jQuery.fn.extend()方法用于拓展封装对象方法的插件,jQuery.extend()方法用于拓展封装全局函数的插件和选择器插件。这两个方法都接受一个参数,类型为Object。Object对象的"名/值对"分别代表"函数或方法名/函数主体"
【jQuery.fn.extend()】
jQuery.fn.extend()方法用于将一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法
labelinput type="checkbox" name="foo" Foo/label
labelinput type="checkbox" name="bar" Bar/label
button id="btn1"全选/button
button id="btn2"全不选/button
script
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$('#btn1').click(function(){
$( "input[type='checkbox']" ).check();
});
$('#btn2').click(function(){
$( "input[type='checkbox']" ).uncheck();
});
/script
【jQuery.extend()】
jQuery.extend()方法用一个或多个其他对象来扩展一个对象,然后返回被扩展的对象
jQuery.extend( target [, object1 ] [, objectN ] )
例如,合并settings对象和options对象,修改并返回settings对象
var settings = {validate:false,limit:5,name:"foo"};
var options = {validate:true,name:"bar"};
var newOptions = jQuery.extend(settings,options);
console.log(newOptions);//Object {validate: true, limit: 5, name: "bar"}
jQuery.extend()方法经常被用于设置插件方法的一系列默认参数
function foo(options){
options=jQuery.extend({
name:"bar",
length:5,
dataType:"xml"
},options);
如果用户调用foo()方法的时候,在传递的参数options对象设置了相应的值,那么就使用设置的值,否则使用默认值
通过使用jQuery.extend()方法,可以很方便地用传入的参数来覆盖默认值。此时,对方法的调用依旧保持一致,只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更加简洁。此外使用命名参数意味着再添加新选项也不会影响过去编写的代码,从而使开发者使用起来更加直观明了
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流