WaBis

walter.bislins.ch

Layout-Stack

Mit Hilfe des Makros LayoutStack können Seitenelement in dynamische Spalten verteilt werden. Dies kann zum Beispiel auf Startseiten oder der Homepage sinnvoll sein oder für die Aufteilung von Listen auf mehrere Spalten.

Das Makro LayoutStack erzeugt einen maximal vierspaltigen Bereich. Wenn beim Verkleinern des Fensters die Spalten schmaler als ein angebarer Minimalwert werden, so wird das Layout in zwei Spalten umgestellt und wenn auch diese zu schmal werden wird nur noch eine Spalte erstellt.

Syntax

{{LayoutStack|MinimalBreite|full|sep|Attribute}}
MinimalBreite
Muss nur beim ersten Aufruf des Makros angegeben werden. Die Breite ist eine Zahl (in Pixel). Es werden folgende MinimalBreiten unterstützt: 100, 120, 150, 180, 210. Alle anderen Werte werden auf einen dieser Werte aufgerundet. Aus 110 wird zum Beispiel 120.
full (optional)
Wenn der Layout-Stack im FullScreen Mode verwendet wird (siehe Makro: FullScreen), muss full angegeben werden, weil mit einem grösseren Bereich für den LayoutStack gerechnet werden muss.
sep (optional)
Wenn die Layout-Zellen beim untereinanderstapeln einen Abstand zueinander haben sollen, kann sep angegeben werden.
Attribute
Eine Liste von durch | getrennten CSS-Klassen und Style-Angaben für alle folgenden Spalten-Elemente (Zellen). CSS-Klassen müssen mit einem $ beginnen. Styles werden durch ; von einander getrennt. Dieser Parameter darf wiederholt werden, wenn mehrere Klassen und/oder Styles definiert werden sollen. Beachte, dass jede Spalte zusätzlich die Klassen LayoutStack4-Cell und Cell-<n> erhält, wobei <n> eine fortlaufende Nummer beginnend bei 1 ist. Diese Nummer beginnt bei jedem neuen LayoutStack-Element wieder bei 1. Siehe Html-Attribute für weitere Informationen.

Anwendung

Es müssen immer genau vier Layout-Stack Elemente definiert werden, welche jeweils durch ein LayoutStack Makro eingeschlossen und von einander getrennt sind. Also bilden immer 5 Aufrufe des Makros einen Layout-Stack.

{{LayoutStack|120}}

Element1

{{LayoutStack}}

Element2

{{LayoutStack}}

Element3

{{LayoutStack}}

Element4

{{LayoutStack}}

Wenn genügend Platz in der Horizontalen vorhanden ist, werden die Elemente 1 bis 4 von links nach rechts nebeneinander gesetzt.

Wenn der Platz knapp wird, wird Element 2 unter Element 1 gesetzt und Element 4 unter Element 3. Wenn es noch enger wird, werden die vier Elemente untereinander gesetzt.

Diese Art der Annordnung garantiert, dass die Sortierung einer Liste, welche in vier Elemente 1 bis 4 aufgeteilt wird, beim Umordnen der Elemente immer erhalten bleibt.

Beispiel

{{LayoutStack|150}}

* [[JSG: Linien Funktionen#MoveTo|]]
* [[JSG: Linien Funktionen#LineTo|]]
* [[JSG: Linien Funktionen#Line|]]

{{LayoutStack}}

* [[JSG: Linien Funktionen#Polygon|]]
* [[JSG: Rechteck Funktionen#Rect|]]
* [[JSG: Rechteck Funktionen#RectWH|]]

{{LayoutStack}}

* [[JSG: Kreis und Ellipsen Funktionen#Circle|]]
* [[JSG: Kreis und Ellipsen Funktionen#Arc|]]
* [[JSG: Kreis und Ellipsen Funktionen#ArcTo|]]

{{LayoutStack}}

* [[JSG: Kreis und Ellipsen Funktionen#ArcPt|]]
* [[JSG: Kreis und Ellipsen Funktionen#Ellipse|]]
* [[JSG: Kreis und Ellipsen Funktionen#EllipseArc|]]

{{LayoutStack}}

Und so sieht's aus:

Verkleinere das Fenster und verfolge, wie die Listenelemente neu angeordnet werden. Die Style-Angabe bewirkt, dass keine vertikalen Abstände zwischen den Teillisten entstehen.

Html-Attribute

Die diversen Html-Elemente, welche das Spaltenlayout ausmachen, erhalten Attribute, über welche per Style Sheet deren Aussehen beeinflusst werden kann. Dies sind:

  • Eine Html-ID für jedes LayoutStack-Element: LayourStack4-<n>, wobei <n> eine fortlaufende Nummer von 1 an ist
  • Klasse für jedes LayoutStack-Element: LayoutStack4-Container
  • Klasse für jede 2-er Gruppe von Zellen: LayoutStack4-Group und Group<n>, mit <n> = 1 und 2 abwechselnd
  • Klasse für jede Spalte (Zelle): LayoutStack4-Cell und Cell<n>, wobei <n<> eine fortlaufende Nummer von 1 an ist
  • Klasse Separator für das LayoutStack-Element, wenn das Argument sep angegeben wird.

Die fortlaufende Nummer für die Html-ID beginnt auf jeder Seite neu von 1. Die fortlaufende Nummer für die Klasse Cell<n>beginnt bei jeder Zeile neu von 1.

Ein einfaches 4-spaltiges Layout erzeugt folgenden Html-Code:

<div id="LayoutStack4-1" class="stack4Col120px LayoutStack4-Container">
  <div class="stack2Col120px LayoutStack4-Group Group1">
    <div class="stack1Col120px LayoutStack4-Cell Cell1">

      Element1

    </div>
    <div class="stack1Col120px LayoutStack4-Cell Cell2">

      Element2

    </div>
  </div>
  <div class="stack2Col120px LayoutStack4-Group Group2">
    <div class="stack1Col120px LayoutStack4-Cell Cell3">

      Element3

    </div>
    <div class="stack1Col120px LayoutStack4-Cell Cell4">

      Element4

    </div>
  </div>
</div>

Hinweis: Das LayoutStack-Element hat oben und unten je nach Argumente einen Abstand zum vorherigen bzw. nachfolgenden Element definiert (Styles margin-top und margin-bottom). Will man ein LayoutStack-Element in ein Div oder eine Tabellen-Zelle ohne Abstand setzen, so kann dies über ein Stylesheet erfolgen, welches über die ID auf den betroffenen LayoutStack zugreift:

<style>
#LayoutStack4-1 { 
  margin-top: 0; 
  margin-bottom: 0;
}
</style>

Weitere Infos zur Seite
Erzeugt Freitag, 7. Dezember 2012
von wabis
Zum Seitenanfang
Geändert Freitag, 7. Dezember 2012
von wabis