Pflegetags dynamisch ein- / ausblenden

03.08.2016

HTML Elemente bzw. Pflegetags lassen sich abhängig vom Wert eines bestimmten anderen Pflegetags dynamisch ein- bzw. ausblenden.

Sowohl im Formular als auch in der Metadatenmaske wird diese Technik in der aktuellen BASE bereits eingesetzt, um Eingabefelder abhängig von den Werten anderer Felder einzublenden.

Die Dynamisierung von HTML-Elemente geschieht über folgende Data-Attribute:

  • data-weditor-dyndisplay - Über den Wert on wird die Dynamisierung aktiviert.
  • data-weditor-dyndisplay-type - Gibt an, ob das Element ein- oder ausgeblendet werden soll. Mögliche Werte sind: showif und hideif.
  • data-weditor-dyndisplay-watch - Definiert das zu überwachende Pflegetag über dessen ID. Beim Ändern dessen Wertes wird die Bedingung erneut geprüft.
  • data-weditor-dyndisplay-target - Gibt an, wie das aktuelle Element ausgeblendet werden soll. Ein einzelnes Element benötigt keinen Wert. Soll neben dem aktuellen dd-Element noch das vorangehende dt-Element ausgeblendet werden, ist der Wert row zu nutzen.
  • data-weditor-dyndisplay-condition - Hier können Sie über Javascript eine Bedingung definieren, die erfüllt werden muss, um das HTML-Element ein- bzw. auszublenden.

Zeigt die Auswahl des Bildausschnittes nur an, wenn auch ein Bild ausgewählt wurde.

<div class="wEditorExtensionLabel"><xsl:value-of select="php:functionString('wTexts::getTextUser', 'editor_page_thumbnail')"/>&#160;<span>(<xsl:value-of select="php:functionString('wTexts::getTextUser', 'editor_page_thumbnail_info')"/>)</span></div>
<div class="wEditorExtensionValue">
  <!--
web:text:start editor="file" upload="1" extensions="gif|png|jpg|jpeg" preview="picture" pathIfEmpty="/wAssets-cms/img" inputStyle="width:100%"--><xsl:value-of select="/wd:document/wd:extension/wd:meta/wd:thumbnail/@src"/><!--web:text:stop-->
</
div>
<
div class="wEditorExtensionValue" data-weditor-dyndisplay="on" data-weditor-dyndisplay-type="showif" data-weditor-dyndisplay-target="" data-weditor-dyndisplay-watch="#webtag_text_{/wd:document/wd:extension/wd:meta/wd:thumbnail/@wEditorId}_src" data-weditor-dyndisplay-condition="wDocument.element('#webtag_text_{/wd:document/wd:extension/wd:meta/wd:thumbnail//@wEditorId}_src').value != ''">                                        
  <!--
web:text:start editor="pictureArea" width="" height="" left="" top="" retainRelations="" picture="webtag_text_<xsl:value-of select="/wd:document/wd:extension/wd:meta/wd:thumbnail/@wEditorId" />_src"--><xsl:value-of select="/wd:document/wd:extension/wd:meta/wd:thumbnail/@area"/><!--web:text:stop-->
</
div>

Zeigt das Pflegetag für einene eigenen Validator im Formular an, wenn dieser Typ darüber ausgewählt wurde.

<dt><xsl:value-of select="php:functionString('wTexts::showTextUser', 'Customized validator', 'Eigener Validator')"/></dt>
<
dd data-weditor-dyndisplay="on" data-weditor-dyndisplay-type="showif" data-weditor-dyndisplay-target="row" data-weditor-dyndisplay-watch="#webtag_text_{wd:fragment[@id = 'validator']/@wEditorId}" data-weditor-dyndisplay-condition="wDocument.element('#webtag_text_{wd:fragment[@id = 'validator']/@wEditorId}').value == 'customized'"><!--web:text:start editor="input" inputStyle="font-family:courier;"--><xsl:value-of select="wd:fragment[@id = 'validatorStr']/text()"/><!--web:text:stop--></dd>