jQuery插件写法入门读物(Plugins/Authoring)
jQuery插件写法入门读物(Plugins/Authoring)
官网原文：http://docs.jquery.com/Plugins/Authoring
译文转载源地址：http://www.52smap.com/2011/12/jquery%E6%8F%92%E4%BB%B6%E5%86%99%E6%B3%95%E5%85%A5%E9%97%A8%E8%AF%BB%E7%89%A9/
谢谢！
当你感觉jQuery还不错,想开发属于自己的插件的时候,来到这个地方算是找对地方了.
通过插件或者方法来扩张jQuery是一种很强大的方法,能够节省你很多的时间,通过把
一些你很经典的想法来抽象到你的方法中.本文列出了一些基本东西,还有一些最佳实践,
还有些你刚开始入门的一些例子:
目录
1 Getting Started
2 Context
3 The Basics
4 Maintaining Chainability
5 Defaults and Options
6 Namespacing
6.1 Plugin Methods
6.2 Events
6.3 Data
7 Summary and Best Practice
入门:
开发一个jQuery的插件,通过添加一个新的函数属性到jQuery.fn对象,而这个属性名称就是
你创建的名字了:
jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here};(function( $ ) { $.fn.myPlugin = function() { // Do your awesome plugin stuff here };})( jQuery );(function( $ ){ $.fn.myPlugin = function() { // there's no need to do $(this) because // "this" is already a jquery object // $(this) would be the same as $($('#element')); this.fadeIn('normal', function(){ // the this keyword is a DOM element }); };})( jQuery );$(‘#element’).myPlugin();
(function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; };})( jQuery );var tallest = $('div').maxHeight();// Returns the height of the tallest div(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');(function( $ ){ $.fn.tooltip = function( options ) { // Create some defaults, // extending them with any options that were provided var settings = $.extend( { 'location' : 'top', 'background-color' : 'blue' }, options); return this.each(function() { // Tooltip plugin code here }); };})( jQuery );$('div').tooltip({ 'location' : 'left'});{‘location’ : ‘left’,‘background-color’ : ‘blue’}(function( $ ){ $.fn.tooltip = function( options ) { // THIS }; $.fn.tooltipShow = function( ) { // IS }; $.fn.tooltipHide = function( ) { // BAD }; $.fn.tooltipUpdate = function( content ) { // !!! };})( jQuery );(function( $ ){ var methods = { init : function( options ) { // THIS }, show : function( ) { // IS }, hide : function( ) { // GOOD }, update : function( content ) { // !!! } }; $.fn.tooltip = function( method ) { // Method calling logic 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 );// calls the init method$('div').tooltip(); // calls the init method$('div').tooltip({ foo : 'bar'});// calls the hide method$('div').tooltip('hide');// calls the update method$('div').tooltip('update', 'This is the new tooltip content!');(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();// Some time later...$('#fun').tooltip('destroy');(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 );