jQuery Tutorials

warning: Creating default object from empty value in /home/tutorials/domains/n00btutorials.nl/public_html/modules/taxonomy/taxonomy.pages.inc on line 33.

jQuery en grote selecties

Niet zelden loopt de gemiddelde programmeur tegen het probleem op: Grote selecties waardoor een pagina tergend traag en soms zelfs de browser vast loopt. Denk bijvoorbeeld aan een pagina waar het hele klantenbestand op staat? Of een lijst met allen producten erin? Dit zijn slechts 2 voorbeeld van pagina's waarbij het niet ondenkbaar is dat meer 1.000 elementen staan waar een jQuery actie aan gehangen moet worden. Maar hoe pak je nou zoiets aan?

Werken met grote selecties

Een uitschuif menu met jQuery maken

Soms is er ruimte te kort op je website, of wil je extra informatie tonen die alleen op aanvraag getoond wordt. Dan is het makkelijk om een menu te hebben die kan uitschuiven. In dit artikel ga ik bespreken hoe je zo'n menu zelf in elkaar kunt zetten.

De HTML opbouw

De HTML is vrij eenvoudig, en ziet er als volgt uit:

  1. <div id="top-menu">
  2.         <div id="top-menu-content">
  3.                 Hier komt de content van het menu.
  4.         </div>
  5.         <div id="top-menu-label">
  6.                 Label
  7.         </div>
  8. </div>

Ook de CSS is relatief eenvoudig opgebouwd:

  1. div#top-menu {
  2.         position: fixed;
  3.         z-index: 9999;
  4.         background: #fff;
  5. }
  6.  
  7. div#top-menu-label {
  8.         background: #fff;
  9.         position: absolute;
  10.         width: 100px;
  11.         height: 25px;
  12.         left: 50%;
  13.         margin-left: -50px;
  14. }

Het daadwerkelijke verbergen van de content gaan in de volgende stap met jQuery doen. Dan blijft enkel het labeltje zichtbaar.

jQuery Lightbox Voorbeelden

Er zijn een hoop manieren om je foto's mooi te presenteren. In veel gevallen wordt er gebruik gemaakt van een zogenaamde Lightbox. Dit is een soort popup binnen in het browser scherm waarin de foto wordt getoond, en waarbij ook verder geklikt kan worden. Inmiddels zijn er tientallen verschillende ligtboxen beschikbaar, de ene nog mooier en uitgebreider dan de andere. Zo is het bijvoorbeeld mogelijk om externe content in te laden, of om flash video's te tonen. In dit artikel laat ik een overzicht zien van een aantal verschillende lightboxen.

jQuery Fancybox

De jQuery Fancybox is een lightbox die, zoals de naam al doet vermoeden, er erg goed uitziet. Dit begint al vanaf het moment dat er op de afbeelding geklikt wordt. Er komt geen normale lightbox, maar de afbeelding schuift als het ware naar het midden, en wordt groter. Ook bied deze lightbox de mogelijkheid om tussen de verschillende afbeeldingen te schakelen door middel van scrollen.

jQuery slider

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum imperdiet dignissim. Sed ut tristique dui. Phasellus risus ante, malesuada at aliquam ac, consectetur ac diam. In lacinia neque eu nibh rutrum volutpat. Nullam faucibus, elit vitae varius consectetur, dui augue sollicitudin est, sed dictum enim orci nec mi. Suspendisse vitae velit ut ante suscipit viverra eget nec est. Nam cursus molestie scelerisque. Nulla est tellus, vulputate ac tempus sed, posuere ac nibh. Integer ornare accumsan mattis. Pellentesque pellentesque dui vel sem dapibus pharetra. Mauris sagittis, lectus nec feugiat fringilla, mauris magna pretium neque, ut molestie metus lectus eget metus. Nam at sem nulla, eget accumsan ante. Phasellus volutpat feugiat pulvinar. Pellentesque sed diam nec massa fringilla laoreet nec vitae lectus. Sed est est, placerat non vulputate quis, dictum eu felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Afbeeldingen snijden met jQuery

Wanneer gebruikers foto's kunnen uploaden, kan het soms zijn dat deze foto's maar een bepaald maximaal formaat mogen hebben. Maar hoe los je zoiets op? Een uitkomst hierin biedt de jQuery plugin jcrop. Hiermee kan je de gebruiker een foto laten uitsnijden en deze vervolgens met PHP daadwerkelijk verkleinen. In deze tutorial leg ik uit hoe je dit zelf kunt doen.

Demo

Geen zin om het artikel te lezen:

Maak je eigen Lightbox

De Lightbox werd in eerste instantie vooral gebruikt voor het tonen van afbeeldingen op een manier zonder popups, maar tegenwoordig worden ze zo ongeveer overal voor gebruikt. Ook zijn ze er in verschillende soorten, maten en uitvoeringen. Soms kan het echter zijn dat de beschikbare ligtboxen niet voldoen aan de gestelde eisen. Daarom laat ik zien hoe je zelf een lightbox kunt maken.

De CSS

De lightbox draait vooral op de bijbehorende CSS. Die zorgt voor de opmaak en het bijbehorende effect. Ik gebruik 2 div's: 1 voor de achtergrond zodat deze doorschijnend is, en 1 voor de inhoud van de box. De CSS die daarbij hoort ziet er zo uit:

jQuery image slider

Vaak zie je dit in webwinkels: een slider waarbij uit meerdere afbeeldingen gekozen kan worden, en bij het klikken dat er een grotere foto verschijnt. Dat gaan wij vandaag maken. Hierbij komt ook een stukje CSS aan te pas, er moet namelijk een ruimte gemaakt worden waar de miniatuur afbeeldingen getoond worden, en een waar de grote foto getoond wordt. Het resultaat zal er als volgt uitzien:

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:

Waarde aan dropdown toevoegen met jQuery

In deze jQuery tutorial zal ik proberen uit te leggen hoe je een waarde aan een select element kunt toevoegen. Ik ga hier ook een klein stukje AJAX in verwerken, zodat de toegevoegde waarde ook op de server bekend is, en deze meteen als waarde in het select element ingevuld wordt. Dit heeft als handigheid dat wanneer je tijdens het invullen van een formulier een waarde kan toevoegen zonder het hele formulier te vernieuwen, waardoor je alles weer opnieuw moet invullen. Dit verrijkt dus de gebruikers ervaring van de applicatie. Ik ga hierbij gebruik maken van de ingebouwde AJAX functie, de javascript functie prompt en change.

Element toevoegen aan een dropdown

Het toevoegen van een waarde aan een select element kun je doen door de HTML van het element te bewerken, en hierbij een nieuwe waarde toe te voegen:

Optie toevoegen (kijk na het klikken bij de opties, voorbeeld 6 is toegevoegd)

jQuery tutorial: image rotator

In deze jQuery tutorial zal ik uitleggen hoe je een image rotator kan maken met behulp van jQuery.

jQuery Noobtutorials.nl PHP MYSQL
Inhoud syndiceren