This page in English

jQuery nap plugin




Introductie

jQuery.nap is een plugin die het merkt wanneer de bezoeker "een dutje doet" en voert de aangegeven functies uit zodra de bezoeker "in slaap valt" en weer "wakker wordt".

Het zogenoemde dutje (een "nap" in 't Engels) betekend natuurlijk niet dat de bezoeker daadwerkelijk in slaap is gevallen, het geeft slechts aan dat de bezoeker gedurende een bepaalde tijd niet meer actief is geweest op de pagina. Bijvoorbeeld wanneer de pagina geopend blijft tijdens de pauze of het doen van de boodschappen, of wanneer er tegelijkertijd een andere website bezocht wordt.

Om het CPU-gebruik van de computer waar mogelijk te sparen, kunnen lopende animaties worden gestopt om pas weer te beginnen zodra de bezoeker weer actief wordt.
Een andere toepassing zou kunnen zijn dat de bezoeker automatisch wordt uitgelogd als na een tijdje niet actief te zijn geweest.




Voorbeelden

Hieronder wordt de nap-plugin 3 keer toegepast: op de carouFredSel-plugin, de Cycle-plugin en met zelf gedefinieerde functies.
Laat de muis en het toetsenbord los en wacht 5 seconden.


carouFredSel-plugin

$('#caroufredsel_foo')
	.carouFredSel()
	.nap('pause', ['next', 'play']);


Cycle-plugin

bigboned jblletje luierkonteritus
$('#cycle_foo').cycle().nap(
	function() { 
		$('#cycle_foo').cycle('pause'); 
	},
	function() { 
		$('#cycle_foo').cycle('next').cycle('resume'); 
	}
);


Zelf gedefinieerde functies

Hier is wat op maat gemaakte napping.
Laat de muis en het toetsenbord los en wacht...

$(document).nap(
	function() { 
		$('#custom_foo')
			.addClass('sleep')
			.find('p')
			.html('Je bent in slaap gevallen!<br />CarouFredSel en Cycle gepauzeerd.');
	},
	function() { 
		$('#custom_foo')
			.removeClass('sleep')
			.find('p')
			.html('Je bent wakker geworden!<br />CarouFredSel en Cycle hervat.');
	}
);


N.B.: De "standbyTime" (de tijd voordat de bezoeker in slaap valt) is standaard ingesteld op 1 minuut, voor deze demo is het teruggebracht tot 5 seconden:

$.fn.nap.standbyTime = 5;



Installeren

Importeer de jQuery bibliotheek en de nap plugin in de <head> van de pagina.

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.nap.js"></script>

Voeg het volgende JavaScript toe in de <head> van de pagina:

<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$('#foo').nap(fallAsleep, wakeUp, standbyTime);
	});
</script>



Configuratie

De te configureren parameters (allen zijn optioneel):


fallAsleep String, Object of Function
De functie welke uitgevoerd dient te worden wanneer de bezoeker "in slaap valt", kan zijn:
- Een String van een bij het jQuery-object behorende functie, bijvoorbeeld: "fadeOut" of "slideUp".
- Een Object met daarin meerdere Strings zoals hierboven beschreven.
- Een daadwerkelijke Function, bijvoorbeeld: function() { $("#selector").fadeOut(); }

WakeUp String, Object of Function
De functie welke uitgevoerd dient te worden wanneer de bezoeker "weer wakker wordt", zie de omschrijving van de fallAsleep-parameter.

standbyTime Number
Het aantal seconden dat de bezoeker stil is voordat de fallAsleep-functies worden uitgevoerd.
Dit is een globale tijd, alle functies die door de nap-plugin worden uitgevoerd, doen dat a.d.h.v. dezelfde standbyTime.
De standaard standbyTime is ingesteld op 1 minuut, voor deze demo is het teruggebracht tot 5 seconden.




Licentie

De jQuery.nap plugin is gelicentieerd onder de MIT licentie.