j-Columns

Die Komponente Columns ist eine sehr einfache Alternative zu j-Layout und j-Layout2. Mit dieser Komponente können Sie Stücke mit 100% Höhe nach Ihren Bedürfnissen festlegen.

Konfiguration:

• parent {String} kann parent, window oder jQuery-Selektor für die Methode closest enthalten (Standard: window)
• margin {Number} hinzufügt die Marge zu height (Default: 0)
• marginlg {Number} fügt Marge zu height für den LG Display hinzu (Default: margin)
• marginmd {Number} fügt Marge zu height für den MD Display hinzu (Default: margin)
• marginsm {Number} fügt Marge zu height für den SM Display hinzu (Default: margin)
• marginxs {Number} fügt Marge zu height für den XS Display hinzu (Default: margin)
• noborder {Boolean} deaktiviert den Rand (Standard: false)
• fontsize {Boolean} ermöglicht die Prozentsatzgröße nach der Größe der Zeilen (Default: false)

Methoden:

• SETTER('columns/refresh') - laden alle section neu auf und stellen die Größen fest
• SETTER('columns/add', size, html_node) - fügt eine neue Spalte hinzu und erneuert

Gut zu wissen:

Jede Spalte muss in <section> gefüllt sein, versuchen Sie aus dem Beispiel zu verstehen.

Attribute:

• 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)
• Abschnitt ohne data-size wird aus dem Restwert zählen

Verwenden Sie es mit <ui-component name="columns">. 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.

<style>body { padding: 0; margin: 0; }</style>

<ui-component name="columns" config="parent:window" class="hidden invisible">
	<section data-size="200">Left panel</section>
	<section>Main</section>
	<section data-size="200">Right panel</section>
</ui-component>