Uitklappende panelen met kwicks.js
- Home
Engels voor thuis. - Links
Arm waar bij de meeste mensen het horloge is bevestigd. - Rechts
Arm waar bij de meeste mensen het horloge niet is bevestigd. - Contact
Actie gerelateerd aan communicatie en gekwebbel. - Over ons
Wordt gebruikt op sites waarvan de eigenaar denkt iets nuttigs te kunnen melden over zichzelf.
hierboven staan vijf gedeeltelijk verborgen panelen. Als je met de muis over een paneel gaat, klapt het uit. Als je er
op klikt blijft het paneel uitgeklapt staan. Als je op een uitgeklapt paneel klikt, klapt het weer in.
Op deze bladzijde laat ik zien hoe je zoiets maakt.
- Besproken wordt:
- De oorsprong van het script
- De werking va het script (in algemene termen)
- Praktische toepassingen
- Inbouwen in je eigen site.
- De oorsprong van het script
- Het script is een jQuery-plugin, die is gemaakt door Jeremy Martin.
- De huidige versie is 2.2.1, die dateert uit 2013.
- Er wordt –voor zover mij bekend– niet meer aan ontwikkeld. Het wordt ook niet meer onderhouden, mogelijk omdat
dat niet nodig is.
- De werking van het script
- Het complete script bestaat uit wat HTML, veel CSS en jQuery (dus: JavaScript).
- De panelen staan in een ongeordende lijst <ul>. Deze heeft twee klassen: kwicks en kwicks-horizontal.
- De klasse kwicks en de lijst-items binnen kwicks kun je zelf opmaken met CSS.
- Met kwicks-horizontal geef je aan dat de panelen naast elkaar liggen. De klasse kwicks-vertical kun je ook gebruiken, dan staan de panelen boven elkaar. Het is ook mogelijk om een 'tegelpatroon' te maken door een meerdere horizontale rijen te nesten binnen een verticale rij panelen.
- In het .zip-bestand dat je van de GitHub-repository kunt downloaden zit een aantal voorbeelden die de mogelijkheden goed laten zien.
- Deze plug-in kan uitgebreid worden ingesteld voor je eigen doeleinden. De mogelijkheden worden beschreven op een afgeleide van de oorspronkelijke, verdwenen, site: github.com/Mottie/Kwicks. Dat wordt hier niet herhaald.
- Een belangrijke instelling is 'behaviour'. Die staat hier op 'menu'. Daardoor gedraagt de rij panelen zich als een soort menu. Je kunt een <a>-tag in de content van het paneel opnemen. Een onclick-eventhandler in de <li>-tag geeft zij-effecten. Dat raad ik niet aan.
- Het is niet nodig om een <ul> te gebruiken. Je kun de <ul> vervangen door een <div>
en daar een aantal <a>-tags in zetten. Dat is de handigste methode als je met kwicks.js een echt menu
wilt maken.
- Praktische toepassingen
- Ik heb op internet niet veel toepassingen gevonden. Een goede is outdatedbrowser.com.
Hier kun je de laatste versies van moderne browsers downloaden. De charme van deze site is dat deze (onder veel andere talen)
communiceert in het Nederlands.
Kijk ook eens op de site van de Amerikaandse National Parks Service. Opvallend bij beide sites is dat de panelen over de hele hoogte van het browserwindow zijn ingezet.
- Inbouwen in je eigen site
- De meeste CSS en JavaScript staat in aparte bestanden, die hoef je niet te veranderen om ze te gebruiken.
- Download de benodigde bestanden van de GitHub-repository van het Kwicks-project. Haal het gezipte bestand op (groene knop).
- Je heb alleen de bestanden jquery.kwicks.min.css en jquery.kwicks.min.js nodig, de rest kun je vergeten. De bestanden jquery.kwicks.css en jquery.kwicks.js bevatten dezelfde code, maar dan leesbaar.
- De HTML, CSS en JavaScript/jQuery die je zelf moet programmeren staan in het HTML-bestand.
- Omdat dit een jQuery-plug-in, heb je jQuery nodig. Die betrek je het beste van een CDN. In het originele script en in het voorbeeld is jQuery versie 1.9.0 gebruikt, maar elke latere versie zou moeten werken.
- Na de link naar jQuery volgt de link aan jquery.kwicks.js.
- De links naar de jQuery en de plug-in staan aan het einde van de <body>, net voor de $(document).ready-function.
- Het CSS-bestand jquery.kwicks.css link je in de <head>. Je eigen CSS komt daar achteraan.
- Van de bestanden jquery.kwicks.js en jquery.kwicks.css zijn geminificeerde versies beschikbaar. Op deze
site zijn die gebruikt. Ze laden wat sneller.
- De HTML-onderdelen hebben de klassen kwicks en (op deze pagina) kwicks-horizontal. Een en ander is opgenomen in een <div>-tag, waarmee de panelen in het document worden gepositioneerd (hier: gecentreerd als "tekst").
- De klassen kwicks en de lijst-items die daarbinnen liggen kun je naar eigen smaak opmaken. De waarde van height binnen beide blokken moet gelijk zijn. Anders kunnen er zij-effecten ontstaan waardoor de opmaak van de pagina wordt verstoord.
- Elk paneel is een lijst-item, elke met een eigen, uniek, id: panel-1, panel-2, panel-3, enz.
- De donkergroene rand om de vijf panelen is er omheen gezet om de begrenzing van het blok met de panelen aan te geven. In je eigen toepassing kun je dat natuurlijk gewoon weglaten.
Inspiratie: Webdesigner Magazine 69 (september 2014), pag. 65 en 66.
Gebruik:
- De code staat voor een klein deel in de <HEAD>.
- De meeste code staat in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="jquery.kwicks.min.css">
<style>
.kwicks {
width: 100%;
height: 80px;
border:2px solid green;
}
.kwicks > li {
height: 80px;
width: 125px;
margin-left: 5px;
float: left;
padding:10px;
box-sizing:border-box;
}
#panel-1 { background-color: teal; color: white; }
#panel-2 { background-color: #09c; }
#panel-3 { background-color: #ffdc82; }
#panel-4 { background-color: #fdd; }
#panel-5 { background-color: #ffffdd; }
</style>
(Zet dit in de <BODY>, op de plaats waar de panelen moeten verschijnen).
<div align="center">
<ul class="kwicks kwicks-horizontal">
<li id="panel-1"><b>Home</b><br>
Engels voor thuis.</li>
<li id="panel-2"><b>Links</b><br>
Arm waar bij de meeste mensen het horloge is bevestigd.</li>
<li id="panel-3"><b>Rechts</b><br>
Arm waar bij de meeste mensen het horloge niet is bevestigd.</li>
v<li id="panel-4"><b>Contact</b><br>
Actie gerelateerd aan communicatie en gekwebbel.</li>
<li id="panel-5"><b>Over ons</b><br>
Wordt gebruikt op sites waarvan de eigenaar denkt iets nuttigs
te kunnen melden over zichzelf.</li>
</ul>
</div>
(Zet dit helemaal aan het eind van de <BODY>, dus net voor de </body>-tag).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script src="jquery.kwicks.min.js"></script>
<script>
$(document).ready(function() {
$('.kwicks').kwicks({
maxSize : 250,
behavior: 'menu',
deselectOnClick: true
});
});
</script>
Opmerking:
De maker van deze plug-in gebruikt $().ready(function() { ... }) in zijn voorbeelden. Dat is geldig binnen jQuery,
maar het kan onhandig zijn. Als de pagina met de panelen in een <iframe> of in een <frame> zit,
werkt het niet. Gebruik daarom altijd $(document).ready(function() { ... }).
