j-Layout2

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Diese Komponente ist ein sehr einfacher Bestandteil im Vergleich zu j-Layout.

Konfiguration:

parent {String} kann einen parent, window oder jQuery-Selektor für die closest-Methode enthalten (Default: window)
margin {Nummer} fügt Margin für die height hinzu (Default: 0)
autoresize {Boolean} ermöglicht Auto-Rezize (Default: true)

Methoden:

component.show(type) kann ein bestimmtes Panel für mobile Geräte anzeigen, type kann left, right oder main sein
component.resizescrollbar(panel_type) resisiert eine Scrollbar für ein bestimmtes Panel
component.scrolltop(panel_type)-Scrolls zum Spitzen für ein bestimmtes Panel

Panel-Typen:

left links
right rechte Panel
top Top-Panel (es ist das Panel auf allen Panels)
top2 Top Panel und verwendet top Schlüssel in der Konfiguration (es ist zwischen left und right Panel)
bottom unteren Panel (es ist das Panel am Unteren aller Panels)
bottom2 unteren Panel und verwendet bottom Schlüssel in der Konfiguration (es ist zwischen left und right Panel)
main Hauptverhältnisse

Layout:

Die Erstellung des Layouts ist sehr einfach.

<div data-type="" data-size="" data-scrollbar=""></div>

Attribute:

data-type muss eine Art von Sektion top, top2, left, right, bottom, bottom2 oder main enthalten
data-size enthält eine Größe des Abschnitts LG,MD,SM,XS --> in Pixeln oder Prozentsatz, zum Beispiel: 200,200,200,0 (0 bedeutet versteckt) oder 20% (alle Werte werden 20%)
data-scrollbar="margin:50;visible:1" ermöglicht Scrollbar, mögliche Werte:
- selector {String} optionale jQuery-Selektor für den Scrollbar-Kontinent
- margin {Nummer} Scrollbar Marge (Default: 0)
- visible {Boolean} zeigt die Scrollbar

Gut zu wissen:

Jedes Panel ist ein section-Element und muss das Attribut data-type="top" mit dem Paneltyp enthalten
Definieren Sie nur die Panels, die Sie verwenden möchten
Die Reihenfolge aller section-Elemente ist nicht wichtig

Verwenden Sie es mit <ui-component name="layout2">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

example.html

<ui-component name="layout2" config="parent:window" class="invisible">
	<div data-type="top" data-size="44" style="background-color:red">
		TOP
	</div>
	<div data-type="bottom2" data-size="44" style="background-color:blue">
		BOTTOM
	</div>
	<div data-type="left" data-size="20%,20%,20%,0" style="background-color:green">
		LEFT
	</div>
	<div data-type="right" data-size="20%,20%,20%,0" style="background-color:purple">
		RIGHT
	</div>
	<div data-type="main" data-scrollbar="visible:true" style="background-color:#F0F0F0">
	</div>
</ui-component>