1. Drag&drop met jQuery. In een html-website kan ook een bezoeker
de plaats bepalen van de inhoud van de pagina, en dichtklappen wat hij/zij
minder interessant vindt. Èn het geeft een apart cachet aan de website in zijn
geheel. Een online voorbeeld, waar nog andere opties werden toegevoegd dan
in deze oefening zal besproken worden, is de site http://www.bbc.co.uk
Als je je hier graag verder in verdiept, vind je heel wat info op de site van
jQuery zelf, en tal van online-tutorials.
1. Pagina opzetten (in HTML)
Start met een nieuwe pagina voor je site. Dit kan zeer eenvoudig en snel
gebeuren door een reeds bestaande pagina te bewaren onder een andere
naam, bvb. verzameling_jquery.html, of maak van deze pagina je homepage!
(index.html)
Maak vervolgens het content-gedeelte van de pagina leeg (de container, voor
de mensen die tijdens de les hebben meegewerkt, en dus niet de wrapper
waarin de hele layout vervat zit!)
2. Kolommen maken (met div's)
In dit contentgedeelte voorzie je 3 div's, met als klasse 'kolom'. Voor alle
duidelijkheid hieronder een voorbeeld:
<div class="container">
<div class="kolom"> </div>
<div class="kolom"> </div>
<div class="kolom"> </div>
</div>
3. Widgets toevoegen
Er worden aparte div's voorzien voor elke widget, en voor elk stukje content
dus, om ze makkelijker te kunnen hanteren. Zet een aantal div's met klasse
'widget' (of een andere naam) in de drie kolommen.
<div class="container">
<div class="kolom">
<div class="widget">
<h3>Widget 1</h3>
<p> Inhoud voor de widget </p>
</div>
<div class="widget">
<h3>Widget 2</h3>
<p> Inhoud voor de widget </p>
</div>
</div>
<div class="kolom">
<div class="widget">
<h3>Widget 2</h3>
enz...
4. Content toevoegen
Vervolgens vul je elke widget op met inhoud, gerelateerd aan jouw onderwerp.
Zorg voor een mooi geheel en genoeg diversiteit in de soorten content voor
2. elke widget, zodat de pagina uitnodigt tot aanklikken, verslepen, ..
5. Stijl geven (met CSS)
In de css-file ga je vervolgens de kolommen en de widgets opmaken. Geef de
kolommen een goeie breedte en tussenruimte, zodat ze mooi in de pagina
passen.
(Je kan eventueel een nieuwe css-regel maken voor een container met een
andere id, om de layout van deze pagina te optimaliseren.)
.kolom {
width: 275px;
padding: 8px;
margin-left: 25px;
float: left;
}
Het is ook mogelijk om elke widget zijn widgetklasse én een uniek id te geven:
zo kan je in elke widget een layout voorzien die best past bij de inhoud ervan..
6. jQuery UI downloaden
Om de drag-&-drop (van de widgets) voor mekaar te krijgen, maken we gebruik
van Javascript. jQuery UI, een extensie van de jQuery bibliotheek, voegt extra
effecten en functionaliteit toe. Download het framework op http://jqueryui.com.
Voor deze oefening heb je enkel UI Core en Interactions nodig.
7. Scripts invoegen (in head van html - file)
Eénmaal de download klaar is, plaats je de .js files mee in de map 'js' van jouw
lokale rootfolder. Zo kunnen deze files op een correcte manier aangeroepen
worden in de head van de html-pagina.
<script src="js/jquery-1.3.2.min.js" type="text/javascript" ></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/
javascript"></script>
8. Basisinteractie
Als alles voorzien is, kan het invoeren van de functionaliteit gebeuren, door
script te plaatsen onder de 2 script-tags. De drag-and-drop functionaliteit wordt
verkregen door het UI-Sortable gedrag van jQuery UI met volgende code:
<script type="text/javascript">
$(document).ready(function(){
$(".kolom").sortable({
connectWith: '.kolom'
});
});
</script>
9. Debugging
Als je de pagina nu bekijkt in een browser, kan je de widgets al verplaatsen. Er
is nog wel een probleem: wanneer een kolom leeg geraakt, zullen de andere
kolommen verplaatsen. Dit kan je oplossen door de volgende code toe te
voegen aan de css-regels van de .kolom klasse:
3. min-height: 300px;
height: 100%;
10. Verfijnen
Als er op een link geklikt wordt in de tekst van de widget, kan dit ook het
verslepen van de widget als ongewenst neveneffect hebben. Om dit op te
lossen, wordt een specifiek deel van de widget aangeduid waarmee je kan
slepen. Hier is gekozen voor de <h3> tag, die in elke widget terug te vinden is.
Voeg een regel code toe aan het javascript:
<script type="text/javascript">
$(document).ready(function(){
$(".kolom").sortable({
connectWith: '.kolom',
handle: 'h3'
});
});
</script>
11. Transparantie toevoegen
Om de widget gebruiksvriendelijker te maken, kan de transparantie aangepast
worden tijdens het verslepen. Zo ziet de gebruiker beter waar hij/zij de widget
zal plaatsen. Voeg hiervoor nog een optie toe, onder de regel code van zonet.
Vergeet niet van een komma te zetten achter de voorgaande optie voor je deze
regel toevoegt!
opacity: 0.2
12. Meer functionaliteit
Nog een andere optie is dat de widget ook dichtgeklapt kan worden, om meer
ruimte te geven aan de content die de bezoeker verkiest. Hier maken we
gebruik van code uit de standaard jQuery bibliotheek ipv uit de jQuery UI.
>> element toevoegen
Eerst een knop voorzien waarop geklikt kan worden om de widget te laten
dichtklappen. Dit kan eenvoudigweg door op run-time een div te koppelen aan
elke widget, waarvan het uitzicht verder bepaald kan worden via css.
<script type="text/javascript">
$(document).ready(function(){
$(".kolom").sortable({
connectWith: '.kolom',
handle: 'h3',
opacity: 0.2,
});
$(".widget").append('<div class="close"></div>');
});
</script>
4. CSS:
.widget .close {
width: 16px;
height: 16px;
background-color:#FFF;
position: absolute;
top: 3px;
right: 8px;
cursor: pointer;
}
13. Inklappen..
De div met klasse 'close' krijgt een gedrag toegewezen, dat het script laat
weten dat de widget in hoogte beperkt moet worden wanneer men op de div
klikt. Om het openen van de widget nadien gemakkelijker te maken, wordt
met de data functie van jQuery de status (open/dicht) en de originele hoogte
van de widget opgeslagen.
<script type="text/javascript">
$(document).ready(function(){
$(".kolom").sortable({
connectWith: '.kolom',
handle: 'h3',
opacity: 0.2
});
$(".widget").append('<div class="close"></div>');
$(".close").click(function(){
if ($(this).parent().data("collapsed")=="yes"){
// paneel is al dichtgeklapt
} else {
$(this).parent().data("height",$(this).parent().height());
$(this).parent().data("collapsed","yes");
$(this).parent().animate({height:30});
}
});
});
</script>
14. ..en uitklappen die handel!
Hiervoor voeg je tot slot de volgende code toe, op de plaats waar nu staat:
// paneel is al dichtgeklapt
$(this).parent().data("collapsed","no");
$(this).parent().animate({height:$(this).parent().data("height")});
15. Testen in de courante browsers!
Het Javascript waarvoor jQuery zorgt, werkt in alle browsers, maar css
regels en layout-elementen in de html-pagina kunnen voor de nodige
problemen zorgen .. Kijk ook hoe de pagina er uitziet zonder javascript: dit
kan immers door de gebruiker uitgeschakeld worden..
