Vorlage:Character images tabs

From FloraWiki - das Wiki zur Schweizer Flora
Jump to: navigation, search

Komplexe Piktogramm-Bilder-Darstellung für in verschiedene Merkmale gruppierte Bilderserien.

Nutzung

Die Vorlage besteht aus verschachtelten Tabs

  • Kopf-Tabs („header“, Merkmalspiktogramme) und
  • Bilder-Tabs

Die zu zeigenden Bilder müssen immer als ungeordnete Liste (beginnend mit einem Stern *) angegeben werden. Optionaler Bildertext wird durch // abgetrennt. Beispiel:

{{Character images tabs
|character headers unordered list=
* File:Twemoji 1f33f.svg // Blätter
* File:Sunflower clip art.svg // Blüten
* File:Pear icon.png // Früchte
* File:Acer-pseudoplatanus-terminal-bud (Sten Porse, 2006.03.29) transparent.png // Knospen
* File:Albero (by emilie.rollandin 2011-11-01, openclipart.org).svg // Baum
|character 1 unordered list=
* File:Acer pseudoplatanus Blatt-SRothbauer.png // (Foto: Frank Vincentz)
* File:Acer pseudoplatanus 01 SiegfriedKehl.JPG
* File:Acer pseudoplatanus JuliaKruse 1.jpg  // (Foto: Julia Kruse)
|character 2 unordered list=* File:Acer pseudoplatanus JuliaKruse 2.jpg // (Foto: Julia Kruse)
|character 3 unordered list=* File:Acer pseudoplatanus single fruit modified commons image JR Press.jpg // Frucht (Foto: JR Press)
|character 5 unordered list=* File:Acer pseudoplatanus JuliaKruse 4.jpg // (Foto: Julia Kruse)
}}
  • Acer pseudoplatanus Blatt-SRothbauer.png
  • Acer pseudoplatanus 01 SiegfriedKehl.JPG
  • Acer pseudoplatanus JuliaKruse 1.jpg
(Foto: Frank Vincentz)
(Foto: Frank Vincentz)
(Foto: Julia Kruse)
(Foto: Julia Kruse)
  • Acer pseudoplatanus JuliaKruse 2.jpg
(Foto: Julia Kruse)
(Foto: Julia Kruse)
  • Acer pseudoplatanus single fruit modified commons image JR Press.jpg
Frucht (Foto: JR Press)
Frucht (Foto: JR Press)
No images
  • Acer pseudoplatanus JuliaKruse 4.jpg
(Foto: Julia Kruse)
(Foto: Julia Kruse)
Blätter Blätter

Blüten Blüten

Früchte Früchte

Knospen Knospen
No images
Baum Baum

Für das Ausdrucken werden die Tabs ausgeblendet und eine Standard Gallery mit 280px-breiten Bildern wird eingeblendet (siehe CSS). Leere Merkmale werden im Druck ausgeblendet.

Parameter

character headers unordered list= 
Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 1 unordered list= 
für Merkmal-Tab 1 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 2 unordered list= 
für Merkmal-Tab 2 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 3 unordered list= 
für Merkmal-Tab 3 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 4 unordered list= 
für Merkmal-Tab 4 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 5 unordered list= 
für Merkmal-Tab 5 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 6 unordered list= 
für Merkmal-Tab 6 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 7 unordered list= 
für Merkmal-Tab 7 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 8 unordered list= 
für Merkmal-Tab 8 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 9 unordered list= 
für Merkmal-Tab 9 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung
character 10 unordered list= 
für Merkmal-Tab 10 eine Wiki unsortierte Liste beginnend mit
* Datei:Bilddatei1.jpg
* Datei:Bilddatei2.jpg // optionale Beschriftung

Technische Abhängigkeiten

JavaScript

/**
 * @description: Get jQuery ui tabs loaded for characters displayed as nested ui tabs
 * @requires: jquery.ui.tabs
 * @requires: template:Character_images_tabs
 * @returns {undefined}
 */
window.init_character_ui_tabs = function () {
  var character_ui_tabs_nested=$('#character_ui_tabs_nested');
  if (character_ui_tabs_nested.length) {
    mw.loader.using('jquery.ui.tabs', function () {
      var ui_version =$.ui.version.split('.').map(function(x) { return parseInt(x, 10); })
       , first_tab_index =  character_ui_tabs_nested.find('li').index(
              character_ui_tabs_nested.find('li').not('.no-image-content').first()
            );
      if (ui_version[0] <= 1 
        && ui_version[1] < 10) {
        character_ui_tabs_nested.tabs({
          fx: [{opacity:'toggle', duration: 'slow'}, {opacity:'toggle', duration: 'slow'}],
          active: first_tab_index
        });
        character_ui_tabs_nested.find('.inner-tabs-container').tabs({
          fx: [{opacity:'toggle', duration: 'slow'}, {opacity:'toggle', duration: 'slow'}]
        });
      } else {
        character_ui_tabs_nested.tabs({
          hide: {effect: 'fadeOut', duration: 'slow'},
          show: {effect: 'fadeIn', duration: 'slow'},
          heightStyle: 'auto',
          active: first_tab_index
        });
        character_ui_tabs_nested.find('.inner-tabs-container').tabs({
          hide: {effect: 'fadeOut', duration: 'slow'},
          show: {effect: 'fadeIn', duration: 'slow'},
          heightStyle: 'auto'
        });
      }
    });
  }
};
$(document).ready(function() {
  switch(mw.config.get( 'wgAction' )) {
    case "edit":
    case "view":
    case "submit": /* does not work somehow in MW. 1.20.7 */
    init_character_ui_tabs();
  }
});

CSS

/* MediaWiki:Print.css */
.noprint { display:none}
/* MediaWiki:Common.css */
@media screen, handheld, projection{
 *.printonly {display:none;}
} 

/* template:Character_images_tabs START */
.custom-ui-tabs-sober {
  background:white!important;
  border: none!important;
}
.custom-ui-tabs-sober > .ui-widget-header {
  background: white!important;
  border: none!important;
  border-bottom: 1px solid #c0c0c0!important;
  -moz-border-radius: 0px!important;
  -webkit-border-radius: 0px!important;
  border-radius: 0px!important;
}
.custom-ui-tabs-sober  > .ui-tabs-nav .ui-state-default {
  background: white!important;
  border: none!important;
}
.custom-ui-tabs-sober  > .ui-tabs-nav .ui-state-active {
  background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR42mNgGAWjgAA4cODAfxAmWzMMkGwIsmaSDcGmmWhD8GkmaAgxmnEaQopmDEPI0YxsCABrFhMgEiBgxwAAAABJRU5ErkJggg==") no-repeat bottom center!important;
  border: none!important;
}
.custom-ui-tabs-sober > .ui-tabs-nav .ui-state-default a {
  color: #c0c0c0!important;
}
.custom-ui-tabs-sober > .ui-tabs-nav .ui-state-active a {
  color: #459e00!important;
}
 
 
.custom-ui-tabs-nohdr { 
  padding: 0px!important; 
  background: none!important; 
  border-width: 0px!important; 
} 
.custom-ui-tabs-nohdr > .ui-tabs-nav { 
  padding-left: 0px!important; 
  background: transparent!important; 
  border-width: 0px 0px 1px 0px!important; 
  -moz-border-radius: 0px!important; 
  -webkit-border-radius: 0px!important; 
  border-radius: 0px!important; 
} 
.custom-ui-tabs-nohdr > .ui-tabs-panel {
  background: #f5f3e5 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAANUlEQVQYld2PMQoAIBDDQv//XKcbjIN4PxDEJYSSpVQNA/AZlIDENpS4bbZJdJ64twcu3MIC3g8dk2ON1B0AAAAASUVORK5CYII=") repeat-x scroll 50% top !important; 
  border-width: 0px 1px 1px 1px!important; 
}
 
.custom-ui-tabs-center > .ui-tabs-nav { 
  height: 52px!important;
  text-align: center!important; 
  margin-bottom: 0px !important;
} 
.custom-ui-tabs-center > .ui-tabs-nav li { 
  display: inline-block!important; 
  float: none!important; 
/*  top: 0px!important; 
  margin: 0em!important; 
  padding-bottom: 0px!important; */
}
/* template:Character_images_tabs END */