Vorlage:Hidden

From FloraWiki - das Wiki zur Schweizer Flora
Jump to: navigation, search
[Bearbeiten] [Aktualisieren] Template-info.svg Dokumentation der Vorlage

Benutzung

Diese Vorlage zeigt in einer Infozeile („Kopf“) den ersten Vorlagen-Parameter an zusätzlich mit einem ▼ Link-Verweis auf der rechten Seite. Hier lässt sich dann weiterer Text-Inhalt aussblenden, wenn man auf ▼ drückt.

Vorlagen-Parameter

(kursiv= Pflichtparameter)

1= oder header=
Titel/Kopfzeile
2= oder content=
Inhalt der Box
style=
CSS-Formate für das Haupt-<div>
headerstyle=
CSS-Formate für Titel/Kopfzeile
contentstyle=
CSS-Formate für den verbergbaren Inhalt
contentclass=
CSS-Klasse für den verbergbaren Inhalt
toggle=
Voreinstellung rechts, abändern mit: 'left'; der Switcher mit ▼/[+]/mehr... erscheint dann links.
switcher=
eines von
plusminus[]
plusminus()
text
text: Anzeigetext
text: Anzeigetext/Verbergentext

Beispiele

Öffnen/schließen: (+) [+] ▼ …

{{Hidden|1=Titel |2=Inhalte}} ergibt…

Titel


{{Hidden|1='''Titel''' |2=Inhalte | switcher = plusminus[]}} ergibt…

[+][−]
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = plusminus()}} ergibt…

(+)(−)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text}} ergibt…

(mehr…)(weniger anzeigen)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …}} ergibt…

(anzeigen …)(weniger anzeigen)
Titel


{{Hidden|1=Titel |2=Inhalte | switcher = text: anzeigen …/verbergen}} ergibt…

(anzeigen …)(verbergen)
Titel


Tabellenzeilen können mit dem Parameter collapse = table row eingeklappt werden, jedoch muß HTML-Syntax verwendet werden:

<table class="wikitable">
<tr>
<td> 1. Zeile </td>
<td> 1. Zeile </td>
</tr>
<!-- eigenständige Tabellenzeile! -->
{{Hidden
| collapse = table row
| 1 = <td colspan="2">Titel</td>
| 2 = <td >Spalte 1</td><td >Spalte 2</td>
}}
<tr>
<td> letzte Zeile </td>
<td> letzte Zeile </td>
</tr>
</table>

ergibt…

1. Zeile 1. Zeile
Titel
letzte Zeile letzte Zeile

Ausrichtung

{{Hidden
 | toggle      = left
 | headerstyle = text-align:left;
 | 1 = Formatierung mit toggle=left und text-align:left;
 | 2 = Viel Text, viel Text…
}}

…ergibt…

Formatierung mit toggle=left und text-align:left;

Ränder/Einrückung

Wikieinrückung mit „:“

:{{Hidden
 | style       = border:1px dotted black;padding:0.25em;
 | contentstyle= border-top:1px dotted;padding:0.25em;
 | 1 = {{Logo | Typ= Tip | Höhe = 14px}} &nbsp; Titel 
 | 2 = Viel Text, viel Text…
}}

ergibt:

Tipps   Titel


{{Hidden
 | style        = margin-left:10%; margin-right:10%;border:1px solid #fcaf3e;border-radius:4px;
 | switcher     = plusminus()
 | headerstyle  = background:#fcaf3e;padding:0.25em;text-align:left;
 | contentstyle = background:#fce94f; color:blue;border:1px solid #fcaf3e;padding:0.25em;
 | 1 = „Zentriert“ mit Randangabe links-rechts
 | 2 = Viel Text, viel Text…
}}

ergibt:

(+)(−)
„Zentriert“ mit Randangabe links-rechts + runder Rahmen (moderne Browser)


Trick um Listen im einklappbaren Teil zu erzeugen

Um z.B. eine Liste innerhalb zu erzeugen, muß man in die Trickkiste greifen und für den Inhalts-Parameter 2 „leeren“ Inhalt zuerst mit <span> übergeben:

{{Hidden
 | style        = width: 50%;
 | switcher     = plusminus()
 | headerstyle  = background:#d3daed;padding:0.25em;text-align:left;
 | contentstyle = background:#f6f8fc; color:blue;border:1px solid #d3daed;padding:0.25em;
 | 1 = Titel
 | 2 = <span><!-- Trick damit erstes Listenelement funktioniert: hier kein Inhalt --></span>
* Text 1
* Text 2
* Text 3
}}

ergibt:

(+)(−)
Titel

Siehe auch

Technische Anmerkungen

Mit den optionalen Parametern switcheropen oder switcherclose lassen sich auch kleine Bilder statt Text zum Öffnen/Schließen einbinden.

Die Vorlage nutzt <div>-Elemente oder Tabellenzeilen (<tr>) mit vordefinierten CSS-Klassen in folgender Schachtelung:

div.collapsebox
  ├ div.switcher (-> floating)
  ├ div.collapsetitle
  └ div.collapsecontent

tr.collapsebox
  └ th/td
      ├ div.switcher (-> floating)
      └ div.collapsetitle
tr.collapsecontent

Wiki-Mechanismus

Normal

div.mw-collapsible[.mw-collapsed]
 └─ div.mw-collapsible-content

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


Mit anderem Klapp-Text (nur HTML 5), wobei der Klick-Schalter immer rechts bleibt.

div.mw-collapsible[.mw-collapsed] & data-expandtext="+" data-collapsetext="–"
 └─ div.mw-collapsible-content

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


Ferngesteuert

· span.mw-customtoggle-myID

div.mw-collapsible mw-collapsed id="mw-customcollapsible-myID"
 └─ div.mw-collapsible-content

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text


Mit Benutzung von data-expandtext="…" data-collapsetext="…"

Text der bleibt …

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Abhängigkeiten

CSS

.hide{ display:none; }
span.pseudolink { color:#0645AD; }
span.pseudolink:hover, span.pseudolink:focus {
  text-decoration: underline;
  cursor:pointer;
}

JavaScript

/**
 * @description: collapsible parts: div and tr → Template:Hidden
 *   may be fused later with toggleCollapse
 *   main difference: initCollapsebox() uses a switcher defined by the Wikitemplate
 *   and is not using a javascript resource title.
 *   * the only advanced feature it has: collpsible table rows
 *   * otherwise use http://www.mediawiki.org/wiki/RL/DM#jQuery.makeCollapsible
 * @requires $.resources()
 * @requires $.jl18n.en.CollapseBox_toolTipExpand, $.jl18n.en.CollapseBox_toolTipCollapse
 * @returns {Boolean}
 */
function initCollapsebox() {
  /* is nested in: div.collapsebox
                    └ div.switcher
                    └ div.collapsecontent */
  var hasSwitcher = jQuery("div.switcher .show, div.switcher .hide");
  if(hasSwitcher.length){
    jQuery.each(hasSwitcher, function(index){// add tooltip
      hasSwitcher[index].title = hasSwitcher[index].className === "show"? jQuery.resource("CollapseBox_toolTipExpand") : jQuery.resource("CollapseBox_toolTipCollapse");
    });
    jQuery("div.collapsebox div.switcher").on('click',
      function() {
        jQuery(this).nextAll("div.collapsecontent:first").slideToggle(250);
        /* $(this).toggle() does not work in live as toggle is a bind()
            therefore toggle must be bound to a different DOM element */
        jQuery(this).find(".show, .hide").toggle();
      });
    /* is in a table: tr.collapsebox
                        └ div.switcher
                      tr.collapsecontent */
    jQuery("tr.collapsebox div.switcher").on('click',
      function() {
        jQuery(this).closest("tr.collapsebox").nextAll("tr.collapsecontent:first").toggle();
        jQuery(this).find(".show, .hide").toggle();
      });
    // TODO is a better generic check possible?
    if (mw.config.get('wgPageName') === "Spezial:Suche") {
      if (!$(".mw-search-results").length) {
        // open box with additional search possibilities
        $(".switcher .show").trigger('click');
      }
    }
    return true;
  }
  return false;
}// END initCollapsebox()