j-Layout

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

Αυτό το συστατικό μπορεί να δημιουργήσει μια διάταξη για το SPA σας.Αυτό το συνημμένο είναι λίγο πιο δύσκολο να κατανοηθεί, αλλά είναι πολύ χρήσιμο. j-Layout χρησιμοποιεί jComponent +v17.

ΕΠΙΤΡΟΦΗ:

Το parent {String} μπορεί να περιέχει τον επιλεκτή parent, window ή jQuery για τη μέθοδο closest (προεπιλογή: window)
Το margin {Number} προσθέτει περιθώριο για το height (προεπιλεγμένο: 0)
Το remember {Boolean} μπορεί να θυμάται τις τελευταίες ρυθμίσεις διάταξης για επαναφορά (προεπιλογή: true)
space {Number} εσωτερικό, περιέχει χώρο μεταξύ των πάνελ (προεπιλεγμένο: 1)
border {Number} εσωτερικό, περιέχει ένα μέγεθος ορίου (προεπιλεγμένο: 0)
resize {String} εσωτερική, μια πορεία προς τη μέθοδο που εκτελείται όταν η διάταξη αναδιαμορφώνεται
Το autoresize {Boolean} επιτρέπει αυτο-απομίμηση (προεπιλεγμένο: true)

Μέθοδοι:

component.refresh() αναζωογόνηση
Το component.resize() αναβαθμίζει
Το component.reset() εκτελεί επαναφορά
Το component.layout(name) αλλάζει μια διάταξη (όπως δύο τρόπους σύνδεσης δεδομένων)
Το component.rebind(code_string) δημιουργεί μια νέα διάταξη
Το component.lock(type, [boolean]) κλείνει το πάνελ

Τύποι Panel:

left αριστερά, ανακυκλώσιμο
right δεξιά πάνελ, ανακυκλώσιμη
Το δεξί πίνακας right2 θα είναι δίπλα στο αριστερό πίνακα και χρησιμοποιεί το κλειδί right στην επιλογή, επαναχρησιμοποίητο
top κορυφαίο πάνελ, αναστρέψιμο (είναι το πάνελ πάνω από όλα τα πάνελ)
Το ανώτατο πίνακας top2, επαναχρησιμοποιείται και χρησιμοποιεί το κλειδί top στην επιλογή (είναι μεταξύ του πίνακα left και right)
bottom κάτω πάνελ, ανακυκλώσιμη (είναι το πάνελ στο κάτω μέρος όλων των πάνελ)
bottom2 κάτω πάνελ, επαναχρησιμοποίητο και χρησιμοποιεί το κλειδί bottom στην επιλογή (είναι μεταξύ left και right πάνελ)
main κύριο πάνελ, δεν μπορεί να επαναχρησιμοποιηθεί και το μέγεθος υπολογίζεται αυτόματα

Λάιουτ:

Η κατασκευή της διάταξης είναι πολύ εύκολη και με πολλές δυνατότητες. η διάταξη πρέπει να έχει τη δική της δομή HTML. Δείτε το παράδειγμα. Το παρακάτω παράδειγμα περιγράφει μόνο τα μετα-δεδομένα της διάθεσης.

Το size {Number/String} μπορεί να περιέχει ένα ύψος / πλάτος πάνελ σύμφωνα με τον τύπο του πάνελ. ο αριθμός 120 καθορίζει τα pixels και το String 100% μπορεί να καθορίσει το ποσοστό
minsize {Number/String} είναι ένα ελάχιστο μέγεθος του πάνελ ενώ το πάνελ αναζωογονεί (προεπιλεγμένο: size Αξία
Το maxsize {Number/String} είναι το μέγιστο μέγεθος του πίνακα, ενώ ο πίνακας επαναλαμβάνεται (επιλογή: αυτόματα υπολογισμένο)
Το resize {Boolean} επιτρέπει την αναδιάρθρωση του πίνακα με εξαίρεση το πίνακας main (αυτός υπολογίζεται αυτόματα)
Το show {Boolean} επιτρέπει την ορατότητα (προεπιλεγμένο: false)

{
	top: { size: 80, resize: true, minsize: 50 }, // top panel
	right: { size: 100 },
	bottom: { size: 100 }, // bottom panel
	left: { size: 100, resize: true }, // left panel
	main: {}, // main panel

	// Can contain a different template for various display types
	// lg = Large display, md = Medium display, sm = Small display, xs = Extra small display
	md: {
		top: { show: true, size: 80 },
		bottom: { show: false },
		left: { show: false },
		main: { show: true }
	},

	// Custom layouts
	detail: {

		// Custom display types in custom layouts
		md: {
			top: { show: true },
			bottom: { show: true },
			main: { show: true },
			left: { show: false },
			right: { show: true, size: 300 }
		},
		xs: {
			top: { show: true },
			bottom: { show: true },
			main: { show: false },
			left: { show: false },
			right: { show: true, size: '100%' }
		}
	}
}

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

ΣΗΜΑΝΤΙΚΟ: Αυτό το στοιχείο πρέπει να περιέχει τα μετα-δεδομένα της διάταξης που είναι ενσωματωμένα στο <script type="text/plain"></script>
Κάθε πάνελ είναι το στοιχείο section και πρέπει να περιέχει χαρακτηριστικό data-type="top" με τύπο πάνελ
Ορίστε μόνο τα πάνελ που θα χρησιμοποιήσετε
Η παραγγελία όλων των στοιχείων section δεν είναι σημαντική
top2 χρησιμοποιεί το κλειδί επιβεβαίωσης top
right2 χρησιμοποιεί το κλειδί επιβεβαίωσης right
bottom2 χρησιμοποιεί το κλειδί επιβεβαίωσης bottom

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

example.html

<style>
	.ui-layout-section { font-size: 11px; }
</style>

<div style="width:500px;height:300px">
	<ui-component name="layout" path="mylayout" config="parent:parent" class="invisible">

		<!-- META DATA OF THE LAYOUT -->
		<!-- VERY IMPORTANT -->
		<script type="text/plain">
			{
				top: { size: 80, resize: true },
				bottom: { size: 100 },
				left: { size: 100, minsize: 50, resize: true },
				right: { size: 100 },
				main: {},
				detail: {
					left: { show: false },
					right: { show: true, size: '100%' },
					bottom: { show: false },
					main: { show: false }
				}
			}
		</script>

		<!-- PANEL IN LAYOUT -->
		<section data-type="top">
			TOP
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="main">
			MAIN
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="right">
			RIGHT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="left">
			LEFT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="bottom">
			BOTTOM
		</section>

	</ui-component>
</div>

<br />

<div style="width:500px;height:300px">
	<ui-component name="layout" config="parent:parent" class="invisible">
		<script type="text/plain">
			{
				top: { size: 80, resize: 1 },
				bottom: { size: 100 },
				left: { size: 100 },
				right: { size: 100 },
				main: {}
			}
		</script>

		<section data-type="top2">
			TOP2
		</section>

		<section data-type="main">
			MAIN
		</section>

		<section data-type="right">
			RIGHT
		</section>

		<section data-type="left">
			LEFT
		</section>

		<section data-type="bottom2">
			BOTTOM2
		</section>

	</ui-component>
</div>

<script>

	var mylayout = '';

	setInterval(function() {
		SET('mylayout', mylayout === 'detail' ? '' : 'detail');
	}, 5000);

	setInterval(function() {
		SETTER('layout', 'lock', 'right');
	}, 8000);

</script>