j-Modal

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Είναι μια απλή εναλλακτική λύση στο j-Form.

Λειτουργεί μόνο με +v17
Το συστατικό μεταφέρει το περιεχόμενο αυτού του συστατικού κάτω από την ετικέτα <body> (εξαιτίας της θέσης)

ΕΠΙΤΡΟΦΗ:

Ο τίτλος του title {String} (αλλάζει ένα στοιχείο HTML στην ετικέτα)
width {Number} Μαγικό πλάτος
Ο όρος if {String} για την εμφάνιση του μοντέλου, συγκρίνεται με την τιμή μέσα στο path
icon {String} Συνολική εικονική χωρίς ti-
reload {String} σύνδεση σε ένα παγκόσμιο function(modal_component) και εκτελείται εάν η φόρμα εμφανίζεται
submit {String} σύνδεση σε ένα παγκόσμιο function(hide) και εκτελείται εάν το κουμπί υποβολής πιέζεται
cancel {String} σύνδεση σε ένα παγκόσμιο function(hide) και εκτελείται εάν το κουμπί ακύρωσης πιέζεται
Το enter {Boolean} καταγράφει αυτόματα το κλειδί enter και εκτελεί την υποβολή (προεπιλεγμένη: false)
Το center {Boolean} συγκεντρώνει τη μορφή στη μέση της οθόνης
autofocus {Boolean/String} μπορεί να επικεντρωθεί σε μια εισαγωγή. String === jQuery selector για την εισαγωγική
default {String} ένα σύντομο alias για το DEFAULT(default, true)
Το zindex {Number} μπορεί να επηρεάσει τον δείκτη z (προεπιλεγμένο: 12)
align {Number} Μοναδικός Σύνδεσμος 0 Ο προεπιλεγμένος (default) 1 Ο δεξί κάτω, 2 Αριστερά κάτω, 3 Αριστερά στην κορυφή 4 Το σωστό top
Το ύψος του height {Number} είναι μικρότερο από το μέγεθος του height.
NEW bg {Boolean} μπορεί να ενεργοποιήσει / απενεργοποιεί ένα στρώμα υπόβαθρου (προεπιλεγμένο: true)
NEW scrollbar {Boolean} μπορεί να ενεργοποιήσει / απενεργοποιεί τη γραμμή στροφής (προεπιλεγμένη: false)

Καλό να ξέρεις:

Το περιεχόμενο του j-Modal χωρίζεται σε 3 μέρη: header, body και footer.Κάθε μέρος πρέπει να οριστεί.Το στοιχείο προσθέτει κλάσεις CSS σε κάθε μέρος, για παράδειγμα το πρώτο div θα περιέχει ui-modal-header, το δεύτερο ui-modal-body και το τρίτο ui-modal-footer.

Αυτό το στοιχείο υποστηρίζει τη δυναμική αξιολόγηση του περιεχομένου <script type="text/html">Το παρακάτω παράδειγμα περιέχει ένα σενάριο με HTML και το συστατικό αξιολογεί το περιεχόμενο εάν η j-Modal Θα εμφανιστεί (μόνο μία φορά)

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

Χρησιμοποιήστε το με <ui-component name="modal">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

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>