j-Section

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Utrzymuje stałą wysokość procentową
Doskonałe zastosowanie do aplikacji intranetowych
Wsparcie releasing

Konfiguracja:

height {Number} - odsetek wysokości
parent {String} Opcjonalnie, pojemnik o stałej wysokości może być windowPodstawowe wartości: parent elementy .
minheight {Number} minimalna wysokość w pikselach (default: 0 - nie jest dostępny)
scroll {Boolean} umożliwia pionowe skręcanie (default: false - nie jest włączony)
scrollbar {Boolean} wyświetla pasek skręcania (default: false)
delay {Number} msec. odtwarza pudełko ponownie, jeśli wartość jest zmieniona zgodnie z ścieżką (default: 100)
visibleY {Boolean} wciąż wyświetla pasek skręcania Y (default: false)
visibleX {Boolean} wciąż wyświetla pasek skręcania X (default: false)
scrolltop {Boolean} przechodzi automatycznie do góry, jeśli path jest zmieniony (default: false)
margin {Number} opcjonalny, górna / dolna marża razem (podporuje auto licząc od offset.top, domyślnie: 0)
marginxs {Number} opcjonalny, górna / dolna margina razem dla szerokości ekranu xs
marginsm opcjonalny, górna / dolna margina razem dla szerokości ekranu sm
marginmd opcjonalny, górna / dolna margina razem dla szerokości ekranu md
marginlg opcjonalny, górna / dolna margina razem dla szerokości ekranu lg
invisible {Boolean} jeśli true to sekcja ustanawia klasę invisible podczas renderowania (default: true)
autofocus {Boolean/String} może skupić się na wejściu. String === jQuery selector dla wejścia
back {String} tytuł dla przycisku z tyłu (default: Back)
Opóźnienie w animacji delayanim {Number} (default: 100)
scrollbarshadow {Boolean} dodaje ciemność do scrollbars (default: false)
backexec {String} link do function(parent) który złapać przycisk z powrotem (zabronione jest standardowe zachowanie)

Metody:

component.scrolltop(val) skrócenie i
component.scrollbottom(val) skręca Y z dolnej strony
component.resize() rezygnuje z kontenera (reaguje automatycznie na wydarzenia resize)
component.resizescrollbar() odtwarza pasek skręcania (dotyczy specjalnych przypadków)
NEW: component.import(url) importuje nową sekcję z adresu URL, odpowiedź musi być w formularzu <section data-if="...."
NEW: component.import(html) importuje nową sekcję z HTML w formularzu <section data-if="...."
NEW: component.import(element) importuje nową sekcję z elementu surowego SECTION
NEW: component.cancel([id]) dynamicznie usuwa sekcję

Definicja:

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

Sekcja atrybutów:

data-if musi zawierać warunek wyświetlania
data-parent może zawierać rodzic data-if
data-title zawiera etykietę/tytuł dla sekcji
data-reload może zawierać link do function(el) (opcjonalnie)
data-id zawiera indywidualny identyfikator do zastąpienia wszystkich fraz ~ID~ w treści (opcjonalnie)
data-url może zawierać link do szablonu (opcjonalnie)

Dobrze wiedzieć:

Jeśli chcesz dodać dodatkową zawartość do nagłówka po prawej stronie, po prostu włącz wewnątrz elementu np. <div>BUTTON</div>.
Możesz dynamicznie wstawić / usunąć sekcje za pomocą metod component.import() lub component.cancel().
Wszystkie atrybuty sekcji można zmienić dynamicznie (np. data-title, data-parent, itp.).
Wszystkie frazy ~PATH~ zostaną zastąpione przez wartość atrybutową data-if
Wszystkie frazy ~ID~ zostaną zastąpione przez wartość atrybutową data-if
SET('path', 'if', 'right') będzie animować treść po prawej stronie

Użyj go z <ui-component name="section">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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>