# j-Folder

> Το στοιχείο μπορεί να παραδώσει ένα περιεχόμενο όπως το πρόγραμμα περιήγησης αρχείων. ο δρόμος πρέπει να είναι στη φόρμα για παράδειγμα Directory/Directory/File.

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

Το στοιχείο μπορεί να παραδώσει περιεχόμενο όπως το πρόγραμμα περιήγησης αρχείων. `path` πρέπει να είναι στη φόρμα για παράδειγμα `Directory/Directory/File`.


__ΕΠΙΤΡΟΦΗ__:

- `up {String}` μια ετικέτα για το κουμπί Up (προεπιλεγμένο: `..`)
- `delimiter {String}` ένα οριοθέτης για το μονοπάτι (προεπιλεγμένο: `/`)
- `root {String}` μια ετικέτα για το πρώτο στοιχείο στο ψωμί (προεπιλεγμένο: `Root`)
- Το `scrollbar {Boolean}` επιτρέπει την προσαρμοσμένη γραμμή στροφής (προεπιλεγμένο: `true`)
- `scrollbarY {Boolean}` εμφανίζει Y scrollbar πάντα (προεπιλεγμένο: `false`)
- `delimiter {String}` ένα οριοθέτης για το μονοπάτι (προεπιλεγμένο: `/`)
- `options {String}` ένα μονοπάτι προς τη μέθοδο `function(item, el)` (ο χρήστης πρέπει να κάνετε κλικ στο δεξί κουμπί)
- `click {String}` ένα μονοπάτι προς την μεταβλητή ή τη μέθοδο `function(item)` (ο χρήστης πρέπει να κάνετε κλικ στο στοιχείο)
- `checked {String}` ένα μονοπάτι προς την μεταβλητή ή τη μέθοδο `function(checked_items, component)` (ο χρήστης πρέπει να ελέγξει το κουτί ελέγχου)
- `browse {String}` __IMPORTANT__: μια πορεία προς τη μέθοδο `function(path, next(ARRAY), [item])` η οποία πρέπει να επιστρέψει ένα περιεχόμενο για το συστατικό
- `parent {String}` επιλογή, ένα δοχείο με σταθερό ύψος, μπορεί να είναι `window`Η υποτιθέμενη αξία: `component.element()`
- `margin {Number}` προαιρετική, μια κορυφαία / κάτω περιθώριο μαζί (προεπιλεγμένη: `0`)
- `drop {String}` προαιρετική, μια πορεία προς τη μέθοδο που θα εκτελεστεί εάν ένα αρχείο θα τραβήξει & αποσπάσει
- `key {String}` προαιρετική, ένα κλειδί όνομα για τη δημιουργία της διαδρομής (προεπιλεγμένο: `name`)
- `raw {Boolean}` προαιρετική, απενεργοποιεί την κωδικοποίηση HTML `name` (προεπιλεγμένη: `false`)
- __NEW__: `contextmenu {String}` προαιρετική, μια διαδρομή προς τη μέθοδο `function(item, el, e)` (όταν ένας χρήστης εμφανίζει το μενού πλαίσιο)

```js
function fn_browser(path, next, item) {

	// @path {String} paths divided according to the "config.delimiter"
	// @next {Function(Array)} importat: this function expects array with items
	// @item {Object} can be null

	var arr = [];

	// Object for array:
	// obj.name {String} a label/name
	// obj.checkbox {Boolean} enables checkbox (default: false)
	// obj.checked {Boolean} item will be checked
	// obj.icon {String} a icon for item
	// obj.type {Number} determines a type of item (1: directory, other: file)
	// obj.classname {String} adds a CSS class onto "label" element

	// Good to know:
	// Only directories can be drilled

	// Example:
	arr.push({ name: 'Node.js', checkbox: true, type: 1, icon: 'folder' });
	arr.push({ name: 'Client-Side', checkbox: true, type: 1, icon: 'folder' });

	next(arr);
	// next(array, noscroll);
}
```

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

```html example.html
<div class="container">
	<br />
	<ui-component name="folder" path="currentpath" config="browse:fn_browse;checked:fn_checked;click:fn_click" style="height:500px"></ui-component>
	<br />
</div>

<script>

	var currentpath = 'Frameworks/Node.js';

	function fn_browse(path, next, item) {

		var arr = [];

		switch (path) {
			case 'Frameworks':
				arr.push({ name: 'Node.js', checkbox: true, type: 1, icon: 'folder' });
				arr.push({ name: 'Client-Side', checkbox: true, type: 1, icon: 'folder' });
				break;
			case 'Frameworks/Node.js':
				arr.push({ name: 'Total.js', checkbox: true, checked: true, icon: 'file' });
				arr.push({ name: 'Express.js', checkbox: true, icon: 'file' });
				arr.push({ name: 'Koa.js', checkbox: true, icon: 'file' });
				arr.push({ name: 'Meteor.js', checkbox: true, icon: 'file' });
				break;
			case 'Frameworks/Client-Side':
				arr.push({ name: 'React', checkbox: true, icon: 'file' });
				arr.push({ name: 'Vue', checkbox: true, icon: 'file' });
				arr.push({ name: 'jComponent', checkbox: true, checked: true, icon: 'file' });
				arr.push({ name: 'Angular.js', checkbox: true, icon: 'file' });
				arr.push({ name: 'jQuery', checkbox: true, icon: 'file' });
				break;
			default:
				arr.push({ name: 'Frameworks', checkbox: true, type: 1, icon: 'folder' });
				arr.push({ name: 'Item 1', checkbox: true, icon: 'file' });
				arr.push({ name: 'Item 2', checkbox: true, icon: 'file' });
				arr.push({ name: 'Item 3', checkbox: true, icon: 'file' });
				break;
		}

		next(arr);
	}

	function fn_click(item) {
		console.log('click', item);
	}

	function fn_checked(arr) {
		console.log('checked', arr);
	}

</script>
```