j-Directory

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Je to podobný komponent ako j-Suggestion, ale má vylepšený dizajn a podporuje viac praktických funkcií.

singleton
pracuje s dotykmi
podporuje tmavý režim

IMPORTANT: štandardne tento komponent vykresľuje hodnotu ako text z vlastnosti name.

Metódy:

Metóda: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} zoznam položiek (typ String znamená prepojenie na zdroj údajov)
options.offsetX {Number} voliteľné, posun x (predvolené: 0)
options.offsetY {Number} voliteľné, posun y (predvolené: 0)
options.offsetWidth {Number} voliteľné, posun width (predvolené: 0)
options.placeholder {String} voliteľné, zástupný symbol pre vyhľadávacie pole
NEW options.height {Number} voliteľné, výška kontajnera (predvolené: 180)
options.render {Function} voliteľné, funkcia na prispôsobené vykreslenie položky function(item, text) musí vrátiť HTML
options.custom {Boolean/String} voliteľné, umožňuje vrátiť hodnotu, ktorá nie je definovaná v options.items, predvolené: false
options.minwidth {Number} voliteľné, minimálna šírka, predvolená 200
options.maxwidth {Number} voliteľné, maximálna šírka, predvolená infinite
options.callback(selected_item, element, iscustom, e) {Function} sa spustí, keď používateľ klikne na položku
options.key {String} voliteľné, predvolená hodnota key pre hodnotu text (predvolená: name)
options.empty {String} voliteľné, pridá prázdne pole
options.exclude {Function} voliteľné, môže vylúčiť položky a musí vrátiť booleovskú hodnotu function(item) { return item.id !== 100 }
options.close {Function} voliteľné, môže určiť uzavretie panelu
options.search {Boolean/String} voliteľné, môže skryť vyhľadávacie pole (predvolené: true) alebo {String} (názov kľúča) môže mapovať hodnotu pre vyhľadávanie
options.selected {Object} voliteľné, môže obsahovať vybranú hodnotu (predvolené: undefined)
options.align {String} voliteľné, left (predvolené), right alebo center
options.position {String} voliteľné, top (predvolené), bottom
options.raw {Boolean} voliteľné, táto možnosť zakáže escapovanie znakov (inými slovami: v štítkoch položiek bude povolený obsah HTML, predvolené: false)
options.classname {String} voliteľné, vlastná trieda kontajnera pre všetky položky
absolútne polohovanie funguje len vtedy, ak nie je definované options.element
- options.x {Number} absolútna poloha X
- options.y {Number} absolútna poloha r
options.checkbox {Boolean} voliteľné, umožňuje zaškrtávacie políčka
options.checked {Array String} voliteľné, identifikátory kontrolovaných položiek
- zamerané na options.items {Function(q, next)}
- spätné volanie vráti iba nespracované identifikátory Array {String}
NOVINKA options.template {String} voliteľné, vlastná šablóna Tangular, napr. {{ name }} (predvolená hodnota: null)
NEW options.fuzzy {Boolean} voliteľné, môže zakázať fuzzy vyhľadávanie (predvolené: true)

Metóda: component.hide()

Konfigurácia:

placeholder - zástupný znak pre vstup vyhľadávania
create - zástupný symbol pre štítok Create (predvolené: Create)

Podporované polia položiek:

name {String} názov štítku
template {String} voliteľné, vlastná šablóna Tangular
classname {String} voliteľné, pridáva ďalšie triedy do prvku <li>
disabled {Boolean} voliteľné, môže zakázať položku
selected {Boolean} voliteľné, vyberie položku

Formátovanie cez Tangular:

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

Formátovanie pomocou vlastnej funkcie:

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

Pridanie vlastnej triedy:

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

Vyhľadávanie na strane servera:


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

Je dobré vedieť:

ak checkboxes:true, potom komponent rozširuje položky pridaním časovej pečiatky selectedts {Number} kvôli objednávke

Použite ho so <ui-component name="directory">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>