j-Section

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Állandó százalékos magasságban
Nagy használat az intranet alkalmazásokhoz
Támogatja a releasing

konfiguráció:

height {Number} - a magasság százalékos
parent {String} egy tartály, amely rögzített magassággal rendelkezik, lehet windowAz alapértelmezett érték: parent Az elem.
minheight {Number} a minimális magasság pixelekben (default: 0 - eltérő)
scroll {Boolean} lehetővé teszi a függőleges forgatást (default: false - kikapcsolva)
scrollbar {Boolean} mutatja a scrollbar (default: false)
A delay {Number} msec. ismét visszavonja a dobozot, ha az érték az útvonal szerint megváltozik (elsődleges: 100)
visibleY {Boolean} még mindig mutatja a Y scrollbar (default: false)
visibleX {Boolean} még mindig mutatja a X scrollbar (default: false)
A scrolltop {Boolean} automatikusan felfelé forog, ha a path változik (default: false)
margin {Number} opcionális, egy felső/alatti margin együtt (a támogatás auto amely számítva a offset.top, alapértelmezett: 0)
marginxs {Number} opcionális, egy felső/alatti margin együtt a xs képernyő szélessége
marginsm opcionális, egy felső/alatti margin együtt a sm képernyő szélessége
marginmd opcionális, egy felső/alatti margin együtt a md képernyő szélessége
marginlg opcionális, egy felső/alatti margin együtt a lg képernyő szélessége
invisible {Boolean} ha a true akkor a szakasz állítsa be a invisible osztályot, amikor a renderelés (default: true)
A autofocus {Boolean/String} egy bevitelt fókuszálhat. String === jQuery selector a beviteli
back {String} a hátsó gomb címét (default: Back)
delayanim {Number} animációs késés (default: 100)
A scrollbarshadow {Boolean} árnyékot ad a scrollbarshoz (default: false)
backexec {String} egy link a function(parent) amely rögzíti a vissza gombot (megakadályozza a szabványos viselkedés)

módszerek:

component.scrolltop(val) forgatás és
A component.scrollbottom(val) az alsó oldalról
component.resize() újrahasznosítja a tartályt (a resize eseményekre automatikusan reagál)
component.resizescrollbar() szűkített csík (különleges esetekre tervezték)
NEW: A component.import(url) új részeket importál az URL-ről, a válasznak a <section data-if="...." formátumban kell lennie
NEW: A component.import(html) új HTML-szekciót importál a <section data-if="...." formátumban
NEW: a component.import(element) új részét importálja a nyers SECTION elemből
NEW: component.cancel([id]) eltávolítja a szekciót dinamikusan

Meghatározás:

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

A rész tulajdonságai:

A data-if tartalmazza a megjelenítés feltételeit
A data-parent tartalmazhat egy szülő data-if
data-title tartalmazza a címke/címke a részhez
A data-reload tartalmazhat egy linket a function(el) (opcionális)
A data-id tartalmaz egy személyre szabott azonosítót, amely helyettesíti az összes ~ID~ mondatot a tartalomban (opcionális)
A data-url tartalmazhat egy linket a sablonra (opcionális)

Jó tudni:

Ha a jobb oldalon egy további tartalmat szeretne hozzáadni a címkéhez, csak a komponens belsejében kell hozzáadnia például a <div>BUTTON</div>-et.
A component.import() vagy a component.cancel() módszerek segítségével dinamikusan beállíthatja / törölheti a szakaszokat.
Az összes rész tulajdonságait dinamikusan meg lehet változtatni (például data-title, data-parent, stb.).
Az összes ~PATH~ kifejezés helyébe a data-if attribútum értéke kerül.
Az összes ~ID~ kifejezés helyébe a data-if attribútum értéke kerül.
A SET('path', 'if', 'right') a tartalmat a jobb oldalra animálja

Használja a <ui-component name="section">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>