Posted By

Waldio on 02/16/11


Tagged

plugin


Versions (?)

jQuery UIblock plugin met uitleg


 / Published in: HTML
 

URL: http://waldio.110mb.com/js/jQuery/uiblock.htm

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html lang="nl">
  3. <head>
  4. <!-- Laad jQuery in -->
  5. <script type="text/javascript" src="http://waldio.webatu.com/system/jquery/jquery.min.js"></script>
  6. <!-- Laad jQuery block in -->
  7. <script type="text/javascript" src="https://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script>
  8. <!-- Het jQuery script -->
  9. <script type="text/javascript">
  10. // Als het document klaar is om te starten
  11. $(document).ready(function() {
  12.  
  13. // Zodra er op #iets wordt geklikt wordt deze functie gebruikt
  14. $('#iets').click(function() {
  15.  
  16. // Maak een block aan -met de plugin-
  17. $.blockUI({
  18. // De tekst in het block
  19. message: '<h1>Het is gelukt!</h1>',
  20. // De CSS van het block
  21. css: {
  22. border: 0,
  23. opacity: .7
  24. },
  25. // De CSS van het gebied dat over het document wordt geplaatst
  26. overlayCSS: {
  27. background: '#00E'
  28. }
  29. // Sluit block af
  30. });
  31.  
  32. // Laat het block na 2000 miliseconden (2 sec.) verdwijnen
  33. setTimeout($.unblockUI, 2000);
  34. // Sluit functie
  35. });
  36. // Sluit document.ready
  37. });
  38. </script>
  39. </head>
  40. <body>
  41. <!-- Maak een link aan met het id iets. Dus zodra er hierop wordt geklikt gaat de functie voor #iets.click aan de gang (zie hierboven)-->
  42. <a href="javascript:void(0);" id="iets">Hier een link</a>
  43. </body>
  44. </html>

Report this snippet  

You need to login to post a comment.