j-Pages

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

O componente é uma melhor alternativa ao componente j-Section. Como resultado, você pode facilmente fazer um aplicativo multi-página com carregamento de conteúdo dinâmico quando necessário.

Configuração Principal:

margin {Number/String} uma margem superior (default: 0)
- auto será aplicado valor offset.top
margintype {String} pode conter offset (default) ou valor position
Retraso de animação delay {Number} (default: 220)
parent {String} opcional, um seletor para um elemento com uma altura fixa (default: elemento parent)
scrollbarshadow {Boolean} permite a sombra para a barra de rolamento (default: false)
loading {String} opcional, um link para o function(show_loading {Boolean})

Configuração da secção data-config:

if {String} é uma condição para exibição de página
url {String} Endereço URL para obter conteúdo HTML
path {String} o valor substituirá as farsais ~PATH~ (default: config.if)
id {String} substitui o valor de ~ID~
Tipo de animação anim {String}, valores suportados left (default), right, top ou bottom
scrollbar {Boolean} adiciona uma barra de rolamento personalizada ao conteúdo (default: true)
scrolltop {Boolean} permite o auto-scroll
reload {String} um link para o function(el), é executado quando a página é exibida
hide {String} um link para o function(el), é executado quando a página está escondida
check {String} um link para o function(next, el)
- next {Function} continua com o display da página
autofocus {Boolean} realiza autofocus para a página atual

Use-o com <ui-component name="pages">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença MIT.

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>