j-FixedModal

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Csak a +v17-vel működik
Az összetevő a tartalmat a <body> címké alatt mozgatja (a pozíció miatt)

konfiguráció:

width {Number} modál max szélesség
if {String} a modál megjelenítésének feltétele, összehasonlítva az értékkel a path
A reload {String} egy globális funkcióhoz kapcsolódik, és akkor fut, ha a formanyomtatvány
submit {String} link egy globális funkcióhoz, és akkor fut, ha a benyújtási gomb megnyomja
A cancel {String} egy globális funkcióhoz kapcsolódik, és a törlés gomb megnyomása esetén fut.
A enter {Boolean} automatikusan rögzíti a enter kulcsot, és elvégzi a benyújtást (például: false)
A autofocus {Boolean/String} egy bevitelt fókuszálhat. String === jQuery selector a beviteli
default {String} rövid alias a DEFAULT(default, true) számára
A zindex {Number} befolyásolhatja a z-indexet (default: 12)

Jó tudni:

A j-FixedModal tartalma három részre oszlik: header, body és footer. Minden résznek meg kell határoznia.A komponens CSS osztályokat ad minden részhez, például az első div tartalmazza a ui-fixedmodal-header, a második ui-fixedmodal-body és a harmadik ui-fixedmodal-footer.

Ez az összetevő támogatja a <script type="text/html"> tartalmának dinamikus értékelését.Az alábbi példa HTML-vel ellátott forgatókönyvet tartalmaz, és a komponens értékeli a tartalmat, ha a j-Modal megjelenik (csak egyszer).

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

Használja a <ui-component name="fixedmodal">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

example.html

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores illum quaerat quisquam voluptatem soluta necessitatibus accusamus possimus consequuntur nihil nam. Fugiat unde nemo, ratione magnam. Placeat minima, fugiat quo a. Esse commodi temporibus quos numquam suscipit! Mollitia accusantium temporibus nisi quibusdam alias provident rerum impedit, fuga officia non illum unde magni recusandae eos ducimus, maiores, dolore voluptates reiciendis accusamus odit quo ipsum veniam. Consectetur vitae minima dolor, possimus earum quae necessitatibus quia! Ex reiciendis nam eius adipisci harum ad. Atque fuga sint deleniti repellat quisquam. Deserunt laudantium maiores dicta, aliquid quidem id veritatis sint rem iusto. Ab similique culpa quasi!

<ui-component name="fixedmodal" path="common.form" config="if:folder;submit:folder_submit" class="hidden">

	<!-- HEADER -->
	<div>
		<i class="ti ti-folder orange"></i>
		<strong>New folder</strong>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus qui facilis magni porro reiciendis.
	</div>

	<!-- BODY -->
	<div>
		CONTENT Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit illo rem dicta temporibus beatae quibusdam dolore fugit, quidem nostrum. Hic asperiores enim ipsum maxime. Hic nisi nulla iusto id commodi?
	</div>

	<!-- FOOTER -->
	<div>
		<button name="cancel">Cancel</button>
		<button name="submit"><i class="ti ti-plus"></i>Create folder</button>
	</div>

</ui-component>

<script>

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

	var common = {};

	// Show the form
	common.form = 'folder';

</script>