网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
jQuery插件开发详细教程
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。
编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性，此处添加的对象属性的名称就是你插件的名称：. 代码如下:jQuery.fn.myPlugin = function(){& //你自己的插件代码};用户非常喜欢的$符号哪里去了？ 它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为$符号，这样可以避免$号被其他库覆写。. 代码如下:(function ($) {&&& $.fn.m​​yPlugin = function () {&&&&&&& //你自己的插件代码&&& };})(jQuery);在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
二、环境现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。. 代码如下:(function ($) {&&& $.fn.m​​yPlugin = function () {&&&&&&& //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。&&&&&&& //$(this)等同于 $($('#element'));&&&&&&& this.fadeIn('normal', function () {&&&&&&&&&&& //此处callback函数中this关键字代表一个DOM元素&&&&&&& });&&& };})(jQuery);$('#element').myPlugin();
三、基础知识
现在，我们理解了jQuery插件的基础知识，让我们写一个插件，做一些事情。. 代码如下:(function ($) {&&& $.fn.m​​axHeight = function () {&&&&&&& var max = 0;&&&&&&& this.each(function () {&&&&&&&&&&& max = Math.max(max, $(this).height());&&&&&&& });&&&&&&&&&& };})(jQuery);var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。
四、维护Chainability
很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。 因此，要保持一个插件的chainability，你必须确保你的插件返回this关键字。. 代码如下:(function ($) {&&& $.fn.lockDimensions = function (type) {&&&&&&& return this.each(function () {&&&&&&&&&&& var $this = $(this);&&&&&&&&&&& if (!type || type == 'width') {&&&&&&&&&&&&&&& $this.width($this.width());&&&&&&&&&&& }&&&&&&&&&&& if (!type || type == 'height') {&&&&&&&&&&&&&&& $this.height($this.height());&&&&&&&&&&& }&&&&&&& });&&& };})(jQuery);$('div').lockDimensions('width').CSS('color', 'red');
由于插件返回this关键字，它保持了chainability，这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此，如果你的插件不返回固有的价值，你应该总是在其作用范围内返回this关键字。 此外，你可能会推断出，传递给插件的参数将会在插件的作用范围内被传递。 因此，在前面的例子，字符串'width'变成了插件的类型参数。
五、默认值和选项对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。 因此，相对于调用一个有大量参数的插件，你可以调用一个对象参数，包含你了你想覆写的设置。. 代码如下:(function ($) {&&& $.fn.tooltip = function (options) {&&&&&&& //创建一些默认值，拓展任何被提供的选项&&&&&&& var settings = $.extend({&&&&&&&&&&& 'location': 'top',&&&&&&&&&&& 'background-color': 'blue'&&&&&&& }, options);&&&&&&& return this.each(function () {&&&&&&&&&&& // Tooltip插件代码&&&&&&& });&&& };})(jQuery);$('div').tooltip({&&& 'location': 'left'});
在这个例子中，调用tooltip插件时覆写了默认设置中的location选项，background-color选项保持默认值，所以最终被调用的设定值为：. 代码如下:{&&& 'location': 'left',&&& 'background-color': 'blue'}这是一个很灵活的方式，提供一个高度可配置的插件，而无需开发人员定义所有可用的选项。
六、命名空间
正确命名空间你的插件是插件开发的一个非常重要的一部分。 正确的命名空间，可以保证你的插件将有一个非常低的机会被其他插件或同一页上的其他代码覆盖。 命名空间也使得你的生活作为一个插件开发人员更容易，因为它可以帮助你更好地跟踪你的方法，事件和数据。
七、插件方法
在任何情况下，一个单独的插件不应该在jQuery.fnjQuery.fn对象里有多个命名空间。. 代码如下:(function ($) {&&& $.fn.tooltip = function (options) {&&&&&&& // this&&& };&&& $.fn.tooltipShow = function () {&&&&&&& // is&&& };&&& $.fn.tooltipHide = function () {&&&&&&& // bad&&& };&&& $.fn.tooltipUpdate = function (content) {&&&&&&& // !!!&&& };})(jQuery);这是不被鼓励的，因为它$.fn使$.fn命名空间混乱。 为了解决这个问题，你应该收集对象文本中的所有插件的方法，通过传递该方法的字符串名称给插件以调用它们。. 代码如下:(function ($) {&&& var methods = {&&&&&&& init: function (options) {&&&&&&&&&&& // this&&&&&&& },&&&&&&& show: function () {&&&&&&&&&&& // is&&&&&&& },&&&&&&& hide: function () {&&&&&&&&&&& // good&&&&&&& },&&&&&&& update: function (content) {&&&&&&&&&&& // !!!&&&&&&& }&&& };&&& $.fn.tooltip = function (method) {&&&&&&& // 方法调用&&&&&&& if (methods[method]) {&&&&&&&&&&& return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));&&&&&&& } else if (typeof method === 'object' || !method) {&&&&&&&&&&& return methods.init.apply(this, arguments);&&&&&&& } else {&&&&&&&&&&& $.error('Method' + method + 'does not exist on jQuery.tooltip');&&&&&&& }&&& };})(jQuery);//调用init方法$('div').tooltip();//调用init方法$('div').tooltip({&&& foo: 'bar'});// 调用hide方法$('div').tooltip('hide');//调用Update方法$('div').tooltip('update', 'This is the new tooltip content!');
这种类型的插件架构允许您封装所有的方法在父包中，通过传递该方法的字符串名称和额外的此方法需要的参数来调用它们。 这种方法的封装和架构类型是jQuery插件社区的标准，它被无数的插件在使用，包括jQueryUI中的插件和widgets。
八、事件一个鲜为人知bind方法的功能即允许绑定事件命名空间。 如果你的插件绑定一个事件，一个很好的做法是赋予此事件命名空间。 通过这种方式，当你在解除绑定的时候不会干扰其他可能已经绑定的同一类型事件。&& 你可以通过追加命名空间到你需要绑定的的事件通过 ‘.&namespace&'。. 代码如下:(function ($) {&&& var methods = {&&&&&&& init: function (options) {&&&&&&&&&&& return this.each(function () {&&&&&&&&&&&&&&& $(window).bind('resize.tooltip', methods.reposition);&&&&&&&&&&& });&&&&&&& },&&&&&&& destroy: function () {&&&&&&&&&&& return this.each(function () {&&&&&&&&&&&&&&& $(window).unbind('.tooltip');&&&&&&&&&&& })&&&&&&& },&&&&&&& reposition: function () {&&&&&&&&&&& //...&&&&&&& },&&&&&&& show: function () {&&&&&&&&&&& //...&&&&&&& },&&&&&&& hide: function () {&&&&&&&&&&& //...&&&&&&& },&&&&&&& update: function (content) {&&&&&&&&&&& //...&&&&&&& }&&& };&&& $.fn.tooltip = function (method) {&&&&&&& if (methods[method]) {&&&&&&&&&&& return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));&&&&&&& } else if (typeof method === 'object' || !method) {&&&&&&&&&&& return methods.init.apply(this, arguments);&&&&&&& } else {&&&&&&&&&&& $.error('Method ' + method + ' does not exist on jQuery.tooltip');&&&&&&& }&&& };})(jQuery);$('#fun').tooltip();//一段时间之后... ...$('#fun').tooltip('destroy');
在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。 稍后， 当开发人员需要销毁tooltip的时候，我们可以同时解除其中reposition方法和resize事件的绑定，通过传递reposition的命名空间给插件。 这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。
通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不同名字的分离的data,& 使用一个单独的对象保存所有变量，并通过一个单独的命名空间读取这个对象不失为一个更好的方法。. 代码如下:(function ($) {&&& var methods = {&&&&&&& init: function (options) {&&&&&&&&&&& return this.each(function () {&&&&&&&&&&&&&&& var $this = $(this),&&&&&&&&&&&&&&&&&&& data = $this.data('tooltip'),&&&&&&&&&&&&&&&&&&& tooltip = $('&div /&', {&&&&&&&&&&&&&&&&&&&&&&& text: $this.attr('title')&&&&&&&&&&&&&&&&&&& });&&&&&&&&&&&&&&& // If the plugin hasn't been initialized yet&&&&&&&&&&&&&&& if (!data) {&&&&&&&&&&&&&&&&&&& /*&&&&&&&&&&&&&&&&&&&& Do more setup stuff here&&&&&&&&&&&&&&&&&&&& */&&&&&&&&&&&&&&&&&&& $(this).data('tooltip', {&&&&&&&&&&&&&&&&&&&&&&& target: $this,&&&&&&&&&&&&&&&&&&&&&&& tooltip: tooltip&&&&&&&&&&&&&&&&&&& });&&&&&&&&&&&&&&& }&&&&&&&&&&& });&&&&&&& },&&&&&&& destroy: function () {&&&&&&&&&&& return this.each(function () {&&&&&&&&&&&&&&& var $this = $(this),&&&&&&&&&&&&&&&&&&& data = $this.data('tooltip');&&&&&&&&&&&&&&& // Namespacing FTW&&&&&&&&&&&&&&& $(window).unbind('.tooltip');&&&&&&&&&&&&&&& data.tooltip.remove();&&&&&&&&&&&&&&& $this.removeData('tooltip');&&&&&&&&&&& })&&&&&&& },&&&&&&& reposition: function () {&&&&&&&&&&& // ...&&&&&&& },&&&&&&& show: function () {&&&&&&&&&&& // ...&&&&&&& },&&&&&&& hide: function () {&&&&&&&&&&& // ...&&&&&&& },&&&&&&& update: function (content) {&&&&&&&&&&& // ...&&&&&&& }&&& };&&& $.fn.tooltip = function (method) {&&&&&&& if (methods[method]) {&&&&&&&&&&& return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));&&&&&&& } else if (typeof method === 'object' || !method) {&&&&&&&&&&& return methods.init.apply(this, arguments);&&&&&&& } else {&&&&&&&&&&& $.error('Method ' + method + ' does not exist on jQuery.tooltip');&&&&&&& }&&& };})(jQuery);
将数据通过命名空间封装在一个对象中，可以更容易的从一个集中的位置读取所有插件的属性。十、总结和最佳做法
编写jQuery插件允许你做出库，将最有用的功能集成到可重用的代码，可以节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：
1.始终包裹在一个封闭的插件：. 代码如下:(function($) {/* plugin goes here */})(jQuery);2.不要冗余包裹this关键字在插件的功能范围内3.除非插件返回特定值，否则总是返回this关键字来维持chainability 。4.传递一个可拓展的默认对象参数而不是大量的参数给插件。5.不要在一个插件中多次命名不同方法。3.始终命名空间的方法，事件和数据。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章： 没有了
网友评论：
[][][][][][][][][][]在2012年里出现了很多很棒的jQuery插件，如结合CSS3的jQuery动画、强大的支持多设备浏览的响应性布局设计、使用视频作为网页设计背景、jQuery图像幻灯插件、导航、表格、表单以及像Pinterest布局等等，今天为大家收集2012年度优秀jQuery插件精选，有100多个并又分类好，网页设计师和前端开发人员都请勿错过哦！BigVIdeo JS是一个支持MP4视频作为整个网页背景的jQuery插件。这个HTML5视频背景jQuery插件，如果网页不支持HTML5视频将会用图片来代替作为背景。可以把YouTube视频作为网页背景这个jQuery视频插件，除了能放把视频作为整个页面的背景外，还能放到独立的DIV容器里面，具体请看里面的Demo支持关灯效果的jQuery视频插件。图像相册幻灯片系列插件这是一个响应性布局的JQuery图像插件。有多种过渡效果（图片切换效果）的幻灯片jQuery插件。简单的幻灯片切换插件，使用响应性布局设计。这个jQuery幻灯片切换效果不错。一个全屏背景的幻灯片jQuery插件，使用了响应性布局设计。超级简单的幻灯片图片切换。图像放大jQuery插件这个jQuery图像插件有点像Light Box效果，支持图像、视频、多图切换，很不错，喜欢的试试吧。这个jQuery图像插件有两种放大模式，包括onmousehover 和 onmousedown。像使用放大镜查看一样的图像放大效果。和上面介绍的差不多，自己打开看吧。图像与文字相关的jQuery插件让图像与基线对齐，如图，左图是默认不对齐的，右图是对齐后的效果。不错的动画切换效果，具体请看例子，很棒的哦。可以按比例生成图文缩略图。使用静态图像生成的动画，类似设计达人前面所讲的文章：利用CSS Sprite实现PNG图片动画背景图像相关的jQuery插件全屏幻灯片背景jQuery插件，有多种切换方式。可以调整适应容器尺寸的背景图像图文切换的幻灯片插件支持水平和垂直方向切换，支持拖动滑动条。3D效果的图片切换特效。这个切换效果很不错。多种不同的幻灯片切换，如焦点图效果、手风琴效果。这个jQuery幻灯片插件的特别之处就是支持iPad等移动设备触摸屏设备。一个轻量级的全屏大图背景切换幻灯片jQuery插件。只有4KB的轻量级文字切换插件。（网站之前还能访问，刚再次访问一下好像打不开了&.&）这个幻灯片jQuery插件的文字切换效果不错，而且还有进度条查看图片切换时间。菜单导航相关的jQuery插件菜单动画效果不错。优化了的水平导航插件，菜单尺寸自动适应导航区域。下拉导航jQuery插件。如果你要设计响应性布局的网站，哪么这个导航插件就适合你了，当在小分辨率的设备下，菜单自己变成select下拉选择菜单。带动画的盒子导航，效果自己看啊，很难解释……带动画效果的多级菜单jQuery插件。设计布局相关的jQuery插件流布局jQuery插件，不同分辨率切换的时候会带动画效果哦。使用简单脚本写的流布局jQuery插件。不错的jQuery流布局插件，切换带动画效果，特别之处就是可以拖动改变容器位置。和上面的jQuery流布局插件差不多，也是支持拖动来改变布局。这个jQuery流布局插件不同的地方就是内容会随机展示。一个Pinterest布局风格的RSS插件。有延迟加载效果的流局插件。可以调整DIV高度以对齐网格。让容器尺寸一至，以达到对齐显示效果。响应性（自适应）jQuery插件让iFrame也支持自适应宽度（响应性布局）优化内容显示的响应性jQuery插件。图片会根据容器大小而自动缩放。和上面一样，图像会根据容器大小而自动缩放。根据屏幕大小，显示适合分辨率的图像。根据屏幕大小，自动计算图像坐标和大小自适应。响应性文字插件：可以自定各个标签的字体大小。根据自定的屏幕大小来实行响应性布局。面板相关多种面板排列风格。有枯叶飘落的动画面板，很漂亮。HOVER面板效果。容器自动伸缩效果。不同类型的通知面板。通知面板（tool tips）插件。比较好玩的提示面板。Tool tips提示相关系列支持调整不同提示位置的插件。丰富的top tips揭示风格。轻量级的tool tips提示工具。tool tips提示工具，可以设置提示的位置和时间。图订式tool tips提示插件。最适合移动设备上使用的tooltips 提示插件。新闻式的jQuery提示插件。与动画相关的jQuery插件内容随机显示。逼真的阴影。jQuery与CSS3实现的动画效果。jQuery和CSS3组合，实现页面渐变过渡动画效果。根据鼠标位置显示不同大小。简单描述CSS3动画。结合CSS3制作的画廊。一个有趣的jQuery插件，它可以把图标像iphone图标一样晃动起来。悬停在图像时的动画效果展示。图像旋转动画。多种图像环绕旋转动画，有几个很不错。点击图像，展示动画。适合商品展示动画，使用多个图片连成的动画。jQuery片图像动画，也是用多个图片连成的。一个基于CSS Sprite制作的动画，可以设置FPS值。模糊及其它动画特效根据重力而变动的特效……一个很好玩的jQuery Float特效插件，可以让元素可爱的浮动起来。指定某些元素变得模糊起来。就WIN 7 哪个背景磨砂效果。使背景图像有磨砂的感觉。阴影类的jQuery插件。创意的竹廉动画效果，很漂亮吧。惯性拖动效果，可以在台式机和移动设备上使用。折叠纸效果。一个翻书效果。滚动、视差特效的jQuery插件各种各样的视差动画，淡入淡出的动画~矩阵式滑动。像幻灯片一样的动画，以圆形方式展示。使用jarallax，可以很容易就能实现视差效果。根据路径来滑动的jQuery滑动插件。页面侧边栏jQuery插件。视差滑动插件。类似使用描链接的滑动插件。可以指定容器滑动到XX像素后因定显示，像设计达人的右边一样，但他的展示方式还是有点不同，大家请看看。可以让你的页面内容无刷新加载，而不需要点击下一页，像花瓣、Pinterest首页一样，屏幕滚动到差不多最后的时候，就会自动加载下一页的内容。这个Scroll插件不同的是有惯性滑动效果。小尺寸的Scroll bar滚动栏。列表相关左右滑动列表，比较适合产品展示。滑动导航列表，可以让导航根据屏幕滑动而滑动。方便的树目录调整插件，比wordpress内置哪个菜单还要好用。Table表格相关精美的表格插件，多种漂亮的Table表格样式。可以让表格滑动，具体我没试过 ，大家自己看Demo.一个像响应性一样的表格插件，可以让你的Table表格在移动设备上也能有着良好的展示效果。具有过滤功能的列表插件。表单相关插件这个jQuery插件可以让本地保存表单的数据。一个响应性布局设计的表单。一个伸缩动画的搜索插件。带动画效果的统计表插件。轻量级的日期插件。智能显示时间的jQuery插件，比如”8小时以前”.能显示密码安全度的插件。文字文本相关jQuery插件当然文字超过内容区域的时候，会自动多出Read more按钮。这个Typist插件能把文字像打字机一样展示出来，还支持换行、暂停操作哦。动画文字效果。文字环绕插件，像微软word文档的图像环绕功能。一个可以调整不同字体的字体间距插件。一个FAQ页面插件。载入加载相关的jQuery插件可以延迟加载服务器资源。可以指定时间或延迟时间加进外部JS可以定时执行脚本。带动画效果读取百分比的jQuery插件。元素内容统一社会化媒体的风格样式。浮动的社会化按钮。CSS3动画引导页。也是一个动画引导效果插件。可以让你简单创建各种拼图样式设计。可以把内容分成多页展示？这个jQuery插件可以让一个网站的页面以渐变动画形式切换。一个让你方便创建甘特图的jQuery插件，我想做大项目的朋友一定经常使用了。其它jQuery插件URL地址解析插件。轻量级的URL地址解析插件。一个可以解析你的鼠标动作插件。
热门素材内容推荐
& CopyRight , , Inc.All Rights Reserved.未注册过用户可以点击直接登录哦！
使用注册邮箱登录
选择画板...
你已经成功采集到
&|关闭窗口