Tipps & Tricks - Schaltflächenbilder beim Ein- und Ausblenden von Gruppierungen
In diesem Beitrag wird gezeigt, wie ein selbst erstellter Applikationsstyle bei
Schaltflächen mit dem Typ "Text" für das
Ein- und Ausblenden von Gruppierungen verwendet werden kann. Abhängig davon, ob die Gruppierung
aktuell ein- oder ausgeblendet ist, zeigt der Schaltflächen-Link dann im Browser unterschiedliche
Bilder an.
Applikation erstellen
Erstellen Sie im Modul
Applikationen
eine
neue Applikation
mit der Vorlage
Basisapplikation.
Gruppieren Sie alle Elemente auf der Seite "Alle Einträge".
Erstellen Sie eine neue
Schaltfläche mit dem Titel "Ein-/Ausblenden".
Wechseln Sie auf den
Reiter "Aktionen" und
wählen Sie dort die Aktion "Ein-/Ausblenden" aus. Die Gruppierung sollte hier schon
automatisch ausgewählt sein. Die Schaltfläche wird mit Klick auf "OK" erstellt.
Über das
Hauptmenü "Bearbeiten / Layout bearbeiten / Layout bearbeiten"
kann nun ein neuer Style für die Schaltfläche erstellt werden.
Unterhalb von "OK Schaltflächen" finden Sie weitere Styles, die Sie ggfs. erst einblenden müssen, indem Sie auf den

Pfeil links daneben klicken. Markieren Sie dort den Eintrag "Link" und
wählen Sie dann das
Menü "Bearbeiten / Kontrollelement
hinzufügen".
Tragen Sie hier als Klasse und Titel "ViewHideButton" ein und klicken Sie "OK".
Markieren Sie den Eintrag "ViewHideButton" und wählen Sie dann das
Menü "Bearbeiten / CSS-Regel
hinzufügen".
Tragen Sie hier den Selektor
.ViewHideButton, .ViewHideButton:link[aria-expanded="false"]
und den Titel "ViewHideButtonExpandedFalse" ein. Klicken Sie "OK". Markieren Sie den neuen Eintrag
"ViewHideButtonExpandedFalse".
In den
Element-Einstellungen rechts im Bild
kann nun das CSS bearbeitet werden. Klicken Sie unten auf
"Stile" und
wählen Sie im oberen Bereich
"CSS Eigenschaften im Editor anzeigen" aus.
Tragen Sie
hier das folgende CSS ein:
.ViewHideButton,
.ViewHideButton:link[aria-expanded="false"]
{
vertical-align: middle;
padding: 2px 0 2px 20px;
background-attachment: scroll;
text-align: left;
font-style: normal;
font-size: 11px;
background-repeat: no-repeat;
background-image: url(../../../images/assets/common/size-toggle-2.png);
background-position: left;
}
Speichern Sie das CSS und klicken Sie dann auf "OK".
Auf demselben Weg muss nun noch eine zweite CSS-Regel mit dem Selektor
.ViewHideButton, .ViewHideButton:link[aria-expanded="true"]
und dem Titel "ViewHideButtonExpandedTrue" erstellt werden.
Tragen Sie für diese zweite Regel das folgende CSS ein:
.ViewHideButton,
.ViewHideButton:link[aria-expanded="true"]
{
vertical-align: middle;
padding: 2px 0 2px 20px;
background-attachment: scroll;
text-align: left;
font-style: normal;
font-size: 11px;
background-repeat: no-repeat;
background-image: url(../../../images/assets/common/size-toggle-1.png);
background-position: left;
}
Speichern Sie das CSS und klicken Sie dann auf "OK".
Nun kann der neue Style im
Eigenschaftendialog der
Schaltfläche auf dem
Reiter Ansicht
zugeordnet werden. Klicken Sie dazu auf

"Styleklasse bearbeiten".
Wählen Sie hier als Layout "[Applikation]" und dann den soeben erstellten Style "ViewHideButton" aus.
Schließen Sie alle Dialoge mit Klick auf "OK" und veröffentlichen Sie die Applikation.
Hier das Ergebnis im Browser:
Gruppierung eingeblendet
Gruppierung ausgeblendet