Werken met de Spry-widget Accordeon

Zoeken

Laatst bijgewerkt op 2 mei 2021

Opmerking:

In Dreamweaver CC en hoger zijn Spry-widgets vervangen door jQuery-widgets. U kunt de bestaande Spry-widgets op uw pagina nog steeds wijzigen, maar u kunt geen nieuwe Spry-widgets toevoegen.

Over de accordeonwidget

Een accordeonwidget is een reeks inklapbare panelen die een grote hoeveelheid inhoud op een beperkte ruimte kunnen opslaan. Sitebezoekers kunnen de inhoud in de accordeon verbergen of weergeven door op de paneeltab te klikken. De panelen van de accordeon worden open- of dichtgeklapt al naargelang de bezoeker op de diverse tabs klikt. In een accordeon is slechts één inhoudspaneel tegelijk geopend en zichtbaar. In het volgende voorbeeld ziet u een accordeonwidget waarvan het eerste paneel is opengeklapt:

A. Tabblad in accordeonpaneel B. Inhoud van accordeonpaneel C. Accordeonpaneel (geopend)

De standaard-HTML voor de accordeonwidget bestaat uit een buitenste div-tag die alle panelen bevat, een div-tag voor elk paneel, en een kop-div en inhouds-div in de tag voor elk paneel. Een accordeonwidget kan een willekeurig aantal afzonderlijke panelen bevatten. De HTML voor de accordeonwidget bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de accordeon.

Voor een uitvoerige uitleg van de werking van de accordeonwidget, waaronder een volledige anatomie van de code van de accordeonwidget, gaat u naar www.adobe.com/go/learn_dw_spryaccordion_nl.

Een zelfstudie over werken met de accordeonwidget vindt u op www.adobe.com/go/vid0167_nl.

De accordeonwidget invoegen en bewerken

Over de accordeonwidget

Kies Invoegen > Spry > Spry-accordeon.

Opmerking:

U kunt een accordeonwidget ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.

Een paneel toevoegen aan een accordeonwidget

Selecteer een accordeonwidget in het documentvenster.
Klik op de plusknop (+) Panelen in de eigenschappencontrole (Venster > Eigenschappen).
(Optioneel) Verander de naam van het paneel door in de ontwerpweergave de tekst van het paneel te selecteren en vervolgens te wijzigen.

Een paneel verwijderen uit een accordeonwidget

Selecteer een accordeonwidget in het documentvenster.
Open het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen), selecteer de naam van het paneel dat u wilt verwijderen en klik op de minknop (-).

Een paneel openen voor bewerken

Voer een van de volgende handelingen uit:
- Plaats de muisaanwijzer boven de tab van het paneel om het in de ontwerpweergave te openen, en klik op het oogpictogram dat rechts van de tab wordt weergegeven.
- Selecteer een accordeonwidget in het documentvenster en klik in het menu Deelvensters van de eigenschappencontrole (Venster > Eigenschappen) op de naam van het deelvenster dat u wilt bewerken.

De volgorde van panelen wijzigen

Selecteer een accordeonwidget in het documentvenster.
Selecteer in de eigenschappencontrole (Venster > Eigenschappen) de naam van het accordeonpaneel dat u wilt verplaatsen.
Klik op de pijlen omhoog of omlaag om het paneel omhoog of omlaag te verplaatsen.

De accordeonwidget aanpassen

Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een accordeonwidget kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de accordeonwidget wijzigen en een accordeon maken die naar uw eigen smaak is opgemaakt.

Raadpleeg het artikel Quick guide to styling Spry tabbed panels, accordions, and collapsible panels van David Powers voor informatie over het wijzigen van de kleuren van de accordeonwidget.

Voor een geavanceerdere lijst met opmaaktaken gaat u naar www.adobe.com/go/learn_dw_spryaccordion_custom_nl.

Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryAccordion.css. Dreamweaver slaat het bestand SpryAccordion.css in de map SpryAssets van uw site op wanneer u een widget Spry-accordeon maakt. Dit bestand bevat ook informatie met commentaar over diverse stijlen die van toepassing zijn op de widget, dus misschien kunt u ook dit bestand bekijken.

Opmerking:

Hoewel u de regels voor de accordeonwidget gemakkelijk rechtstreeks in het CSS-bestand kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van een accordeon te bewerken. Het deelvenster CSS-stijlen is handig om de CSS-klassen te zoeken die aan de verschillende onderdelen van dee widget zijn toegewezen, met name als u de modus Huidig van het paneel gebruikt.

Tekst opmaken van accordeonwidget

U kunt de tekst van een accordeonwidget opmaken door eigenschappen in te stellen voor de gehele accordeoncontainer of voor de componenten van de specifieke widget.

Als u de tekstopmaak van een accordeonwidget wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna voegt u uw eigen tekstopmaakeigenschappen en -waarden toe:

Te wijzigen tekst	Relevante CSS-regel	Voorbeeld van toe te voegen eigenschappen en waarden
Tekst in de gehele accordeon (inclusief tabblad en deelvenster met inhoud)	.Accordion of .AccordionPanel	font: Arial; font-size:medium;
Alleen tekst op tabbladen in het deelvenster Accordeon	.AccordionPanelTab	font: Arial; font-size:medium;
Alleen tekst in deelvensters met inhoud van accordeon	.AccordionPanelContent	font: Arial; font-size:medium;

De achtergrondkleur wijzigen van accordeonwidget

Als u de achtergrondkleuren van verschillende delen van een accordeonwidget wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna voegt u eigenschappen en waarden voor de achtergrondkleur toe of wijzigt u deze:

Te wijzigen deel van widget	Relevante CSS-regel	Voorbeeld van toe te voegen of te wijzigen eigenschap en waarde
Achtergrondkleur van tabbladen in het deelvenster Accordeon	.AccordionPanelTab	background-color: #CCCCCC; (Dit is de standaardwaarde)
Achtergrondkleur van deelvensters met inhoud van accordeon	.AccordionPanelContent	background-color: #CCCCCC;
Achtergrondkleur van geopend deelvenster Accordeon	.AccordionPanelOpen .AccordionPanelTab	background-color: #EEEEEE; (Dit is de standaardwaarde)
Achtergrondkleur van tabbladen met deelvensters bij aanwijzen	.AccordionPanelTabHover	color: #555555; (Dit is de standaardwaarde.)
Achtergrondkleur van geopend tabblad op deelvenster bij aanwijzen	.AccordionPanelOpen .AccordionPanelTabHover	color: #555555; (Dit is de standaardwaarde.)

De breedte van een accordeon beperken

Standaard wordt de accordeonwidget opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen. U kunt de breedte van een accordeonwidget echter beperken door een breedte-eigenschap voor de accordeoncontainer in te stellen.

Zoek de CSS-regel .Accordion door het bestand SpryAccordion.css te openen. Dit is de regel die eigenschappen definieert voor het hoofdcontainerelement van de accordeonwidget.

Opmerking:

U vindt de regel ook door de accordeonwidget te selecteren en het deelvenster CSS-stijlen te bekijken (Venster > CSS-stijlen). Zorg ervoor dat het paneel is ingesteld op de modus Huidig.
Voeg een eigenschap en een waarde voor de breedte aan de regel toe, bijvoorbeeld width: 300px;.