j-Section

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

mantenere un percentuale fisso
Ottimo utilizzo per le applicazioni intranet
Supporto di releasing

Configurazione:

height {Number} per cento di altezza
parent {String} opzionale, un contenitore con altezza fissa, può essere windowValore di default: parent Il elemento.
minheight {Number} a altezza minima in pixel (default: 0 - disabilitato)
scroll {Boolean} consente scorrimento verticale (default: false - disabilitato)
scrollbar {Boolean} mostra scrollbar (default: false)
delay {Number} msec. riprende la scatola se il valore è cambiato in base al percorso (default: 100)
visibleY {Boolean} mostra ancora la barra di scorrimento Y (default: false)
visibleX {Boolean} mostra ancora la barra di scorrimento X (default: false)
scrolltop {Boolean} scorre automaticamente in cima se il path è modificato (default: false)
margin {Number} opzionale, una margina superiore/bottom insieme (sopporti auto che è calcolato da offset.top, predefinito: 0)
marginxs {Number} opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo xs
marginsm opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo sm
marginmd opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo md
marginlg opzionale, una margina superiore / inferiore insieme per la larghezza dello schermo lg
invisible {Boolean} se true quindi la sezione stabilisce la classe invisible quando si renderà (default: true)
autofocus {Boolean/String} può concentrare un input. String === jQuery selector per l'ingresso
back {String} un titolo per il pulsante posteriore (default: Back)
Il ritardo di animazione delayanim {Number} (default: 100)
scrollbarshadow {Boolean} aggiunge ombra per scrollbars (default: false)
backexec {String} un collegamento al pulsante di ritorno function(parent) (è impedito il comportamento standard)

Metodi:

component.scrolltop(val) scorrere e
component.scrollbottom(val) scorrere Y dal basso
Il contenitore component.resize() risiste (reagisce automaticamente agli eventi resize)
component.resizescrollbar() rifiuta la barra di scorrimento personalizzata (obiettivo per casi speciali)
NEW: component.import(url) importa una nuova sezione dall'URL, la risposta deve essere nel modulo <section data-if="...."
NEW: component.import(html) importa una nuova sezione dal HTML nel modulo <section data-if="...."
NEW: component.import(element) importa una nuova sezione dall'elemento SECTION
NEW: component.cancel([id]) rimuove la sezione in modo dinamico

Definizione:

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

Attributi di sezione:

data-if deve contenere una condizione per la visualizzazione
data-parent può contenere un parente data-if
data-title contiene un'etichetta/titolo per la sezione
data-reload può contenere un collegamento al function(el) (opzionale)
data-id contiene un identificatore personalizzato per sostituire tutte le frasi ~ID~ nel contenuto (opzionale)
data-url può contenere un link al modello (opzionale)

Buono sapere:

Se si desidera aggiungere un contenuto aggiuntivo al titolo a destra, basta appendere all'interno del componente, ad esempio <div>BUTTON</div>.
È possibile inserire/rimuovere dinamicamente le sezioni tramite i metodi component.import() o component.cancel().
Tutti gli attributi della sezione possono essere modificati in modo dinamico (ad esempio data-title, data-parent, ecc.).
tutte le frasi ~PATH~ saranno sostituite per il valore di attribuzione data-if
tutte le frasi ~ID~ saranno sostituite per il valore di attribuzione data-if
SET('path', 'if', 'right') animerà il contenuto sul lato destro

Utilizzare con <ui-component name="section">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>