Kies Invoegen > Spry > Spry-deelvensters met tabs.
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 widget deelvensters met tabs
Een widget deelvensters met tabs is een reeks panelen die inhoud opslaat op een vrij beperkte ruimte. Sitebezoekers kunnen de inhoud in de deelvensters met tabs verbergen of weergeven door op de tab te klikken van het paneel dat ze willen bekijken. De deelvensters van de widget worden geopend naarmate de bezoeker op de verschillende tabs klikt. In een widget deelvensters met tabs is maar één deelvenster tegelijk geopend. In het volgende voorbeeld ziet u een widget deelvensters met tabs, waarvan het derde deelvenster is geopend:
A. Tab B. Inhoud C. Widget deelvensters met tabs D. Paneel met tabs
De HTML-code voor de widget deelvensters met tabs bestaat uit een buitenste div-tag die alle panelen bevat, een lijst voor de tabs, een div-tag voor de inhoudspanelen en een div-tag voor elk inhoudspaneel. De HTML voor de widget deelvensters met tabs bevat eveneens script-tags in de kop van het document en na de HTML-opmaak van de widget deelvensters met tabs.
Voor een uitvoerige uitleg van de werking van de widget deelvensters met tabs, waaronder een volledige anatomie van de code van de widget deelvensters met tabs, gaat u naar www.adobe.com/go/learn_dw_sprytabbedpanels_nl.
De widget deelvensters met tabs invoegen en bewerken
De widget deelvensters met tabs invoegen
Opmerking:
U kunt een widget deelvensters met tabs ook invoegen met behulp van de categorie Spry in het deelvenster Invoegen.
Een paneel toevoegen aan de widget deelvensters met tabs
-
Selecteer een widget deelvensters met tabs in het documentvenster.
-
Klik op de plusknop (+) Panelen in de eigenschappencontrole (Venster > Eigenschappen).
-
(Optioneel) Verander de tabnaam door in de ontwerpweergave de tekst van de tab te selecteren en deze te wijzigen.
Een deelvenster verwijderen uit een widget deelvensters met tabs
-
Selecteer een widget deelvensters met tabs 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 dat u in de ontwerpweergave wilt openen, en klik op het oogpictogram dat rechts van de tab wordt weergegeven.
Selecteer een widget Deelvensters met tabs in het documentvenster en klik in het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen) op de naam van het deelvenster dat u wilt bewerken.
De volgorde van panelen wijzigen
-
Selecteer een widget deelvensters met tabs in het documentvenster.
-
Open het menu Panelen van de eigenschappencontrole (Venster > Eigenschappen) en selecteer de naam van het paneel dat u wilt verplaatsen.
-
Klik op de pijlen omhoog of omlaag om het paneel omhoog of omlaag te verplaatsen.
Het standaard geopende paneel instellen
U kunt instellen welk deelvenster van de widget deelvensters met tabs standaard is geopend wanneer de pagina in een browser wordt geopend.
-
Selecteer een widget deelvensters met tabs in het documentvenster.
-
Ga naar de eigenschappencontrole (Venster > Eigenschappen) en selecteer het paneel dat u standaard wilt openen in het pop-upmenu Standaardpaneel.
De widget deelvensters met tabs aanpassen
Hoewel u vanuit de eigenschappencontrole eenvoudige bewerkingen in een widget deelvensters met tabs kunt uitvoeren, worden aangepaste opmaaktaken niet ondersteund. U kunt de CSS-regels voor de widget Deelvensters met tabs wijzigen en een widget 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 widget Deelvensters met tabs.
Voor een geavanceerdere lijst met opmaaktaken gaat u naar www.adobe.com/go/learn_dw_sprytabbedpanels_custom_nl.
Alle CSS-regels in de volgende onderwerpen verwijzen naar de standaardregels in het bestand SpryTabbedPanels.css. Dreamweaver slaat het bestand SpryTabbedPanels.css in de map SpryAssets van uw site op wanneer u een widget Spry-deelvensters met tabs maakt. Dit bestand bevat ook nuttige informatie over diverse stijlen die u op de widget kunt toepassen.
Opmerking:
Hoewel u de regels voor de widget deelvensters met tabs gemakkelijk rechtstreeks in het bijbehorende CSS-bestand kunt bewerken, kunt u ook het deelvenster CSS-stijlen gebruiken om de CSS van de widget 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 de widget deelvensters met tabs
U kunt de tekst van een widget deelvensters met tabs opmaken door eigenschappen in te stellen voor de gehele objectcontainer met deelvensters met tabs of voor de componenten van de specifieke widget.
-
Als u de tekstopmaak van een widget deelvensters met tabs 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 hele widget
.TabbedPanels font: Arial; font-size:medium;
Tekst op de deelvenstertabs
.TabbedPanelsTabGroup of .TabbedPanelsTab font: Arial; font-size:medium;
Alleen tekst in deelvensters met inhoud
.TabbedPanelsContentGroup of .TabbedPanelsContent font: Arial; font-size:medium;
De achtergrondkleur wijzigen van een widget deelvensters met tabs
-
Als u de achtergrondkleuren van verschillende delen van een widget deelvensters met tabs 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 deelvenstertabs
.TabbedPanelsTabGroup of .TabbedPanelsTab background-color: #DDD; (Dit is de standaardwaarde)
Achtergrondkleur van deelvensters met inhoud
.Tabbed PanelsContentGroup of .TabbedPanelsContent background-color: #EEE; (Dit is de standaardwaarde)
Achtergrondkleur van geselecteerde tab
.TabbedPanelsTabSelected background-color: #EEE; (Dit is de standaardwaarde)
Achtergrondkleur van deelvenstertabs wanneer de muisaanwijzer eroverheen beweegt
.TabbedPanelsTabHover background-color: #CCC; (Dit is de standaardwaarde.)
De breedte van deelvensters met tabs beperken
Standaard wordt de widget deelvensters met tabs opengeklapt zodat de beschikbare ruimte geheel in beslag wordt genomen. U kunt de breedte van een widget deelvensters met tabs echter beperken door een breedte-eigenschap voor de container in te stellen.
-
Zoek de CSS-regel .TabbedPanels door het bestand SpryTabbedPanels.css te openen. Deze regel definieert eigenschappen voor het hoofdcontainerelement van de widget Deelvensters met tabs.Opmerking:
U vindt de regel ook door de widget deelvensters met tabs 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;.
