j-Section

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

menține o înălțime fixă a procentului
Utilizare excelentă pentru aplicații intranet
Suport pentru releasing

Configurarea:

height {Number} - un procent de înălțime
parent {String} opțional, un container cu înălțime fixă poate fi windowValoarea deficitară: parent elementului .
minheight {Number} o înălțime minimă în pixeli (default: 0 - disabilitate)
scroll {Boolean} permite rularea verticala (default: false - disabilitate)
scrollbar {Boolean} arată scrollbar (default: false)
delay {Number} msec. reîncărcă caseta dacă valoarea este schimbată în funcție de cale (default: 100)
visibleY {Boolean} Întotdeauna arată Y Scrollbar (defaultă pentru: false)
visibleX {Boolean} Întotdeauna arată X Scrollbar (defaultă pentru: false)
scrolltop {Boolean} se întoarce automat la vârf dacă path este modificat (default: false)
margin {Number} opțional, o marjă superioară / inferioară împreună (suporturi auto care este calculată de la offset.top, standard: 0)
marginxs {Number} opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului xs
marginsm opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului sm
marginmd opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului md
marginlg opțional, o marjă superioară / inferioară împreună pentru lățimea ecranului lg
invisible {Boolean} dacă true apoi secțiunea stabilește clasa invisible atunci când este rendering (default: true)
autofocus {Boolean/String} poate concentra o intrare. String === jQuery selector pentru intrarea
back {String} un titlu pentru butonul din spate (default: Back)
Încălcarea de animație delayanim {Number} (default: 100)
scrollbarshadow {Boolean} adaugă umbra pentru scrollbars (default: false)
backexec {String} este un link la function(parent) care captează butonul de întoarcere (acesta împiedică comportamentul standard)

Metode:

component.scrolltop(val) scrolluri și
component.scrollbottom(val) scrolls Y din partea inferioară
component.resize() rezizează containerul (reacționează automat la evenimentele resize)
component.resizescrollbar() resizează scrollbarul personalizat (adică pentru cazuri speciale)
NEW: component.import(url) importă o nouă secțiune din adresa URL, răspunsul trebuie să fie în formularul <section data-if="...."
NEW: component.import(html) importă o nouă secțiune din HTML în formularul <section data-if="...."
NEW: component.import(element) importează o nouă secțiune din elementul brut SECTION
NEW: component.cancel([id]) îndepărtează în mod dinamic secțiunea

Definiţie:

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

Atributele secțiunii:

data-if trebuie să conțină o condiție de afișare
data-parent poate conține un părinte data-if
data-title conține o etichetă/titlu pentru secțiunea
data-reload poate conține un link la function(el) (opțional)
data-id conține un identificator personalizat pentru a înlocui toate frazele ~ID~ din conținut (opțional)
data-url poate conține un link la șablonul (opțional)

bine să știi:

Dacă doriți să adăugați un conținut suplimentar în titlul de pe partea dreaptă, pur și simplu adăugă în interiorul componentei, de exemplu <div>BUTTON</div>.
Puteți introduce / elimina în mod dinamic secțiunile prin metode component.import() sau component.cancel().
Toate atributele secțiunii pot fi modificate în mod dinamic (de exemplu, data-title, data-parent, etc.).
Toate frazele ~PATH~ vor fi înlocuite cu valoarea atributiei data-if
Toate frazele ~ID~ vor fi înlocuite cu valoarea atributiei data-if
SET('path', 'if', 'right') va anima conținutul pe partea dreaptă

Utilizați-l cu <ui-component name="section">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>