j-Section

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

udržiava pevnú percentuálnu výšku
skvelé využitie pre intranetové aplikácie
podporuje releasing

Konfigurácia:

height {Number} percento výšky
parent {String} voliteľné, kontajner s pevnou výškou, môže byť window. Predvolená hodnota: Prvok parent.
minheight {Number} minimálna výška v pixeloch (predvolené: 0 - vypnuté)
scroll {Boolean} umožňuje vertikálne posúvanie (predvolené: false - vypnuté)
scrollbar {Boolean} zobrazuje posuvník (predvolené: false)
delay {Number} msec. znova zmení veľkosť poľa, ak sa hodnota zmení podľa cesty (predvolené: 100)
visibleY {Boolean} stále zobrazuje posúvač Y (predvolené: false)
visibleX {Boolean} stále zobrazuje posúvač X (predvolené: false)
scrolltop {Boolean} sa automaticky posunie nahor, ak sa zmení path (predvolené: false)
margin {Number} voliteľné, horný/dolný okraj spolu (podporuje auto, ktorý sa počíta od offset.top, predvolené: 0)
marginxs {Number} voliteľné, horný/dolný okraj spolu pre šírku obrazovky xs
marginsm voliteľné, horný/dolný okraj spolu pre šírku obrazovky sm
marginmd voliteľné, horný/dolný okraj spolu pre šírku obrazovky md
marginlg voliteľné, horný/dolný okraj spolu pre šírku obrazovky lg
invisible {Boolean}, ak true, sekcia nastaví triedu invisible pri vykresľovaní (predvolené: true)
autofocus {Boolean/String} môže zamerať vstup. String === jQuery selector pre vstup
back {String} názov pre tlačidlo Späť (predvolené: Back)
Oneskorenie animácie delayanim {Number} (predvolené: 100)
scrollbarshadow {Boolean} pridáva tieň pre posuvníky (predvolené: false)
backexec {String} odkaz na function(parent), ktorý zachytáva tlačidlo Späť (bráni štandardnému správaniu)

Metódy:

component.scrolltop(val) zvitky Y
component.scrollbottom(val) roluje Y zo spodnej strany
component.resize() zmení veľkosť kontajnera (automaticky reaguje na udalosti resize)
component.resizescrollbar() mení veľkosť vlastného posúvača (zamerané na špeciálne prípady)
NEW: component.import(url) importuje novú sekciu z URL adresy, odpoveď musí byť v tvare <section data-if="...."
NEW: component.import(html) importuje novú sekciu z HTML v tvare <section data-if="...."
NOVINKA: component.import(element) importuje novú sekciu zo surového prvku SECTION
NOVINKA: component.cancel([id]) dynamicky odstraňuje sekciu

Definícia:

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

Atribúty sekcie:

data-if musí obsahovať podmienku pre zobrazenie
data-parent môže obsahovať nadradený data-if
data-title obsahuje označenie/nadpis pre sekciu
data-reload môže obsahovať prepojenie na function(el) (voliteľné)
data-id obsahuje vlastný identifikátor na nahradenie všetkých fráz ~ID~ v obsahu (voliteľné)
data-url môže obsahovať odkaz na šablónu (voliteľné)

Je dobré vedieť:

Ak chcete pridať ďalší obsah do hlavičky na pravú stranu, stačí pridať dovnútra komponentu napr. <div>BUTTON</div>.
Môžete dynamicky vkladať/odstraňovať sekcie pomocou metód component.import() alebo component.cancel().
Všetky atribúty sekcie je možné dynamicky meniť (napr. data-title, data-parent atď.).
všetky frázy ~PATH~ budú nahradené hodnotou atribútu data-if
všetky frázy ~ID~ budú nahradené hodnotou atribútu data-if
SET('path', 'if', 'right') animuje obsah na pravú stranu

Použite ho so <ui-component name="section">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov 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>