# j-Section

> j-Section: mantém uma altura de percentagem fixa; ótimo uso para aplicações intranet

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: pt
Content-SHA256: 4f49c7e63ad3133d207daccac322a7de7c4e8726b9dde1f46b39ef27af577707
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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

```html
<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.

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