jQuery.fn

Innhold

Hvordan lage egne jQuery funksjoner.

jQuery.fn === jQuery.prototype

Skal være inne i en anonym self-executing funksjon/closure, så vi ikke kommer i konflikt med andre instanser av $.

this inne i fn er jQuery objektet

	(function($) {
		$.fn.resizeHeading = function () {
	 		// Do stuff
	 		console.log(this);
	 		console.log('Kalte resizeHeading: ' + arguments.callee);
	 	};
	})(jQuery);
	// Lar og bruke den slik, på ett element
	$('h1').resizeHeading();

Hvis du skal gjøre noe med DOM-elementer , kan det være lurt å bruke fn.. Hvis ikke, kanskje lage en mer generell "vanilla" funksjon.

Enda bedre, implisitt iterasjon også i funksjoner

	(function($) {
		$.fn.resizeHeadings = function () {
  			return this.each(function () {
				// Do stuff
				console.log(this);
				console.log('Kalte resizeHeadings: ' + arguments.callee);
  			});
		};
	})(jQuery);
	// Lar oss bruke den på flere elementer:
	$('h1, h2').resizeHeadings();	

Default options:

	(function($) {
		$.fn.resizeHeadings = function () {
  			return this.each(function () {
				// Do stuff
				console.log(this);
				console.log('Kalte resizeHeadings' + arguments.callee);
				console.log($.fn.resizeHeadings.defaultOptions);
  			});
		};
	})(jQuery);
	// Default options
	$.fn.resizeHeadings.defaultOptions = {
		'max-size' : '50px'
	};
	// Lar oss bruke den på flere elementer:
	$('h1, h2').resizeHeadings();	

Custom options:

	(function($) {
		$.fn.resizeHeadings = function (customOptions) {
  			return this.each(function () {
  				// Options
  				var options = $.extend({}, $.fn.resizeHeadings.defaultOptions, customOptions);	
				// Do stuff
				console.log(this);
				console.log('Kalte resizeHeadings' + arguments.callee);
				console.log(options);
  			});
		};
	})(jQuery);
	// Default options
	$.fn.resizeHeadings.defaultOptions = {
		'max-size' : '50px'
	};
	// Lar oss bruke den på flere elementer:
	$('h1, h2').resizeHeadings({ 'max-size' : '60px' });	

Mer om å skrive plugins: $.fn

Mer om $.extend()

Oppgave

Lag din egen jQuery funksjon som resizer alle headings på denne siden, til en størrelse der de passer inn i sidebredden!