# j-Layout

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

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: el
Content-SHA256: 8e38d2cafd22a81e370782a9a67b93c566ca8aad5e07e66af8bee9e39b425896
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

- Αυτό το συστατικό μπορεί να δημιουργήσει μια διάταξη για το 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`)

```js
{
	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 άδεια.

```html 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>
```