j-FixedModal

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

Praca tylko z +v17
Składnik przenosi zawartość tego składnika pod etykietą <body> (z powodu pozycjonowania)

Konfiguracja:

width {Number} - maksymalna szerokość
warunek if {String} dla wyświetlania modułu, jest porównywany do wartości w ramach path
reload {String} łączy się z globalną funkcją i jest wykonywany, jeśli formularz pokazuje
submit {String} łączy się z globalną funkcją i jest wykonywany, jeśli naciśnięty jest przycisk wysłania
cancel {String} łączy się z globalną funkcją i jest wykonywany, jeśli naciśnięte jest przycisk odwołania
enter {Boolean} rejestruje klucz enter automatycznie i wykonuje wysłanie (default: false)
autofocus {Boolean/String} może skupić się na wejściu. String === jQuery selector dla wejścia
default {String} to krótki alias dla DEFAULT(default, true)
zindex {Number} może wpływać na indeks z (default: 12)

Dobrze wiedzieć:

Zawartość j-FixedModal jest podzielona na 3 części: header, body i footer.Każda część musi być zdefiniowana.Komponent dodaje klasy CSS do każdej części, na przykład pierwszy div będzie zawierać ui-fixedmodal-header, drugi ui-fixedmodal-body i trzeci ui-fixedmodal-footer.

Ten element obsługuje dynamiczną ocenę zawartości <script type="text/html">. Przykład poniżej zawiera skrypt z HTML, a składnik ocenia zawartość, jeśli j-Modal zostanie wyświetlony (tylko raz).

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

Użyj go z <ui-component name="fixedmodal">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

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>