j-Section

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Houd een vaste percentage
Goed gebruik voor intranet applicaties
Ondersteunt releasing

Configuratie:

height {Number} een percentage hoogte
parent {String} Een container met een vaste hoogte kan windowDe standaardwaarde: parent Het element.
minheight {Number} een minimale hoogte in pixels (default: 0 - ingeschakeld)
scroll {Boolean} maakt verticale scrolling mogelijk (default: false - ingeschakeld)
scrollbar {Boolean} toont scrollbar (default: false)
delay {Number} msec. resecteert de doos opnieuw als de waarde wordt gewijzigd volgens de route (default: 100)
visibleY {Boolean} toont nog steeds de Y scrollbar (default: false)
visibleX {Boolean} toont nog steeds de X scrollbar (default: false)
De scrolltop {Boolean} scrollt automatisch naar de top als de path is gewijzigd (default: false)
margin {Number} optioneel, een top/bottom marge samen (de ondersteuning van auto dat is geteld vanaf offset.top, standaard: 0)
marginxs {Number} optioneel, een top/bottom margin samen voor xs scherm breedte
marginsm optioneel, een top/bottom margin samen voor sm scherm breedte
marginmd optioneel, een top/bottom margin samen voor md scherm breedte
marginlg optioneel, een top/bottom margin samen voor lg scherm breedte
invisible {Boolean} als true dan de sectie bepaalt de invisible klasse wanneer het wordt gepresenteerd (default: true)
autofocus {Boolean/String} kan een input richten. String === jQuery selector voor de input
back {String} een titel voor de back button (default: Back)
delayanim {Number} animatie vertraging (default: 100)
scrollbarshadow {Boolean} voegt schaduw toe aan scrollbars (default: false)
backexec {String} een link naar de function(parent) die de terugknop opneemt (het voorkomt standaard gedrag)

Methoden:

component.scrolltop(val) scrolls en
component.scrollbottom(val) scrolls Y van de onderkant
component.resize() reageert op de container (het reageerde automatisch op de gebeurtenissen van resize)
component.resizescrollbar() resiseren aangepaste scrollbar (gericht op speciale gevallen)
NEW: component.import(url) importeert een nieuw gedeelte van de URL, het antwoord moet in het formulier <section data-if="...." zijn
NEW: component.import(html) importeert een nieuw gedeelte van de HTML in het formulier <section data-if="...."
NEW: component.import(element) importeert een nieuwe sectie van het grondstofelement SECTION
NEW: component.cancel([id]) verwijdert de sectie dynamisch

Definitie:

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

Sectie Attributen:

data-if moet een voorwaarde bevatten om te tonen
data-parent kan een parent data-if bevatten
data-title bevat een etiket/titel voor de sectie
data-reload kan een link bevatten naar de function(el) (optional)
data-id een aangepaste identificator voor het vervangen van alle ~ID~ In de inhoud (optional)
data-url kan een link bevatten naar de template (optional)

Goed om te weten:

Als u een extra inhoud wilt toevoegen aan de header aan de rechterkant, voeg dan gewoon binnen van het onderdeel bijvoorbeeld <div>BUTTON</div> toe.
U kunt secties dynamisch inschrijven/verwijzen via de component.import() of component.cancel() methoden.
Alle attributen van de sectie kunnen dynamisch worden gewijzigd (bijvoorbeeld data-title, data-parent, enz.).
Alle ~PATH~-afdrukken worden vervangen door de data-if-attributwaarde.
Alle ~ID~-afdrukken worden vervangen door de data-if-attributwaarde.
SET('path', 'if', 'right') geeft de inhoud aan de rechterkant

Gebruik het met <ui-component name="section">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>