This commit is contained in:
azammitdcarf committed 2011-01-18 23:58:15 +00:00
1 parent 47410627e9
commit 1be24e7cc0
8 files changed
+469

No files matched your search

+1
View File
@@ -0,0 +1 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>jQuery nap</title> <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.nap-1.0.0.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.cycle.min.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.carouFredSel-1.2.1.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $('#caroufredsel_foo').carouFredSel().nap('pause', ['next', 'play'], 5); $('#cycle_foo').cycle({ timeout: 2500, speed: 500 }).nap( function() { $('#cycle_foo').cycle('pause'); }, function() { $('#cycle_foo').cycle('next').cycle('resume'); } ); $(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.'); } ); }); </script> <style type="text/css" media="all"> div.carouselholder { position: relative; width: 200px; } div.carouselholder ul, div.carouselholder li { display: block; list-style: none; margin: 0; } div.carouselholder ul { padding: 0; } div.carouselholder li { border: 1px solid #ccc; background-color: #eee; float: left; width: 48px; height: 38px; text-align: center; font-size: 30px; padding: 10px 0 0 0; } div.sleep, div.border.sleep { background-color: #ccc; } div.border { padding: 9px; border: 1px solid #ccc; background-color: white; } </style> </head> <body> <small>This page in <a href="nap_en.html">English</a></small> <h1>jQuery nap plugin</h1> <ul> <li><a href="nap.zip" target="_blank">Download</a></li> <li><a href="#introductie">Introductie</a></li> <li><a href="#voorbeelden">Voorbeelden</a></li> <li><a href="#installeren">Installeren</a></li> <li><a href="#configuratie">Configuratie</a></li> <li><a href="#licentie">Licentie</a></li> </ul> <br /> <br /> <br /> <h2 id="introductie">Introductie</h2> <p>jQuery.nap is een plugin die het merkt wanneer de bezoeker &quot;een dutje doet&quot; en voert de aangegeven functies uit zodra de bezoeker &quot;in slaap valt&quot; en weer &quot;wakker wordt&quot;.</p> <p>Het zogenoemde dutje (een &quot;nap&quot; 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.</p> <p>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.<br /> Een andere toepassing zou kunnen zijn dat de bezoeker automatisch wordt uitgelogd als na een tijdje niet actief te zijn geweest.</p> <br /> <br /> <br /> <h2 id="voorbeelden">Voorbeelden</h2> <p>Hieronder wordt de nap-plugin 3 keer toegepast: op de carouFredSel-plugin, de Cycle-plugin en met zelf gedefinieerde functies.<br /> Laat de muis en het toetsenbord los en wacht 5 seconden.</p> <br /> <h4 id="_vb_caroufredsel">carouFredSel-plugin</h4> <div class="carouselholder border"> <ul id="caroufredsel_foo"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li>l</li> </ul> <div style="clear:both;"></div> </div> <pre> $('#caroufredsel_foo') .carouFredSel() .nap('pause', ['next', 'play']); </pre> <br /> <br /> <h4>Cycle-plugin</h4> <div class="border" style="width: 200px; height: 150px;"> <div id="cycle_foo"> <img src="img/bigboned.jpg" alt="bigboned" width="200" height="150" border="0" /> <img src="img/jblletje.jpg" alt="jblletje" width="200" height="150" border="0" /> <img src="img/luierkonteritus.jpg" alt="luierkonteritus" width="200" height="150" border="0" /> </div> <div style="clear: both;"></div> </div> <pre> $('#cycle_foo').cycle().nap( function() { $('#cycle_foo').cycle('pause'); }, function() { $('#cycle_foo').cycle('next').cycle('resume'); } ); </pre> <br /> <br /> <h4>Zelf gedefinieerde functies</h4> <div class="border" id="custom_foo" style="width: 350px;"> <p>Hier is wat op maat gemaakte napping.<br /> Laat de muis en het toetsenbLine truncated