# j-Directory

> Hasonló komponens, mint a j-Suggestion, de javult a tervezés és támogatja a kényelmesebb funkciókat.

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

Hasonló komponens, mint a `j-Suggestion`, de javult a tervezés és támogatja a kényelmesebb funkciókat.

- Szingapúr
- érintéssel dolgozik
- Támogatja a sötét módot

> __IMPORTANT__: Ez az összetevő alapértelmezett értéket ad a `name` tulajdonságból származó szövegként.


__módszerek__:

Módszer: `component.show(options)`

- `options.element {Element/jQuery Element}`
- `options.items {Array/String/Function}` az elemek listája (`String` típus az adatforráshoz való link)
- `options.offsetX {Number}` opcionális, `x` offset (default: `0`)
- `options.offsetY {Number}` opcionális, `y` offset (default: `0`)
- `options.offsetWidth {Number}` opcionális, `width` offset (default: `0`)
- `options.placeholder {String}` opcionális, a keresési mező tárolója
- __NEW__ `options.height {Number}` opcionális, a tartály magassága (default: `180`)
- `options.render {Function}` opcionális, a `function(item, text)` elem személyre szabott renderelésének funkciója vissza kell térnie a `HTML`-hez
- `options.custom {Boolean/String}` opcionális, lehetővé teszi a `options.items`-ben nem meghatározott érték visszatérítését, alapértelmezett: `false`
- `options.minwidth {Number}` opcionális, minimális szélesség, alapértelmezett `200`
- `options.maxwidth {Number}` opcionális, maximális szélesség, alapértelmezett `infinite`
- A `options.callback(selected_item, element, iscustom, e) {Function}` akkor indítható, amikor a felhasználó kattintson az elemre
- `options.key {String}` opcionális, alapértelmezett `key` a `text` értéke (alapértelmezés: `name`)
- `options.empty {String}` opcionális, üres mező hozzáadása
- `options.exclude {Function}` opcionális, kizárhatja az elemeket, és vissza kell adnia a boolean `function(item) { return item.id !== 100 }`
- `options.close {Function}` opcionális, meghatározhatja a panel bezárását
- `options.search {Boolean/String}` opcionális, elrejtheti a keresési mezőt (default: `true`) vagy `{String}` (kulcsnev) térképezhet egy keresési értéket
- `options.selected {Object}` opcionális, tartalmazhat egy kiválasztott értéket (default: `undefined`)
- `options.align {String}` opcionális, `left` (default), `right` vagy `center`
- `options.position {String}` opcionális, `top` (default), `bottom`
- `options.raw {Boolean}` opcionális, ez az opció megakadályozza a karakterek elkerülése (más szóval: HTML tartalom engedélyezhető címkék elemeket, alapértelmezett: `false`)
- `options.classname {String}` opcionális, egyéni tartály osztály minden elemre
- Az abszolút pozíció csak akkor működik, ha a `options.element` nem meghatározott
	- `options.x {Number}` Az abszolút pozíció X
	- `options.y {Number}` Abszolút álláspont és
- `options.checkbox {Boolean}` opcionális, lehetővé teszi a checkboxes
- `options.checked {Array String}` opcionális, ellenőrzött tárgyak azonosítója
	- célzott `options.items {Function(q, next)}`
	- A hívás csak nyers `Array {String}` azonosítót ad vissza
- __NEW__ `options.template {String}` opcionális, egy személyre szabott Tangular mintát, például a `{{ name }}` (első: null)
- __NEW__ `options.fuzzy {Boolean}` opcionális, lehet kikapcsolni fuzzy keresés (default: `true`)

Módszer: `component.hide()`

__konfiguráció__:
- `placeholder` - a keresési beviteli helyszín
- `create` - a `Create` címkével rendelkező helytartó (default: `Create`)

__Támogatott témakörök__:

- `name {String}` címkével
- `template {String}` opcionális, egy személyre szabott Tangular sablon
- `classname {String}` opcionális, további osztályokat ad a `<li>` elemhez
- `disabled {Boolean}` opcionális, lehet eltávolítani az elemet
- `selected {Boolean}` opcionális, kiválasztja az elemet

__A Tangular formázása__:

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

__Személyes funkciók formázása__:

```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>';
};
```

__A szokásos osztály hozzáadása__:

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

__Server oldal keresés__:

```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);
```

__Jó tudni__:

- ha a `checkboxes:true` az elemeket kiterjeszti, egy `selectedts {Number}` időzítőt adva a megrendelés miatt

Használja a `<ui-component name="directory">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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