jQuery voorbeelden

Op het gebied van jQuery zijn er een aantal scripts die vrij veel terug komen. In deze jQuery tutorial zal ik daarom een aantal van deze voorbeelden geven, met bijbehorende code. In deze jQuery tutorial zullen aan bod komen:

jQuery Toggle

Voorbeeld

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat orci, molestie sit amet dapibus venenatis, laoreet eu nisl. Curabitur neque est, gravida sollicitudin vulputate sit amet, bibendum at turpis. Sed non mauris neque. Vivamus ut lacus non nibh molestie venenatis. Cras eget tellus augue, non feugiat nulla. Pellentesque et risus at metus pulvinar sagittis ut in lacus. Sed fermentum luctus sem vel posuere. Vivamus mollis tortor euismod lectus malesuada placerat. Donec laoreet ullamcorper pharetra. Cras nec tellus justo, dapibus cursus augue. Vivamus quis eros lectus. Aliquam lorem odio, vestibulum ac tempor nec, ultricies vel lectus. Vestibulum congue dolor in purus laoreet et pellentesque dolor faucibus. Etiam justo justo, pharetra id interdum in, scelerisque at sapien. In hac habitasse platea dictumst.

Aliquam aliquet, ipsum at molestie egestas, nunc tortor hendrerit urna, sed lobortis nibh diam vel leo. Fusce vel augue nisi, sed posuere purus. Nullam tellus nisl, vestibulum non varius et, pellentesque nec mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae diam non massa malesuada euismod sit amet vitae quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra mollis ultricies. Pellentesque lacus nulla, molestie pretium facilisis ut, sollicitudin vel ligula. Etiam luctus hendrerit viverra. Vivamus tincidunt purus in ante ullamcorper venenatis at eleifend elit. Nulla pulvinar neque eu est varius tincidunt in adipiscing augue. Pellentesque auctor est quis sem laoreet at viverra velit facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus molestie facilisis tortor, et condimentum nibh feugiat ac.

Duis lacus eros, rutrum et lacinia vel, gravida in lacus. Mauris vel augue mi, nec porttitor augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis et felis odio, in lacinia felis. Integer vitae sapien justo. Aenean hendrerit erat a nibh ultricies ut volutpat lorem dignissim. Donec ornare congue lorem vitae aliquam. Pellentesque nec nisl urna. Morbi ut nisi velit, a sodales lectus. Nulla facilisi. Nullam mi urna, pulvinar rutrum rhoncus in, vestibulum quis arcu. Vestibulum volutpat dolor neque, sit amet dictum eros. Proin vel sapien id arcu faucibus auctor eu vitae sem. Sed dignissim dui non augue lacinia nec interdum odio dictum. Sed sodales ipsum quis purus facilisis vitae porta neque eleifend. Vestibulum at justo libero, ut tempor diam. Aliquam sit amet dolor lectus, eget consectetur odio. Duis nec nisi non metus fringilla rhoncus.

Nulla faucibus venenatis pulvinar. Fusce eleifend neque et sapien luctus sit amet placerat ipsum laoreet. Fusce ornare lorem sed nisl scelerisque eget feugiat libero lobortis. Cras commodo felis eu erat vehicula et dignissim neque molestie. Cras ipsum tellus, dictum quis venenatis a, posuere in diam. Duis consequat, turpis id rhoncus congue, purus ligula semper nibh, et posuere lectus eros vel risus. Duis vulputate accumsan sodales. Proin pretium magna id erat feugiat accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean hendrerit gravida justo non eleifend. Pellentesque ipsum nulla, tincidunt et suscipit eu, interdum non velit. Nunc eu augue est, ut malesuada nisi. Suspendisse pulvinar felis ac velit dapibus eu lobortis ante ultrices. Duis eu eros turpis.

Proin sagittis interdum urna non bibendum. Donec mattis, nisl a venenatis mollis, mi tortor imperdiet ligula, et aliquam nisi risus eget sapien. Vestibulum at hendrerit erat. Donec convallis auctor enim nec tempor. Integer interdum urna at ante pulvinar interdum. Donec consectetur fermentum dui et sagittis. Nulla orci elit, euismod at volutpat eu, pharetra id ipsum. Aliquam vestibulum nibh et mi condimentum viverra. Aenean sagittis nibh at metus feugiat sit amet ornare mi ornare. Nullam quis dolor metus. Praesent eros augue, sagittis sit amet gravida vitae, elementum vitae arcu. Nulla facilisi.

Druk op Meer... en kijk wat er gebeurd. Dit script is vooral handig wanneer er bepaalde stukken tekst niet altijd getoond hoeft te worden. Dit wordt veel gebruikt om in Google hoger te komen. Voor Google staat er namelijk een groot stuk tekst, terwijl de bezoeker die Javascript aan heeft staan deze tekst slechts gedeeltelijk wordt vertoond. De gebruikte code zit als volgt in elkaar:

  1. // P elementen verbergen die niet getoond worden. Dat zijn ze allemaal behalve de eerste (:first)
  2. $("div#meerminder p:not(:first)").hide();
  3. // Een link toevoegen achter het eerste P element
  4. $("div#meerminder p:first").append("<a href='' class='toggle'>Meer...</a>");
  5.  
  6. $(".toggle").toggle( function () {
  7.         // De P elementen uiklappen
  8.         $("div#meerminder p:not(:first)").slideDown();
  9.         $(this).text('Minder...');
  10. }, function () {
  11.         // De P elementen weer inklappen
  12.         $("div#meerminder p:not(:first)").slideUp();
  13.         $(this).text('Meer...');
  14. });

Bekijk dit voorbeeld online

Tabbladen

Voorbeeld
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin erat orci, molestie sit amet dapibus venenatis, laoreet eu nisl. Curabitur neque est, gravida sollicitudin vulputate sit amet, bibendum at turpis. Sed non mauris neque. Vivamus ut lacus non nibh molestie venenatis. Cras eget tellus augue, non feugiat nulla. Pellentesque et risus at metus pulvinar sagittis ut in lacus. Sed fermentum luctus sem vel posuere. Vivamus mollis tortor euismod lectus malesuada placerat. Donec laoreet ullamcorper pharetra. Cras nec tellus justo, dapibus cursus augue. Vivamus quis eros lectus. Aliquam lorem odio, vestibulum ac tempor nec, ultricies vel lectus. Vestibulum congue dolor in purus laoreet et pellentesque dolor faucibus. Etiam justo justo, pharetra id interdum in, scelerisque at sapien. In hac habitasse platea dictumst.
Aliquam aliquet, ipsum at molestie egestas, nunc tortor hendrerit urna, sed lobortis nibh diam vel leo. Fusce vel augue nisi, sed posuere purus. Nullam tellus nisl, vestibulum non varius et, pellentesque nec mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vitae diam non massa malesuada euismod sit amet vitae quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra mollis ultricies. Pellentesque lacus nulla, molestie pretium facilisis ut, sollicitudin vel ligula. Etiam luctus hendrerit viverra. Vivamus tincidunt purus in ante ullamcorper venenatis at eleifend elit. Nulla pulvinar neque eu est varius tincidunt in adipiscing augue. Pellentesque auctor est quis sem laoreet at viverra velit facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus molestie facilisis tortor, et condimentum nibh feugiat ac.
Duis lacus eros, rutrum et lacinia vel, gravida in lacus. Mauris vel augue mi, nec porttitor augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis et felis odio, in lacinia felis. Integer vitae sapien justo. Aenean hendrerit erat a nibh ultricies ut volutpat lorem dignissim. Donec ornare congue lorem vitae aliquam. Pellentesque nec nisl urna. Morbi ut nisi velit, a sodales lectus. Nulla facilisi. Nullam mi urna, pulvinar rutrum rhoncus in, vestibulum quis arcu. Vestibulum volutpat dolor neque, sit amet dictum eros. Proin vel sapien id arcu faucibus auctor eu vitae sem. Sed dignissim dui non augue lacinia nec interdum odio dictum. Sed sodales ipsum quis purus facilisis vitae porta neque eleifend. Vestibulum at justo libero, ut tempor diam. Aliquam sit amet dolor lectus, eget consectetur odio. Duis nec nisi non metus fringilla rhoncus.
  1. // Wanneer er op één van de tabs geklicked wordt deze functie uitvoeren
  2. $("ul#navigation li a").click( function (e) {
  3.         // Aan de hand van de actieve class kan de gebruiker zien welke tab actief is
  4.         // Door deze code wordt de huidige class weggehaald
  5.         $("ul#navigation li a").removeClass('active');
  6.         // En weer toegevoegd aan de zojuist aangeklikte tab toegevoegd, zodat dit van kleur veranderd.
  7.         $(this).addClass('active');
  8.         // De zichtbare tab weg faden zodat deze verdwijnt
  9.         $("div#tabs div").fadeOut();
  10.         // De geselecteerde tab weergeven. Met this.hash wordt er naar de link gekeken, bijvoorbeeld #tab1
  11.         // Vervolgens wordt er tab met dazelfde ID weergegeven
  12.         $("div" + this.hash).stop(true, true).fadeIn();
  13.         // Dit zorgt ervoor dat de browser niet navigeert naar bijvoorbeeld #tab1
  14.         e.preventDefault();
  15. });
  16.  
  17. // Wanneer de pagina laadt wordt er op de eerste tab geklikt. Zodoende wordt de pagina goed geladen.
  18. $("ul#navigation li a:first").click();

Bekijk dit voorbeeld online

Dropdown menu

Bekijk dit Dropdown Menu voorbeeld online

Omdat ik hier gebruik heb gemaakt van de Superfish plugin, is het super makkelijk om dit zelf te doen. Deze code is genoeg:

  1. $("ul#navigation").superfish();

Bekijk dit voorbeeld online

Tooltip

Bekijk dit Tooltip voorbeeld online

Ik zal hier alleen de meebewegende tooltip bespreken:

  1. // Voer de functie uit wanneer er met de muis over de link bewogen wordt.
  2. $("a.nonfixed").mouseover( function (e) {
  3.         // Maak een DIV element om daar de tekst in te zetten
  4.         $("body").append("<div id='tooltip'></div>");
  5.         // Haal de tekst uit het TITLE attribuut en plaats deze in de DIV
  6.         $("div#tooltip").text( $(this).attr('title') );
  7. // Deze functie wordt uitgevoerd wanneer de muis van de link afgehaald wordt
  8. }).mouseout( function () {
  9.         // De muis is van de link af, dus verwijder de DIV
  10.         $("div#tooltip").remove();
  11. // Deze functie wordt uitgevoerd wanneer de muis bewogen wordt
  12. }).bind('mousemove', function (e) {
  13.         // Dit stukje zorgt ervoor dat de DIV met de muis meebeweegd.
  14.         $("div#tooltip").css({
  15.                 position: 'absolute',
  16.                 top: e.clientY + 20,
  17.                 left: e.clientX - ( $(this).width()-20/2)
  18.         });
  19. });

Bekijk dit voorbeeld online

Meeschuivend menu

Bekijk dit meeschuivende menu voorbeeld online

  1. // Sla de top positie en positie vanaf links op in een variabele
  2. menuTop = $("div.menu").offset().top;
  3. menuLeft = $("div.menu").offset().left
  4.  
  5. // Wanneer er gescrolled wordt, wordt deze code uitgevoerd
  6. $(window).scroll( function () {
  7.         // Bekijk hoe hoog de bovenkant van het scherm is.
  8.         windowTop = $(window).scrollTop();
  9.        
  10.         // Een kleine check om te kijken of het menu moet gaan meeschuiven
  11.         if(windowTop > menuTop) {
  12.                 // Voeg de class FIXED toe, deze geeft een position: fixed mee
  13.                 $("div.menu").addClass("fixed").css({
  14.                         left: menuLeft-10,
  15.                         top: 0
  16.                 });
  17.         } else {
  18.                 // Het menu moet op zijn normale plek staan, dus verwijder de class
  19.                 $("div.menu").removeClass("fixed");
  20.         }
  21. });

Bekijk dit voorbeeld online

Drag and drop

Bekijk dit drag and drop voorbeeld online

In dit voorbeeld heb ik ook weer gebruikt gemaakt van een plugin. Dit keer van de jQuery User Interfase drag and drop plugin. De jQuery User Interface zijn een aantal plugins waarmee het eenvoudig wordt om een aantal standaard handelingen te doen. De code voor deze Drag and Drop is dan ook vrij eenvoudig:

  1. // Maak het element beweegbaar
  2. $("#draggable").draggable();
  3.  
  4. // Zorg ervoor dat het element bovenop het andere element geplaatst kan worden
  5. $("#droppable").droppable({
  6.         // Deze code wordt uitgevoerd wanner een element bovenop dit element geplaatst wordt
  7.         drop: function(event, ui) {
  8.                 $(this)
  9.                         .addClass("ui-state-highlight")
  10.                         .find("p").html("Element geplaatst!");
  11.         }
  12. });

Bekijk dit voorbeeld online

Datepicker

Bekijk deze datepicker online

Ook deze datepicker komt uit de jQuery User Interfase. Daardoor is de code zeer eenvoudig:

  1. $("input").datepicker();

Bekijk dit voorbeeld online

Slot

Als bijlage heb ik de voorbeelden bijgevoegd

BijlageGrootte
jquery-voorbeelden.zip101.96 KB