# j-Section

> j-Section: διατηρεί ένα σταθερό ποσοστό ύψους. μεγάλη χρήση για εφαρμογές intranet

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

- Διατηρεί ένα σταθερό ποσοστό
- Εξαιρετική χρήση για εφαρμογές 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])` αφαιρεί δυναμικά το τμήμα

__Ορισμός__:

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

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