j-Directory

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Je to podobná složka jako j-Suggestion, ale má zlepšený design a podporuje více funkcí.

singleton
Práce s dotykem
Podporuje tmavý režim

IMPORTANT: Tato složka předvolene hodnotu z vlastnosti name.

Metody:

Metoda: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} seznam položek (typ String znamená odkaz na zdroj údajů)
options.offsetX {Number} volitelné, x offset (předvolené: 0)
options.offsetY {Number} volitelné, y offset (předvolené: 0)
options.offsetWidth {Number} volitelné, width offset (předvolené: 0)
options.placeholder {String} volitelné, místo pro vyhledávací pole
NEW options.height {Number} volitelné, výška kontejneru (předvolená: 180)
options.render {Function} volitelné, funkce pro přizpůsobené renderování položky function(item, text) musí vrátit HTML
options.custom {Boolean/String} volitelně, umožňuje vrácení hodnoty, která není definována v options.items, předvoleně: false
options.minwidth {Number} Volitelná, minimální šířka, předvolená 200
options.maxwidth {Number} volitelné, maximální šířka, standardní infinite
options.callback(selected_item, element, iscustom, e) {Function} je vyvolán, když uživatel klikne na položku
options.key {String} Opční, default key pro text Předběžná hodnota (default value) name)
options.empty {String} volitelně, přidává prázdné pole
options.exclude {Function} volitelný, může vyloučit položky a musí vrátit boolean function(item) { return item.id !== 100 }
options.close {Function} volitelné, může určit uzavření panelu
options.search {Boolean/String} volitelně, může skrývat vyhledávací pole (podle předvolby: true) nebo {String} (klíčové jméno) může mapovat hodnotu pro vyhledávání
options.selected {Object} je volitelný, může obsahovat vybranou hodnotu (předvolený: undefined)
Volitelné options.align {String}, left (podmíněné), right nebo center
options.position {String} volitelně , top a podvodně, bottom
options.raw {Boolean} volitelně, tato možnost zabraňuje úniku znaků (jinými slovy: HTML obsah bude povolen v etiketách položek, výchozí: false)
options.classname {String} volitelná, třída kontejnerů pro všechny položky
Absolutní polohování funguje pouze v případě, že options.element není definován
- options.x {Number} absolutní poloha X
- options.y {Number} absolutní pozice a
options.checkbox {Boolean} volitelné, umožňuje kontrolní krabičky
options.checked {Array String} volitelné, identifikátory kontrolovaných položek
- Cílem je options.items {Function(q, next)}
- Volání vrací pouze surové identifikátory Array {String}
NEW options.template {String} volitelné, šablona Tangular dle nastavení, např. {{ name }} (předvolené: null)
NEW options.fuzzy {Boolean} volitelné, může vypnout fuzzy vyhledávání (předvolené: true)

Metoda: component.hide()

Konfigurace:

placeholder - místo pro vyhledávací vstup
create - prostorový držák pro štítek Create (předvolený: Create)

Podporované položky:

name {String} název
template {String} volitelný, šablona Tangular
classname {String} volitelně, přidává další třídy do prvku <li>
disabled {Boolean} je volitelný, může být deaktivován
selected {Boolean} volitelné, vyberou položku

Formátování přes Tangular:

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

Formátování pomocí funkce:

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

Přidání třídy:

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

Serverové stránky vyhledávání:


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

Dobré vědět:

Pokud je checkboxes:true, pak složka prodlužuje položky přidáním časového štítu selectedts {Number} kvůli objednávce

Použijte ji s <ui-component name="directory">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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>