# j-Templates

> Τα πρότυπα πρέπει να καθορίζονται στο στοιχείο <script type='text/html' data-name='NAMEOFTEMPLATE'>Tangular πρότυπο</script>.

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

- Πολλαπλά πρότυπα
- Δράκος & Drop
- Ετικέτες Scrollbars
- Το μενού συνδέσεων

__ΕΠΙΤΡΟΦΗ__:

- `template {String}` ένα μονοπάτι για να παρακολουθήσετε ένα πρότυπο όνομα
- Το `scrollbar {Boolean}` χρησιμοποιεί μια προσαρμοσμένη γραμμή στροφής (προεπιλεγμένο: `true`)
- Το `scrolltop {Boolean}` περιστρέφεται στην κορυφή εάν αλλάξει η πηγή (προεπιλογή: `true`)
- `visibleY {Boolean}` εμφανίζει το scrollbar Y (προεπιλεγμένο: `true`)
- `margin {Number}` μια κάθετη μάρκα (προεπιλεγμένη: `0`)
- `parent {String}` jQuery επιλεκτή για γονικό δοχείο λόγω `scrollbar` (προεπιλεγμένο: `auto`)
- Το `contextmenu {String}` είναι ένας δρόμος προς τη μέθοδο `function(e)` εάν ο χρήστης εκτοξεύει το μενού συνδέσμων.
- `emptyif {String}` προϋπόθεση για την εμφάνιση κενού περιεχομένου (προεπιλεγμένη: `!value || !value.length`)
- Η μέθοδος `drop {String}` είναι η μέθοδο `function(e, target, selel)`.
	- Η μέθοδος αξιολογείται εάν ο χρήστης ρίχνει ορισμένα αρχεία, τότε το `selel` δεν καθορίζεται
	- ή ο χρήστης τραβήξει & πέσει το στοιχείο με την `draggable` ΟΙ ΠΡΟΣΟΧΕΣ (`selel` Το επιχείρημα στο `target` Στόχος (το στόχο πρέπει να περιλαμβάνει `droppable` Κλάση

Τα πρότυπα πρέπει να καθορίζονται στο στοιχείο `<script type="text/html" data-name="NAME_OF_TEMPLATE">Tangular template</script>`. Αυτό το συστατικό υποστηρίζει ένα ειδικό πρότυπο που ονομάζεται `empty` το οποίο θα είναι ορατό εάν η επιλογή `emptyif` είναι έγκυρη.

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

```html example.html
<div>
	<span data-name="list" onclick="changetemplate(this)" style="text-decoration:underline;cursor:pointer;margin-right:5px">List</span>
	<span data-name="icons" onclick="changetemplate(this)" style="text-decoration:underline;cursor:pointer">Icons</span>
</div>
<br />

<div style="width:500px;height:300px;border:1px solid #E0E0E0">
	<ui-component name="templates" path="myfiles" config="template:mytemplate;drop:template_drop">

		<script type="text/html" data-name="list">
			<div class="list padding">
				{{ foreach m in value }}
					<div draggable="true"{{ if m.isfolder }} class="droppable"{{ fi }}>{{ m.name }}</div>
				{{ end }}
			</div>
		</script>

		<script type="text/html" data-name="icons">
			<div class="icons padding">
				{{ foreach m in value }}
					<span draggable="true" class="mr5 {{ if m.isfolder }} droppable{{ fi }}"><i class="{{ m.icon }} mr5"></i>{{ m.name }}</span>
				{{ end }}
			</div>
		</script>

	</ui-component>

</div>
<br />
<div><b>Without multiple templates:</b></div>
<div style="width:500px;height:300px;border:1px solid #E0E0E0;margin-top:10px">
	<ui-component name="templates" path="myfiles">
		<script type="text/html">
			<div class="list padding">
				{{ foreach m in value }}
					<div draggable="true"{{ if m.isfolder }} class="droppable"{{ fi }}>{{ m.name }}</div>
				{{ end }}
			</div>
		</script>
	</ui-component>
</div>

<script>
	var myfiles = [{ icon: 'ti ti-folder', name: 'temp', isfolder: true }, { icon: 'ti ti-file', name: 'logo.png' }, { icon: 'ti ti-file', name: 'logo.svg' }];
	var mytemplate = 'list';

	function changetemplate(el) {
		SET('mytemplate', el.getAttribute('data-name'));
	}

	function template_drop(e, target, item) {

		console.log(e, target, item);
		// @target {jQuery element}

		if (item) {
			// @item {jQuery element}
		} else {
			var files = e.target.files || e.originalEvent.dataTransfer.files;
		}
	}

</script>
```