Kies Invoegen > Spry > Inklapbaar Spry-paneel.
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 inklapbaar-deelvensterwidget
Een inklapbaar-deelvensterwidget is een deelvenster dat inhoud opslaat op een vrij beperkte ruimte. Gebruikers kunnen de inhoud in het inklapbare paneel verbergen of weergeven door op de tab van de widget te klikken. In het volgende voorbeeld ziet u een inklapbaar-deelvensterwidget, opengeklapt en dichtgeklapt:
A. Uitgevouwen B. Samengevouwen
De HTML voor de inklapbaar-deelvensterwidget bestaat uit een buitenste div-tag die de div-tag voor de inhoud en de div-tag voor de tabcontainer bevat. De HTML voor de inklapbaar-deelvensterwidget bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van het inklapbare paneel.
Voor een uitvoerige uitleg van de werking van de inklapbaar-deelvensterwidget, waaronder een volledige anatomie van de code van de inklapbaar-deelvensterwidget, gaat u naar www.adobe.com/go/learn_dw_sprycollapsiblepanel_nl.
De inklapbaar-deelvensterwidget invoegen en bewerken
De inklapbaar-deelvensterwidget invoegen
Opmerking:
U kunt een inklapbaar-deelvensterwidget ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.
Het inklapbare paneel openen of sluiten in de ontwerpweergave
-
Voer een van de volgende handelingen uit:
Plaats de muisaanwijzer in de ontwerpweergave boven de tab van het paneel en klik op het oogpictogram dat rechts van de tab wordt weergegeven.
Selecteer een inklapbaar-deelvensterwidget in het documentvenster en kies Geopend of Gesloten in het pop-upmenu Weergave in de eigenschappencontrole (Venster > Eigenschappen).
De standaardtoestand van een inklapbaar-deelvensterwidget instellen
U kunt instellen welke toestand (geopend of gesloten) een inklapbaar-deelvensterwidget standaard heeft wanneer de webpagina in een browser wordt geopend.
-
Selecteer een inklapbaar-deelvensterwidget in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer Geopend of Gesloten in het pop-upmenu Standaardtoestand.
Animatie voor de inklapbaar-deelvensterwidget in- of uitschakelen
Wanneer u animatie voor een inklapbaar-deelvensterwidget inschakelt, wordt het deelvenster standaard geleidelijk en in een vloeiende beweging geopend en gesloten wanneer de bezoeker op de paneeltab klikt. Als u animatie uitschakelt, wordt het inklapbare paneel abrupt open- en dichtgeklapt.
-
Selecteer een inklapbaar-deelvensterwidget in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en schakel Animatie inschakelen in of uit.
De inklapbaar-deelvensterwidget aanpassen
Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een inklapbaar-deelvensterwidget kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget Inklapbaar deelvenster wijzigen en een inklapbaar deelvenster maken dat 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 kleur van de widget Inklapbaar deelvenster.
Voor een geavanceerdere lijst met opmaaktaken gaat u naar www.adobe.com/go/learn_dw_sprycollapsiblepanel_custom_nl.
Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryCollapsiblePanel.css. Dreamweaver slaat het bestand SpryCollapsiblePanel.css in de map SpryAssets van uw site op wanneer u een widget Inklapbaar Spry-deelvenster maakt. Dit bestand bevat ook nuttige informatie over diverse stijlen die u op de widget kunt toepassen.
Opmerking:
Hoewel u de regels voor de inklapbaar-deelvensterwidget gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van een inklapbaar paneel 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 inklapbaar-deelvensterwidget
U kunt de tekst van een inklapbaar-deelvensterwidget opmaken door eigenschappen in te stellen voor de gehele inklapbaar-deelvenstercontainer of voor de componenten van de specifieke widget.
-
Als u de tekstopmaak van een inklapbaar-deelvensterwidget 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 stijl
Relevante CSS-regel
Voorbeeld van toe te voegen of te wijzigen eigenschappen en waarden
Tekst in het gehele inklapbare deelvenster
.CollapsiblePanel font: Arial; font-size:medium;
Alleen tekst op de deelvenstertab
.CollapsiblePanelTab font: bold 0.7em sans-serif; (Dit is de standaardwaarde)
Alleen tekst in het deelvenster met inhoud
.CollapsiblePanelContent font: Arial; font-size:medium;
De achtergrondkleur wijzigen van een inklapbaar-deelvensterwidget
-
Als u de achtergrondkleuren van verschillende delen van een inklapbaar-deelvensterwidget wilt wijzigen, gebruikt u de volgende tabel om de desbetreffende CSS-regel op te zoeken. Daarna voegt u eigenschappen en waarden voor de gewenste achtergrondkleur toe of wijzigt u deze:
Te wijzigen kleur
Relevante CSS-regel
Voorbeeld van toe te voegen of te wijzigen eigenschap en waarde
Achtergrondkleur van deelvenstertab
.CollapsiblePanelTab background-color: #DDD; (Dit is de standaardwaarde)
Achtergrondkleur van deelvenster met inhoud
.CollapsiblePanelContent background-color: #DDD;
Achtergrondkleur van tab wanneer deelvenster is geopend
.CollapsiblePanelOpen .CollapsiblePanelTab background-color: #EEE; (Dit is de standaardwaarde)
Achtergrondkleur van geopende deelvenstertab wanneer de muisaanwijzer eroverheen beweegt
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover background-color: #CCC; (Dit is de standaardwaarde.)
De breedte van een inklapbaar paneel beperken
Standaard wordt de inklapbaar-deelvensterwidget opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen. U kunt de breedte van een inklapbaar-deelvensterwidget echter beperken door een breedte-eigenschap voor de inklapbaar-deelvenstercontainer in te stellen.
-
Zoek de CSS-regel .CollapsiblePanel op door het bestand SpryCollapsible Panel.css te openen. Deze regel definieert eigenschappen voor het hoofdcontainerelement van de inklapbaar-deelvensterwidget.Opmerking:
U vindt de regel ook door de inklapbaar-deelvensterwidget 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;.
