# j-Directory

> Той е подобен на j-Suggestion, но има подобрен дизайн и поддържа по-удобни функции.

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

Той е подобен на `j-Suggestion`, но има подобрен дизайн и поддържа по-удобни функции.

- Синглът
- Работи с допир
- Поддържат тъмния режим

> __ IMPORTANT__: по подразбиране този компонент връща стойност като текст от свойството на `name`.


__Методи__:

Методът: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` е списък на елементите (типът `String` означава връзка към източника на данни)
- `options.offsetX {Number}` опция, `x` отстъпка (дефолт: `0`)
- `options.offsetY {Number}` опция, `y` отстъпка (дефолт: `0`)
- `options.offsetWidth {Number}` опция, `width` отстъпка (дефолт: `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}` е факултативен, може да изключи елементи и трябва да върне боолен `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)}`
	- повикването върна само суровия идентификатор `Array {String}`
- __NEW__ `options.template {String}` опционален, персонализиран шаблон на Tangular, например `{{ name }}` (предварително: нула)
- __NEW__ `options.fuzzy {Boolean}` опция, тя може да деактивира фюзи търсене (дефолт: `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' });
```

__Търсене на сървър__:

```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 Източник: Питър Шерка 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>
```