j-Directory

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Той е подобен на 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:

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

Форматиране чрез персонализирана функция:

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

Добавяне на класиране:

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

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


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.

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>