# j-Section

> j-Section: mantiene un porcentaje de altura fijo; gran uso para aplicaciones de intranet

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: es
Content-SHA256: 38edad327ae5b59e59459a828f11c585392690e2fdec1e98cb14ece53627aa29
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- mantiene un porcentaje de altura fijo
- gran uso para aplicaciones de intranet
- soporta `releasing`

__Configuración__:

- `height {Number}` un porcentaje de altura
- `parent {String}` opcional, un contenedor con altura fija, puede ser `window`. Valor predeterminado: elemento `parent`.
- `minheight {Number}` una altura mínima en píxeles (predeterminado: `0` - deshabilitado)
- `scroll {Boolean}` habilita el desplazamiento vertical (predeterminado: `false` - deshabilitado)
- `scrollbar {Boolean}` muestra la barra de desplazamiento (predeterminado: `false`)
- `delay {Number}` `msec.` cambia el tamaño del cuadro nuevamente si el valor se cambia según la ruta (predeterminado: `100`)
- `visibleY {Boolean}` todavía muestra la barra de desplazamiento `Y` (predeterminado: `false`)
- `visibleX {Boolean}` todavía muestra la barra de desplazamiento `X` (predeterminado: `false`)
- `scrolltop {Boolean}` se desplaza hacia arriba automáticamente si se cambia el `path` (predeterminado: `false`)
- `margin {Number}` opcional, un margen superior/inferior juntos (admite `auto` que se cuenta desde `offset.top`, predeterminado: `0`)
- `marginxs {Number}` opcional, un margen superior/inferior juntos para el ancho de pantalla `xs`
- `marginsm` opcional, un margen superior/inferior juntos para el ancho de pantalla `sm`
- `marginmd` opcional, un margen superior/inferior juntos para el ancho de pantalla `md`
- `marginlg` opcional, un margen superior/inferior juntos para el ancho de pantalla `lg`
- `invisible {Boolean}` si `true` entonces la sección establece la clase `invisible` cuando se está renderizando (predeterminado: `true`)
- `autofocus {Boolean/String}` puede enfocar una entrada. `String` === `jQuery selector` para la entrada
- `back {String}` un título para el botón Atrás (predeterminado: `Back`)
- Retraso de animación `delayanim {Number}` (predeterminado: `100`)
- `scrollbarshadow {Boolean}` agrega sombra para las barras de desplazamiento (predeterminado: `false`)
- `backexec {String}` un enlace al `function(parent)` que captura el botón Atrás (evita el comportamiento estándar)

__Métodos__:

- `component.scrolltop(val)` se desplaza Y
- `component.scrollbottom(val)` desplaza Y desde la parte inferior
- `component.resize()` cambia el tamaño del contenedor (reacciona automáticamente a los eventos `resize`)
- `component.resizescrollbar()` cambia el tamaño de la barra de desplazamiento personalizada (destinada a casos especiales)
- __NUEVO__: `component.import(url)` importa una nueva sección desde la dirección URL, la respuesta debe tener el formato `<section data-if="...."`
- __NUEVO__: `component.import(html)` importa una nueva sección del HTML en el formato `<section data-if="...."`
- __NUEVO__: `component.import(element)` importa una nueva sección del elemento `SECTION` sin formato.
- __NUEVO__: `component.cancel([id])` elimina la sección dinámicamente

__Definición__:

```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 de sección__:

- `data-if` debe contener una condición para mostrar
- `data-parent` puede contener un padre `data-if`
- `data-title` contiene una etiqueta/título para la sección
- `data-reload` puede contener un enlace al `function(el)` (opcional)
- `data-id` contiene un identificador personalizado para reemplazar todas las frases `~ID~` en el contenido (opcional)
- `data-url` puede contener un enlace a la plantilla (opcional)

__Es bueno saberlo__:

- Si desea agregar contenido adicional en el encabezado del lado derecho, simplemente agregue dentro del componente, p. `<div>BUTTON</div>`.
- Puede insertar/eliminar secciones dinámicamente mediante los métodos `component.import()` o `component.cancel()`.
- Todos los atributos de la sección se pueden cambiar dinámicamente (por ejemplo, `data-title`, `data-parent`, etc.).
- todas las frases `~PATH~` serán reemplazadas por el valor del atributo `data-if`
- todas las frases `~ID~` serán reemplazadas por el valor del atributo `data-if`
- `SET('path', 'if', 'right')` animará el contenido hacia el lado derecho

Úselo con `<ui-component name="section">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia 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>
```