j-Modal

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Je to jednoduchá alternativa k j-Form.

Práce pouze s +v17
Komponenta pohybuje obsah této složky pod označením <body> (z důvodu umístění)

Konfigurace:

title {String} modalní název (změňuje HTML v prvku štítku v hlavě)
width {Number} Modální max. šířka
if {String} podmínka pro zobrazení modal, je ve srovnání s hodnotou v rámci path
icon {String} Ikony bez ti-
reload {String} odkaz na globální function(modal_component) a je spuštěn, pokud je formulář zobrazován
submit {String} odkaz na globální function(hide) a je spuštěn, pokud je tlačítko předložení stisknuto
cancel {String} odkaz na globální function(hide) a je spuštěn, pokud je tlačítko zrušení stisknuto
enter {Boolean} automaticky zaznamenává klíč enter a provádí předání (podmínkou: false)
center {Boolean} se soustředí na obrazovku
autofocus {Boolean/String} může soustředit vstup. String === jQuery selector pro vstup
default {String} krátký alias pro DEFAULT(default, true)
zindex {Number} může mít vliv na index z (předvolený: 12)
align {Number} Alignované modely 0 v centru (default) 1 pravé dolní, 2 v dolní části, 3 V horní části, 4 Správný top
height {Number} min. výška, pokud je obsah menší než definovaný height
NEW bg {Boolean} může aktivovat/odstranit pozadí (podle předvolby: true)
NEW scrollbar {Boolean} může aktivovat/odstranit skříňku (předvolený: false)

Dobré vědět:

Obsah j-Modal je rozdělen na 3 části: header, body a footer.Každá část musí být definována.Komponent přidává třídy CSS do každé části, například první div bude obsahovat ui-modal-header, druhý ui-modal-body a třetí ui-modal-footer.

Tato složka podporuje dynamickou hodnocení obsahu <script type="text/html">. Příklad níže obsahuje skript s HTML a složka hodnotí obsah, pokud se zobrazí j-Modal (pouze jednou).

<ui-component name="modal" path="path" config="config">
	<script type="text/html">
		A CONTENT
	</script>
</ui-component>

Použijte ji s <ui-component name="modal">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

example.html

<ui-component name="modal" path="common.form" config="if:user;width:600;submit:usermodal_submit;icon:home" class="hidden">

	<!-- HEADER -->
	<div>
		<span class="link cancel"><i class="ti ti-times"></i></span>
		<label>Your title</label>
	</div>

	<!-- BODY -->
	<div>
		<div class="padding">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi rerum, consequatur quod quisquam blanditiis voluptatum! Assumenda harum, quaerat iste nisi.
		</div>
	</div>

	<!-- FOOTER -->
	<div>
		<span class="link cancel">Cancel</span>
		<button name="submit"><i class="ti ti-save"></i>Submit form</button>
	</div>

</ui-component>

<script>

	function usermodal_submit(hide) {
		alert('SUBMIT');
		hide();
	}

	var common = {};

	// Show the form
	common.form = 'user';
</script>