j-Pages

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Komponenten är ett bättre alternativ till komponenten j-Section. Som ett resultat kan du enkelt göra en multi-sidor app med dynamiskt innehåll laddning när det behövs.

Huvudkonfiguration:

margin {Number/String} en toppmarginal (default: 0)
- auto kommer att tillämpa offset.top värde
margintype {String} kan innehålla offset (default) eller position värde
delay {Number} animation försening (default: 220)
parent {String} valfritt, en selektor till ett element med en fast höjd (default: parent element)
scrollbarshadow {Boolean} möjliggör skugga för scrollbaren (default: false)
loading {String} alternativ, en länk till function(show_loading {Boolean})

Avsnitt attribut konfiguration data-config:

if {String} är ett villkor för att visa sidan
url {String} URL för att få HTML-innehåll
path {String} värdet ersätter ~PATH~ lampor (default: config.if)
id {String} kommer att ersätta ~ID~ lampor
anim {String} animationstyp, stödda värden left (default), right, top eller bottom
scrollbar {Boolean} lägger till en anpassad spårbar i innehållet (default: true)
scrolltop {Boolean} möjliggör autoskroll
reload {String} en länk till function(el), det körs när sidan visas
hide {String} en länk till function(el), det körs när sidan är dold
check {String} en länk till function(next, el)
- next {Function} fortsätter med sidan visning
autofocus {Boolean} gör autofokus för den aktuella sidan

Använd den med <ui-component name="pages">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>