j-FixedModal

jComponent 20 · jcomponent@20 component Esempio caricato con jComponent 20

Funziona solo con +v17
Il componente sposta il contenuto di questo componente sotto la tag <body> (a causa della posizione)

Configurazione:

width {Number} di larghezza massima
if {String} condizione per la mostra del modale, è paragonato al valore all'interno di path
reload {String} è collegato a una funzione globale e viene eseguito se il modulo mostra
submit {String} è collegato a una funzione globale e viene eseguito se il pulsante di presentazione viene premuto
cancel {String} è collegato a una funzione globale e viene eseguito se il pulsante di cancellazione viene premuto
enter {Boolean} cattura automaticamente la chiave enter e esegue la presentazione (default: false)
autofocus {Boolean/String} può concentrare un input. String === jQuery selector per l'ingresso
default {String} un breve alias per DEFAULT(default, true)
zindex {Number} può influenzare l'indice z (default: 12)

Buono sapere:

Il contenuto del j-FixedModal è suddiviso in 3 parti: header, body e footer. Ogni parte deve essere definita. il componente aggiunge classi CSS a ciascuna parte, ad esempio il primo div contiene ui-fixedmodal-header, secondo ui-fixedmodal-body e terzo ui-fixedmodal-footer.

Questo componente supporta una valutazione dinamica del contenuto di <script type="text/html">. L'esempio qui sotto contiene uno script con HTML e il componente valuta il contenuto se il j-Modal sarà visualizzato (solo una volta).

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

Utilizzare con <ui-component name="fixedmodal">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>