j-Section

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Håller en fast procentsats
Bra användning för intranet-applikationer
Stöd för releasing

Konfigurera:

height {Number} en procentsats av höjd
parent {String} Alternativt, en behållare med fast höjd kan vara windowFörfalskad värde: parent Element är.
minheight {Number} en minimal höjd i pixlar (default: 0 - inaktiverad)
scroll {Boolean} möjliggör vertikal snurrning (default: false - inaktiverad)
scrollbar {Boolean} visar scrollbar (default: false)
delay {Number} msec. återställer rutan om värdet ändras enligt vägen (default: 100)
visibleY {Boolean} visar fortfarande Y scrollbar (default: false)
visibleX {Boolean} visar fortfarande X scrollbar (default: false)
scrolltop {Boolean} snurrar automatiskt till toppen om path ändras (default: false)
margin {Number} valfritt, en topp/bottom marginal tillsammans (stödjer auto som räknas från offset.top, standard: 0)
marginxs {Number} valfritt, en topp/bottom marginal tillsammans för xs skärmbredd
marginsm valfritt, en topp/bottom marginal tillsammans för sm skärmbredd
marginmd valfritt, en topp/bottom marginal tillsammans för md skärmbredd
marginlg valfritt, en topp/bottom marginal tillsammans för lg skärmbredd
invisible {Boolean} om true sedan avsnittet sätter invisible klass när det är rendering (default: true)
autofocus {Boolean/String} kan fokusera en inmatning. String === jQuery selector för inmatningen
back {String} en rubrik för bakknappen (default: Back)
delayanim {Number} animation försening (default: 100)
scrollbarshadow {Boolean} lägger till skugga för scrollbars (default: false)
backexec {String} en länk till function(parent) som fångar tillbaka knappen (det förhindrar standard beteende)

Metoder:

component.scrolltop(val) skruvar och
component.scrollbottom(val) skruvar Y från botten
component.resize() residerar behållaren (det reagerar automatiskt på resize händelser)
component.resizescrollbar() återställer anpassad skruvbar (målad för speciella fall)
NEW: component.import(url) importerar en ny sektion från URL-adressen, svaret måste vara i formuläret <section data-if="...."
NEW: component.import(html) importerar en ny sektion från HTML i formuläret <section data-if="...."
NEW: component.import(element) importerar en ny sektion från råelementet SECTION
NEW: component.cancel([id]) tar bort sektionen dynamiskt

definitioner:

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

Avsnitt attribut:

data-if måste innehålla ett villkor för visning
data-parent kan innehålla en parent data-if
data-title innehåller en etikett/titel för avsnittet
data-reload kan innehålla en länk till function(el) (alternativ)
data-id innehåller en anpassad identifierare för att ersätta alla ~ID~ fraser i innehållet (alternativt)
data-url kan innehålla en länk till mall (alternativt)

Bra att veta:

Om du vill lägga till ytterligare innehåll i rubriken till höger, bara bifoga inuti komponenten t.ex. <div>BUTTON</div>.
Du kan dynamiskt ange/lägsna sektioner via component.import() eller component.cancel() metoder.
Alla egenskaper i avsnittet kan ändras dynamiskt (t.ex. data-title, data-parent, etc.).
Alla ~PATH~-fraser ersätts med attributvärdet data-if
Alla ~ID~-fraser ersätts med attributvärdet data-if
SET('path', 'if', 'right') animerar innehållet till höger sida

Använd den med <ui-component name="section">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>