j-Section

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

udržuje pevnou úroveň
Výborná aplikace pro intranet
Podporuje releasing

Konfigurace:

height {Number} - procento výšky
parent {String} Volitelně, kontejner s pevnou výškou, může být windowPodmínkou hodnoty: parent a prvků.
Minimální výška minheight {Number} v pixelů (předběžné: 0 - onemocnění)
scroll {Boolean} umožňuje vertikální přepínání (přesněji řečeno: false - onemocnění)
scrollbar {Boolean} zobrazuje scrollbar (předvolené: false)
delay {Number} msec. znovu přejde do krabice, pokud se hodnota mění podle trasy (předběžně: 100)
visibleY {Boolean} Stále ukazuje Y Skládací bar (default) false)
visibleX {Boolean} Stále ukazuje X Skládací bar (default) false)
scrolltop {Boolean} se automaticky otáčí na vrchol, pokud je změněn path (předvolený: false)
margin {Number} volitelné, vrchní / dolní marže spolu (podporuje auto který je počítán z offset.top, výchozí: 0)
marginxs {Number} volitelné, horní / dolní hranice spolu pro šířku obrazovky xs
marginsm volitelné, horní / dolní hranice spolu pro šířku obrazovky sm
marginmd volitelné, horní / dolní hranice spolu pro šířku obrazovky md
marginlg volitelné, horní / dolní hranice spolu pro šířku obrazovky lg
invisible {Boolean}, pokud je true pak sekce nastavuje třídu invisible při renderování (předvolené: true)
autofocus {Boolean/String} může soustředit vstup. String === jQuery selector pro vstup
back {String} titul pro zadní tlačítko (předvolené: Back)
delayanim {Number} animace zpoždění (předvolené: 100)
scrollbarshadow {Boolean} přidává stín pro scrollbars (předvolené: false)
backexec {String} odkaz na tlačítko function(parent), které zachytí zpět (nemůže zabránit standardnímu chování)

Metody:

component.scrolltop(val) Sklíčení Y
component.scrollbottom(val) se otáčí z dolní strany
component.resize() rezuje kontejner (reaguje automaticky na události resize)
component.resizescrollbar() se přizpůsobí přepínání (cvičení pro speciální případy)
NEW: component.import(url) dováží novou sekci z adresy URL, odpověď musí být ve formě <section data-if="...."
NEW: component.import(html) dováží novou sekci z HTML ve formátu <section data-if="...."
NEW: component.import(element) dováží novou sekci ze surového prvku SECTION
NEW: component.cancel([id]) dynamicky odstraňuje sekci

Definice:

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

Sekce atributů:

data-if musí obsahovat podmínku pro zobrazení
data-parent Může obsahovat rodiče data-if
data-title obsahuje štítek / název pro část
data-reload může obsahovat odkaz na function(el) (volitelné)
data-id obsahuje vlastněný identifikátor pro nahrazení všech ~ID~ výrazů v obsahu (volitelné)
data-url může obsahovat odkaz na šablónu (volitelně)

Dobré vědět:

Chcete-li přidat další obsah do hlavy na pravé straně, stačí přidat uvnitř složky např. <div>BUTTON</div>.
Můžete dynamicky vložit / odstranit sekce prostřednictvím metody component.import() nebo component.cancel().
Všechny atributy sekce mohou být dynamicky změněny (např. data-title, data-parent, atd.).
Všechny fráze ~PATH~ budou nahrazeny hodnotou atributu data-if
Všechny fráze ~ID~ budou nahrazeny hodnotou atributu data-if
SET('path', 'if', 'right') bude animovat obsah na pravou stranu

Použijte ji s <ui-component name="section">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>