Advanced Search

jQuery UIblock plugin met uitleg

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.