j-Section

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

Manter uma taxa fixa de percentagem
Excelente para aplicações de intranet
Suporte para releasing

Configuração:

height {Number} - percentagem de altura
parent {String} opcional, um recipiente com altura fixa, pode ser window. valor padrão: elemento parent.
minheight {Number} - altura mínima em pixels (default: 0 - desativado)
scroll {Boolean} permite a escorrência vertical (default: false - desativado)
scrollbar {Boolean} mostra a barra de rolamento (default: false)
delay {Number} msec. resissa a caixa novamente se o valor for alterado de acordo com o caminho (default: 100)
visibleY {Boolean} ainda mostra a barra de rolamento Y (default: false)
visibleX {Boolean} ainda mostra a barra de rolamento X (default: false)
O scrolltop {Boolean} vai para o topo automaticamente se o path for alterado (default: false)
margin {Number} opcional, uma margem superior/baixo juntamente (suporte auto que é contado de offset.top, padrão: 0)
marginxs {Number} opcional, uma margem superior/baixo juntos para a largura de tela xs
marginsm opcional, uma margem superior/baixo juntos para a largura de tela sm
marginmd opcional, uma margem superior/baixo juntos para a largura de tela md
marginlg opcional, uma margem superior/baixo juntos para a largura de tela lg
invisible {Boolean} se true então a seção define a classe invisible quando é renderizado (default: true)
autofocus {Boolean/String} pode focar uma entrada. String === jQuery selector para a entrada
back {String} um título para o botão de trás (default: Back)
Retraso de animação delayanim {Number} (default: 100)
scrollbarshadow {Boolean} adiciona sombra para scrollbars (default: false)
backexec {String} um link para o function(parent), que capta o botão de volta (impede o comportamento padrão)

Métodos:

component.scrolltop(val) em torno de Y
component.scrollbottom(val) é a parte inferior
component.resize() resissa o recipiente (reage automaticamente aos eventos de resize)
component.resizescrollbar() resissa a barra de rolamento personalizada (alvo de casos especiais)
NEW: component.import(url) importa uma nova seção do endereço URL, a resposta deve ser no formulário <section data-if="...."
NEW: component.import(html) importa uma nova seção do HTML no formulário <section data-if="...."
NEW: component.import(element) importa uma nova seção do elemento SECTION
NEW: component.cancel([id]) remove a seção dinâmicamente

Definição:

<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>

Atributos da Secção:

data-if deve conter uma condição de exibição
data-parent pode conter um parente data-if
data-title contém um rótulo/título para a seção
data-reload pode conter um link para o function(el) (opcional)
data-id contém um identificador personalizado para substituir todas as frases ~ID~ no conteúdo (opcional)
data-url pode conter um link para o modelo (opcional)

Bom para saber:

Se você quiser adicionar um conteúdo adicional ao título à direita, basta adicionar dentro do componente, por exemplo, <div>BUTTON</div>.
Você pode inserir / remover seções dinamicamente através dos métodos component.import() ou component.cancel().
Todos os atributos da seção podem ser modificados dinâmicamente (por exemplo, data-title, data-parent, etc.).
Todas as frases ~PATH~ serão substituídas pelo valor de atributo data-if
Todas as frases ~ID~ serão substituídas pelo valor de atributo data-if
SET('path', 'if', 'right') vai animar o conteúdo para a direita

Use-o com <ui-component name="section">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="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>