j-Section

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Осигурява фиксирана височина на процентите
Изключително полезни за интранет приложения
Поддръжка на releasing

Конфигуриране:

height {Number} Процент на височината
parent {String} Избор на контейнер с фиксирана височина може да бъде windowДефинирана стойност: parent Елементът
minheight {Number} минимална височина в пиксели (дефолт: 0 - деактивиран)
scroll {Boolean} позволява вертикално скалиране (дефолт: false - деактивиран)
scrollbar {Boolean} показва скалбар (дефолт: false)
delay {Number} msec. рецизира кутията отново, ако стойността се променя в съответствие с маршрута (предварително: 100)
visibleY {Boolean} все още показва Y скалбар (дефолт: false)
visibleX {Boolean} все още показва X скалбар (дефолт: false)
scrolltop {Boolean} се върти автоматично до върха, ако path е променян (предварително: false)
margin {Number} опционално, горната / долната маржа заедно (поддръжка на auto която се брои от offset.top, дефолт: 0)
marginxs {Number} опция, горна/долна маржа заедно за ширина на екрана xs
marginsm опция, горна/долна маржа заедно за ширина на екрана sm
marginmd опция, горна/долна маржа заедно за ширина на екрана md
marginlg опция, горна/долна маржа заедно за ширина на екрана lg
invisible {Boolean} ако true тогава секцията поставя класа на invisible когато се представя (предварително: true)
autofocus {Boolean/String} може да се фокусира върху входа. String === jQuery selector за входа
back {String} заглавие за бутона обратно (предварително: Back)
delayanim {Number} Анимация закъснение (дефолт: 100)
scrollbarshadow {Boolean} добавя сянка за скалбарки (предварително: false)
backexec {String} е връзката към function(parent), която улавя бутона назад (това предотвратява стандартното поведение)

Методи:

component.scrolltop(val) Скриншоти и
component.scrollbottom(val) Скръгли Y от долната страна
component.resize() резиз контейнер (то реагира автоматично на resize събития)
component.resizescrollbar() резиз персонализирано скалбар (целенасочено за специални случаи)
NEW: component.import(url) внася нова секция от URL адреса, отговорът трябва да бъде във формата на <section data-if="...."
NEW: component.import(html) внася нова секция от HTML във формата на <section data-if="...."
NEW: component.import(element) внася нова секция от суров елемент SECTION
NEW: component.cancel([id]) премахва секцията динамично

Дефиниция:

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

Атрибути на секцията:

data-if трябва да съдържа условие за показване
data-parent може да съдържа родител data-if
data-title съдържа етикет/заглавие за секцията
data-reload може да съдържа връзка към function(el) (опционално)
data-id съдържа персонализиран идентификатор за замяна на всички фрази на ~ID~ в съдържанието (опционално)
data-url може да съдържа връзка към шаблона (опционално)

Добре е да се знае:

Ако искате да добавите допълнително съдържание в заглавието на дясната страна, просто прикрепете вътре в компонента например <div>BUTTON</div>.
Можете динамично да вмъкнете/изтриете секции чрез component.import() или component.cancel() методи.
Всички атрибути на секцията могат да се променят динамично (например data-title, data-parent, и т.н.).
Всички фрази на ~PATH~ ще бъдат заменени с стойността на атрибута на data-if
Всички фрази на ~ID~ ще бъдат заменени с стойността на атрибута на data-if
SET('path', 'if', 'right') ще анимира съдържанието на дясната страна

Използвайте го с <ui-component name="section">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>