j-Section

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

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:

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

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>