# j-Directory

> Είναι παρόμοιο με το j-Suggestion, αλλά έχει βελτιωμένο σχεδιασμό και υποστηρίζει πιο έξυπνα χαρακτηριστικά.

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

Είναι παρόμοιο με το `j-Suggestion`, αλλά έχει βελτιωμένο σχεδιασμό και υποστηρίζει πιο έξυπνα χαρακτηριστικά.

- Σιγκλέτο
- Δουλεύει με τα αγγίγματα
- Υποστήριξη - Dark Mode

> __ΕΠΙΘΥΝΗ__: Κατά προεπιλογή, αυτό το στοιχείο παρέχει μια αξία ως κείμενο από την ιδιότητα `name`.


__Μέθοδοι__:

Μέθοδος: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` μια λίστα στοιχείων (τυπός `String` σημαίνει σύνδεση με την πηγή δεδομένων)
- `options.offsetX {Number}` προαιρετική, `x` offset (προεπιλεγμένη: `0`)
- `options.offsetY {Number}` προαιρετική, `y` offset (προεπιλεγμένη: `0`)
- `options.offsetWidth {Number}` προαιρετική, `width` offset (προεπιλεγμένη: `0`)
- `options.placeholder {String}` προαιρετική, ένα χώρο για το πεδίο αναζήτησης
- __NEW__ `options.height {Number}` προαιρετική, ύψος του δοχείου (προεπιλεγμένη: `180`)
- `options.render {Function}` προαιρετική, μια λειτουργία για την εξατομικευμένη αναπαραγωγή του στοιχείου `function(item, text)` πρέπει να επιστρέψει το `HTML`
- Εναλλακτικά, η τιμή `options.custom {Boolean/String}` μπορεί να επιστρέψει μια τιμή που δεν ορίζεται στο `options.items`, προεπιλογή: `false`
- Εναλλακτικά `options.minwidth {Number}`, ελάχιστη πλάτος, προεπιλεγμένη `200`
- `options.maxwidth {Number}` επιλογή, μέγιστο πλάτος, προεπιλεγμένο `infinite`
- Το `options.callback(selected_item, element, iscustom, e) {Function}` εκκινείται όταν ο χρήστης κάνει κλικ στο στοιχείο
- `options.key {String}` προαιρετική, μια προεπιλεγμένη τιμή `key` για την τιμή `text` (προεπιλογή: `name`)
- `options.empty {String}` επιλογή, προσθέτει κενό πεδίο
- Το `options.exclude {Function}` είναι προαιρετικό, μπορεί να αποκλείσει τα στοιχεία και πρέπει να επιστρέψει ένα boolean `function(item) { return item.id !== 100 }`
- `options.close {Function}` επιλογή, μπορεί να καθορίσει το κλείσιμο του πίνακα
- Το `options.search {Boolean/String}` είναι προαιρετικό, μπορεί να κρύψει το πεδίο αναζήτησης (προεπιλογή: `true`) ή το `{String}` (κλειδί όνομα) μπορεί να χαρτογραφήσει μια τιμή για την αναζήτηση
- Το `options.selected {Object}` είναι προαιρετικό, μπορεί να περιέχει επιλεγμένη τιμή (προεπιλογή: `undefined`)
- `options.align {String}` προαιρετική, `left` (προεπιλεγμένη), `right` ή `center`
- `options.position {String}` προαιρετική, `top` (προεπιλεγμένη), `bottom`
- Η επιλογή `options.raw {Boolean}` είναι προαιρετική, αυτή η επιλογή εμποδίζει την αποφυγή χαρακτήρων (διαφορετικά: το περιεχόμενο HTML θα επιτρέπεται στις ετικέτες των στοιχείων, προεπιλεγμένο: `false`)
- `options.classname {String}` επιλογή, προσαρμοσμένη κατηγορία δοχείων για όλα τα αντικείμενα
- Η απόλυτη θέση λειτουργεί μόνο εάν το `options.element` δεν έχει οριστεί
	- `options.x {Number}` απόλυτη θέση X
	- Πιστοποίηση `options.y {Number}` και
- `options.checkbox {Boolean}` επιλογή, επιτρέπει τα κουτιά ελέγχου
- `options.checked {Array String}` επιλογή, αναγνωριστές ελέγχονται αντικείμενα
	- Στόχος για `options.items {Function(q, next)}`
	- Το Callback επιστρέφει μόνο τους πρώτους αναγνωριστές `Array {String}`
- __NEW__ `options.template {String}` προαιρετικό, προσαρμοσμένο πρότυπο Tangular για παράδειγμα `{{ name }}` (προεπιλεγμένη: μηδέν)
- __NEW__ `options.fuzzy {Boolean}` προαιρετική, μπορεί να απενεργοποιήσει την αναζήτηση fuzzy (προεπιλεγμένη: `true`)

Μέθοδος: `component.hide()`

__ΕΠΙΤΡΟΦΗ__:
- `placeholder` - ένας τόπος για την είσοδο αναζήτησης
- `create` - ένας χώρος για την ετικέτα `Create` (προεπιλεγμένη: `Create`)

__Υποστηριζόμενα πεδία__:

- `name {String}` ένα όνομα ετικέτας
- `template {String}` προαιρετικό, προσαρμοσμένο πρότυπο Tangular
- `classname {String}` επιλογή, προσθέτει πρόσθετες τάξεις στο στοιχείο `<li>`
- `disabled {Boolean}` επιλογή, μπορεί να απενεργοποιήσει το στοιχείο
- `selected {Boolean}` επιλογή, επιλέγει το στοιχείο

__Σχεδιασμός μέσω Tangular__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', template: '<b>{{ name }}</b>' });
```

__Η διαμόρφωση μέσω της συνήθους λειτουργίας__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js' });
opt.push({ name: 'Express.js' });
opt.push({ name: 'Koa.js' });
opt.render = function(item, name) {
	return '<b>' + name + '</b>';
};
```

__Προσθήκη της κλάσης__:

```js
var opt = {};
opt.items = [];
opt.push({ name: 'Total.js', classname: 'your_class_name' });
```

__Ετικέτες αναζήτηση server__:

```js

var opt = {};

opt.element = your_element;

opt.items = function(search, next) {
	next([{ name: 'Item 1' }, { name: 'Item 2' }]);
};

opt.callback = function(selected) {
	console.log(selected);
};

SETTER('directory/show', opt);
```

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

- Εάν το `checkboxes:true` τότε το συστατικό επεκτείνει τα στοιχεία προσθέτοντας ένα χρονοδιάγραμμα `selectedts {Number}` λόγω της παραγγελίας

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

```html example.html
<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="directory" config="placeholder:Search ..."></ui-component>

<div class="container">
	<div><a href="javascript:void(0)" data-name="classic">Open directory - classic</a></div>
	<div><a href="javascript:void(0)" data-name="checkboxes">Open directory - checkboxes</a></div>
</div>

<script>
	$(document).on('click', 'a', function() {


		var opt = {};
		opt.element = $(this);

		if (opt.element.attrd('name') === 'checkboxes') {
			opt.checkbox = true;
			opt.items = [{ name: 'Total.js', selected: true }, { name: 'Express.js', selected: true }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];
		} else
			opt.items = [{ name: 'Total.js', template: '<b>{{ name }}</b>' }, { name: 'Express.js' }, { name: 'Meteor.js' }, { name: 'Koa.js' }, { name: 'ASP.NET' }, { name: 'PHP' }, { name: 'Python' }, { name: 'Node.js' }];

		opt.callback = function(value) {
			if (opt.checkbox)
				console.log('SELECTED:', value);
			else
				console.log('CLICKED:', value);
		};

		SETTER('directory/show', opt);
	});
</script>
```