j-Section

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

behält eine feste prozentuale Höhe bei
Hervorragende Verwendung für Intranet-Anwendungen
unterstützt releasing

Konfiguration:

height {Number} ein Prozentsatz der Höhe
parent {String} optional, ein Behälter mit fester Höhe, kann window sein. Standardwert: parent-Element.
minheight {Number} eine minimale Höhe in Pixel (Standard: 0 – deaktiviert)
scroll {Boolean} ermöglicht vertikales Scrollen (Standard: false – deaktiviert)
scrollbar {Boolean} zeigt Bildlaufleiste an (Standard: false)
delay {Number} msec. ändert die Größe der Box erneut, wenn der Wert entsprechend dem Pfad geändert wird (Standard: 100)
visibleY {Boolean} zeigt weiterhin die Bildlaufleiste Y an (Standard: false)
visibleX {Boolean} zeigt weiterhin die Bildlaufleiste X an (Standard: false)
scrolltop {Boolean} scrollt automatisch nach oben, wenn path geändert wird (Standard: false)
margin {Number} optional, ein oberer/unterer Rand zusammen (unterstützt auto, das ab offset.top gezählt wird, Standard: 0)
marginxs {Number} optional, ein oberer/unterer Rand zusammen für xs Bildschirmbreite
marginsm optional, ein oberer/unterer Rand zusammen für sm Bildschirmbreite
marginmd optional, ein oberer/unterer Rand zusammen für md Bildschirmbreite
marginlg optional, ein oberer/unterer Rand zusammen für lg Bildschirmbreite
invisible {Boolean}, wenn true, dann legt der Abschnitt beim Rendern die Klasse invisible fest (Standard: true)
autofocus {Boolean/String} kann eine Eingabe fokussieren. String === jQuery selector für die Eingabe
back {String} ein Titel für die Zurück-Schaltfläche (Standard: Back)
delayanim {Number} Animationsverzögerung (Standard: 100)
scrollbarshadow {Boolean} fügt Schatten für Bildlaufleisten hinzu (Standard: false)
backexec {String} ein Link zum function(parent), der die Zurück-Schaltfläche erfasst (verhindert Standardverhalten)

Methoden:

component.scrolltop(val) scrollt Y
component.scrollbottom(val) scrollt Y von unten
component.resize() ändert die Größe des Containers (er reagiert automatisch auf resize-Ereignisse)
component.resizescrollbar() ändert die Größe der benutzerdefinierten Bildlaufleiste (für Sonderfälle gedacht)
NEW: component.import(url) importiert einen neuen Abschnitt aus der URL-Adresse, die Antwort muss in der Form <section data-if="...." erfolgen
NEW: component.import(html) importiert einen neuen Abschnitt aus dem HTML in der Form <section data-if="...."
NEW: component.import(element) importiert einen neuen Abschnitt aus dem Rohelement SECTION
NEU: component.cancel([id]) entfernt den Abschnitt dynamisch

Definition:

<ui-component name="section" path="path">

	<!-- path must have same value as "data-if" attribute -->
	<section data-if="1" data-title="A title">

	</section>

	<!-- path must have same value as "data-if" attribute -->
	<!-- "data-parent" enables Back button in the header and after click the component sets value from "data-parent" attribute -->
	<section data-if="2" data-parent="1" data-title="A title">

	</section>

	<!-- GOOD TO KNOW: Dynamic compilation -->
	<section data-if="3" data-parent="2" data-title="A title" data-back="link_to_function">

		<!-- SCRIPT or TEMPLATE -->
		<script type="text/html">
			Will be compiled and rendered when the section will be displayed
		</script>

	</section>

	<!-- Template from URL address -->
	<section data-if="4" data-parent="2" data-title="A title" data-url="LINK_TO_HTML_TEMPLATE"></section>

</ui-component>

Abschnittsattribute:

data-if muss eine Bedingung für die Anzeige enthalten
data-parent kann einen übergeordneten data-if enthalten
data-title enthält eine Bezeichnung/Titel für den Abschnitt
data-reload kann einen Link zum function(el) enthalten (optional)
data-id enthält eine benutzerdefinierte Kennung zum Ersetzen aller ~ID~-Phrasen im Inhalt (optional)
data-url kann einen Link zur Vorlage enthalten (optional)

Gut zu wissen:

Wenn Sie der Kopfzeile auf der rechten Seite zusätzlichen Inhalt hinzufügen möchten, hängen Sie ihn einfach innerhalb der Komponente an, z. B. <div>BUTTON</div>.
Sie können Abschnitte über die Methoden component.import() oder component.cancel() dynamisch einfügen/entfernen.
Alle Abschnittsattribute können dynamisch geändert werden (z. B. data-title, data-parent usw.).
Alle ~PATH~-Phrasen werden durch den Attributwert data-if ersetzt
Alle ~ID~-Phrasen werden durch den Attributwert data-if ersetzt
SET('path', 'if', 'right') animiert den Inhalt auf der rechten Seite

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

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

<ui-component name="section" path="common.section" config="parent:window;scrollbar:1" default="''">

	<section class="hidden invisible" data-if="1" data-title="Section 1">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				<div>SECTION 1</div>
				<div class="exec link" data-exec="showsection2">Show section 2</div>
			</div>
		</div>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2">
		<script type="text/html">
			<div class="padding">
				<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
					SECTION 2
				</div>
			</div>
		</script>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2" data-url="LINK_TO_TEMPLATE"></section>
</ui-component>

<script>

	function showsection2() {
		SET('common.section', '2');
	}

	setTimeout(showsection2, 1000);

</script>