j-Pages

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

Die Komponente ist eine bessere Alternative zur Komponente j-Section. Dadurch können Sie ganz einfach eine mehrseitige App mit dynamischem Laden von Inhalten bei Bedarf erstellen. Das Ergebnis sieht für mobile Geräte oder Desktop-Computer sehr intuitiv aus.

Hauptkonfiguration:

margin {Number/String} ein oberer Rand (Standard: 0)
- auto wird den offset.top-Wert anwenden
margintype {String} kann den Wert offset (Standard) oder position enthalten
delay {Number} Animationsverzögerung (Standard: 220)
parent {String} optional, ein Selektor für ein Element mit fester Höhe (Standard: parent-Element)
scrollbarshadow {Boolean} aktiviert Schatten für die Bildlaufleiste (Standard: false)
loading {String} optional, ein Link zum function(show_loading {Boolean})

Abschnittsattributkonfiguration data-config:

if {String} eine Bedingung für die Anzeige der Seite
url {String} URL-Adresse zum Abrufen von HTML-Inhalten
path {String} der Wert ersetzt ~PATH~-Pharsen (Standard: config.if)
id {String} Der Wert ersetzt ~ID~-Pharsen
Animationstyp anim {String}, unterstützte Werte left (Standard), right, top oder bottom
scrollbar {Boolean} fügt eine benutzerdefinierte Bildlaufleiste in den Inhalt ein (Standard: true)
scrolltop {Boolean} aktiviert den automatischen Bildlauf
reload {String} ein Link zum function(el), er wird ausgeführt, wenn die Seite angezeigt wird
hide {String} ein Link zum function(el), er wird ausgeführt, wenn die Seite ausgeblendet ist
check {String} ein Link zum function(next, el)
- next {Function} fährt mit der Seitenanzeige fort
autofocus {Boolean} führt den Autofokus für die aktuelle Seite durch

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

example.html

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

<ui-component name="pages" path="common.page" config="parent:window">

	<section class="hidden invisible" data-config="if:page1;anim:left">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				PAGE 1
			</div>
		</div>
	</section>

	<section class="hidden invisible" data-config="if:page2;anim:right">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				PAGE 2
			</div>
		</div>
	</section>

	<section class="hidden invisible" data-config="if:page3;anim:bottom">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				PAGE 3
			</div>
		</div>
	</section>
</ui-component>


<script>

	var common = {};

	function togglepage() {

		var val = common.page;

		switch (val) {
			case 'page1':
				val = 'page2';
				break;
			case 'page2':
				val = 'page3';
				break;
			case 'page3':
			default:
				val = 'page1';
				break;
		}

		SET('common.page', val);
	}

	setInterval(togglepage, 2000);
	togglepage();

</script>