j-Section

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

Διατηρεί ένα σταθερό ποσοστό
Εξαιρετική χρήση για εφαρμογές intranet
Υποστήριξη releasing

ΕΠΙΤΡΟΦΗ:

height {Number} Το ποσοστό του ύψους
parent {String} επιλογή, ένα δοχείο με σταθερό ύψος, μπορεί να είναι windowΗ υποτιθέμενη αξία: parent Το στοιχείο.
minheight {Number} ελάχιστο ύψος σε pixels (προεπιλεγμένο: 0 - απενεργοποιημένο)
Το scroll {Boolean} επιτρέπει την κάθετη στρογγυλοποίηση (προεπιλεγμένη: false - απενεργοποιημένη)
scrollbar {Boolean} εμφανίζει στρογγυλό μπαρ (προεπιλεγμένο: false)
Το delay {Number} msec. επαναλαμβάνει το κουτί εάν η τιμή αλλάξει σύμφωνα με τη διαδρομή (προεπιλογή: 100)
Το visibleY {Boolean} εμφανίζει ακόμα το στρογγυλό φράγμα Y (προεπιλεγμένο: false)
Το visibleX {Boolean} εμφανίζει ακόμα το στρογγυλό φράγμα X (προεπιλεγμένο: false)
Το scrolltop {Boolean} περιστρέφεται αυτόματα στην κορυφή εάν το path αλλάξει (προεπιλεγμένο: false)
margin {Number} προαιρετική, μια κορυφαία / κάτω περιθώριο μαζί (υποστήριξη auto η οποία υπολογίζεται από offset.top, προεπιλογή: 0)
marginxs {Number} προαιρετική, μια κορυφαία / κάτω περιθώριο μαζί για το πλάτος οθόνης xs
marginsm προαιρετική, μια κορυφαία / κάτω περιθώριο μαζί για το πλάτος οθόνης sm
marginmd προαιρετική, μια κορυφαία / κάτω περιθώριο μαζί για το πλάτος οθόνης md
marginlg προαιρετική, μια κορυφαία / κάτω περιθώριο μαζί για το πλάτος οθόνης lg
invisible {Boolean} αν το τμήμα true στη συνέχεια θέτει την τάξη invisible όταν παραδίδεται (προεπιλεγμένη: true)
autofocus {Boolean/String} μπορεί να επικεντρωθεί σε μια εισαγωγή. String === jQuery selector για την εισαγωγική
back {String} Ο τίτλος του κουμπιού πίσω (default): Back)
delayanim {Number} καθυστέρηση (προεπιλεγμένη: 100)
Το scrollbarshadow {Boolean} προσθέτει σκιά για scrollbars (προεπιλεγμένο: false)
backexec {String} μια σύνδεση με το function(parent) που καταγράφει το κουμπί πίσω (αποτρέχει την κανονική συμπεριφορά)

Μέθοδοι:

component.scrolltop(val) Σκάλες Y
component.scrollbottom(val) στροφές Y από την κάτω πλευρά
component.resize() αναζωογονεί το δοχείο (αποδίδει αυτόματα σε γεγονότα resize)
component.resizescrollbar() επαναπροσαρμοσμένη γραμμή στρογγυλείας (προορίζεται για ειδικές περιπτώσεις)
NEW: Το component.import(url) εισάγει μια νέα ενότητα από τη διεύθυνση URL, η απάντηση πρέπει να είναι στη φόρμα <section data-if="...."
NEW: Το component.import(html) εισάγει ένα νέο τμήμα από το HTML στη φόρμα <section data-if="...."
NEW: Το component.import(element) εισάγει ένα νέο τμήμα από το πρώτο στοιχείο SECTION
NEW: component.cancel([id]) αφαιρεί δυναμικά το τμήμα

Ορισμός:

<ui-component name="section" path="path">

	<!-- path must have same value as "data-if" attribute -->
	<section data-if="1" data-title="A title">

	</section>

	<!-- path must have same value as "data-if" attribute -->
	<!-- "data-parent" enables Back button in the header and after click the component sets value from "data-parent" attribute -->
	<section data-if="2" data-parent="1" data-title="A title">

	</section>

	<!-- GOOD TO KNOW: Dynamic compilation -->
	<section data-if="3" data-parent="2" data-title="A title" data-back="link_to_function">

		<!-- SCRIPT or TEMPLATE -->
		<script type="text/html">
			Will be compiled and rendered when the section will be displayed
		</script>

	</section>

	<!-- Template from URL address -->
	<section data-if="4" data-parent="2" data-title="A title" data-url="LINK_TO_HTML_TEMPLATE"></section>

</ui-component>

Τμήμα Ιδιότητες:

Το data-if πρέπει να περιέχει μια προϋπόθεση για την εμφάνιση
Το data-parent μπορεί να περιέχει ένα γονικό data-if
Το data-title περιέχει μια ετικέτα / τίτλο για το τμήμα
Το data-reload μπορεί να περιέχει σύνδεση με το function(el) (επιλεγμένο)
Το data-id περιέχει ένα προσαρμοσμένο αναγνωριστικό για την αντικατάσταση όλων των φράσεων του ~ID~ στο περιεχόμενο (επιλεκτικά)
Το data-url μπορεί να περιέχει σύνδεση με το πρότυπο (επιλεγμένο)

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

Εάν θέλετε να προσθέσετε πρόσθετο περιεχόμενο στο κεφάλαιο στη δεξιά πλευρά, απλά προσθέστε μέσα στο στοιχείο για παράδειγμα <div>BUTTON</div>.
Μπορείτε να εισαγάγετε / αφαιρέσετε δυναμικά τμήματα μέσω των μεθόδων component.import() ή component.cancel().
Όλα τα χαρακτηριστικά της ενότητας μπορούν να αλλάξουν δυναμικά (π.χ. data-title, data-parent, κλπ.).
Οι φράσεις ~PATH~ αντικαθίστανται από την τιμή χαρακτηρισμού data-if
Οι φράσεις ~ID~ αντικαθίστανται από την τιμή χαρακτηρισμού data-if
Το SET('path', 'if', 'right') θα μεταφέρει το περιεχόμενο στη δεξιά πλευρά

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

example.html

<style>
	body { padding: 0; margin: 0; overflow: hidden; }
</style>

<ui-component name="section" path="common.section" config="parent:window;scrollbar:1" default="''">

	<section class="hidden invisible" data-if="1" data-title="Section 1">
		<div class="padding">
			<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
				<div>SECTION 1</div>
				<div class="exec link" data-exec="showsection2">Show section 2</div>
			</div>
		</div>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2">
		<script type="text/html">
			<div class="padding">
				<div style="background-color:#F0F0F0;margin:30px auto;padding:30px;max-width:600px;border-radius:10px">
					SECTION 2
				</div>
			</div>
		</script>
	</section>

	<section class="hidden invisible" data-if="2" data-parent="1" data-title="Section 2" data-url="LINK_TO_TEMPLATE"></section>
</ui-component>

<script>

	function showsection2() {
		SET('common.section', '2');
	}

	setTimeout(showsection2, 1000);

</script>