Web Tutorials

Dreamweaver | Webdesign | Web Tutorials

Ronde hoeken met jQuery Corners

Ronde hoeken maken… Het blijft een doorn in het oog voor velen. Hoe maak je het? Hoe voeg je het in je website? Moet je images gebruiken? Of enkel CSS?

Zelf heb ik al meerdere oplossingen uitgeprobeerd en met allerlei scripts liggen knoeien. In deze tutorial leg ik uit hoe je heel makkelijk en zonder gebruik van images ronde hoeken kan maken. Dit script heeft mij tot nu toe het meest kunnen bekoren.

Het script, jQuery Corners, is gebaseerd op jQuery en gebruikt, zoals ik eerder aanhaalde, geen images. Ook fijn om te weten is dat je voor zowel divs, tabellen, buttons en dergelijke kan gebruiken.

Downloaden van het script

Om het script werkend te krijgen dien je 2 downloads te doen :

• Het jQuery framework.
• De laatste release van de jQuery Corners plugin.

Installeren

Na het unzippen van beide files heb je 3 Javascript files :

• jquery-1.2.6.min.js
• jquery.corners.js
• jquery.corners.min.js

Kopieer deze files en plaats ze in je webproject. Zelf maak in mijn webprojecten altijd een mapje ‘js’ aan om Javascripts in te zetten, dit is uiteraard niet verplicht.

Plaats nu een verwijzing in de head van elke pagina waar je dit script wil toepassen. Voorbeeld :

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript" src="js/jquery.corners.min.js"></script>

Script toepassen

Op de site van jQuery Corners staan heel duidelijke voorbeelden maar ik leg hier nog even uit hoe je dit toepast.

Het eerste wat je moet doen is je div een class meegeven. Dit doe je door aan je div class=”rounded” toe te voegen.

Een div genaamd ‘header’ ziet er dan zo uit :

<div id="header" class="rounded">Header</div>

Het is belangrijk dat bij het toepassen van dit script de div genoeg ruimte heeft, zonder hoogte kan er namelijk geen ronde hoek aangemaakt worden. Voor dit voorbeeld voeg ik een padding toe van 10px, Je kan gerust de CSS in een externe stylesheet zetten.

De div header ziet er nu uit :

<div style="padding:10px" id="header" class="rounded">Header</div>

Plaats nu onder de div de volgende Javascript regel of plaats deze regel in de head van je pagina:

<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

De div ziet er nu als volgt uit :

<div style="padding:10px" id="header" class="rounded">Header</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Met deze code krijg je het resultaat welke je ziet op de website
van jQuery Corners :

Wil je nu de hoeken een waarde meegeven van 10px dan voeg je de waarde {10px} aan je class. De code van een div met ronde hoeken van 10 px ziet er alsvolgt uit :

<div style="padding:10px" id="header" class="rounded {10px}">Header</div>
<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Met deze code krijg je het resultaat welke je ziet op de website
van jQuery Corners :

In deze tutorial plaats ik de Javascript regel onder de div omdat dit op toepassing is op 1 div. Indien je dit script op meerdere divs wil toepassen dan kan je gerust deze javascript regel in de head van je pagina zetten. Het gaat over deze regel :

<script>$(document).ready( function(){
  $('.rounded').corners();
});</script>

Even een korte samenvatting :

• 2 scripts downloaden.
• Javascripts in je webproject plaatsen.
• Javascript verwijzingen plaatsen.
• Class toevoegen.
• Waarde van de ronde hoeken meegeven

Op de site van site van jQuery Corners staan nog meer voorbeelden van divs, buttons, opties, enz. Zeker eens kijken zou ik zeggen.

Zelf vind ik dit een zeer makkelijk script om toe te passen zonder dat er met Photoshop moet gewerkt worden en een minimaal aan CSS.

Nog vragen? Bezoek het forum...

Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.

Copyright 2008. Web Tutorials. All rights reserved