j-Centered

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

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

ΕΠΙΤΡΟΦΗ:

Ο όρος if {String} για την εμφάνιση της φόρμας, συγκρίνεται με την τιμή μέσα στο data-jc-path
reload {String} σύνδεση σε ένα παγκόσμιο function(form_component) και εκτελείται εάν η φόρμα εμφανίζεται
autofocus {Boolean/String} μπορεί να επικεντρωθεί σε μια εισαγωγή. String === jQuery selector για την εισαγωγική
default {String} ένα σύντομο alias για το DEFAULT(default, true)
Το zindex {Number} μπορεί να επηρεάσει τον δείκτη z (προεπιλεγμένο: 12)
Το closebutton {Boolean} μπορεί να κρύψει το κουμπί x (προεπιλεγμένο: false)
Το closeoutside {Boolean} κλείνει τη φόρμα όταν ο χρήστης κάνει κλικ εκτός της φόρμουλας (προεπιλογή: false)
ή το closeoutside {String} μπορεί να περιέχει έναν επιλεκτή jQuery που θα συμπεριληφθεί σε ένα κοντινό γεγονός
Το closeesc {Boolean} κλείνει τη φόρμα όταν ο χρήστης πιέζει το ESC
Το scrollbar {Boolean} επιτρέπει την προσαρμοσμένη γραμμή στροφής (προεπιλεγμένο: true)
visibleY {Boolean} εμφανίζει κάθετη γραμμή στροφής (προεπιλεγμένη: false)
close {String} σύνδεση σε ένα παγκόσμιο function() και εκτελείται εάν η φόρμα είναι κλειστή

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

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

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

Όλα τα κουμπιά με χαρακτηριστικό name="close" κλείνουν αυτόματα το στοιχείο
Όλα τα στοιχεία με το χαρακτηριστικό data-name="close" κλείνουν αυτόματα το στοιχείο

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

example.html

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, nam distinctio numquam dolore neque impedit, voluptate quam fugiat culpa minus.</div>
<br />
<a href="javascript:show()">Show</a>

<ui-component name="centered" path="form" config="if:login" class="hidden">
	<figure style="width:300px;margin:0 auto;background-color:rgba(100,100,100,0.1);display:block;padding:20px">
		<div><img src="https://www.totaljs.com/img/logo.svg" border="0" alt="Componentator" class="img-responsive" /></div>
		<br />
		<div class="m">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error nulla ratione possimus ducimus iusto porro, non laboriosam sunt reiciendis at.</div>
		<div class="center">
			<button name="close">CLOSE</button>
		</div>
	</figure>
</ui-component>

<script>
	var form = '';
	function show() {
		SET('form', 'login');
	}
</script>