j-Directory

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Jest podobny do j-Suggestion, ale ma ulepszony design i obsługuje bardziej wygodne funkcje.

Singleton
Praca z dotykami
Wsparcie - mody ciemne

IMPORTANT: wstępnie ten składnik przekazuje wartość jako tekst z właściwości name.

Metody:

Metoda: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} listę elementów (typ String oznacza link do źródła danych)
options.offsetX {Number} opcjonalny, x offset (default: 0)
options.offsetY {Number} opcjonalny, y offset (default: 0)
options.offsetWidth {Number} opcjonalny, width offset (default: 0)
options.placeholder {String} opcjonalny, miejsce do wyszukiwania
NEW options.height {Number} opcjonalny, wysokość pojemnika (default: 180)
options.render {Function} opcjonalny, funkcja dostosowanej renderowania elementu function(item, text) musi zwrócić HTML
Opcjonalny options.custom {Boolean/String} umożliwia zwrot wartości nie zdefiniowanej w options.items, domyślnie: false
options.minwidth {Number} opcjonalny, minimalna szerokość, standardowy 200
options.maxwidth {Number} opcjonalny, maksymalna szerokość, standardowy infinite
options.callback(selected_item, element, iscustom, e) {Function} jest uruchomiony, gdy użytkownik kliknie na element
options.key {String} opcjonalny, standardowy key dla wartości text (default: name)
options.empty {String} opcjonalny, dodaje puste pole
options.exclude {Function} opcjonalny, może wykluczyć elementy i musi zwrócić boolean function(item) { return item.id !== 100 }
options.close {Function} opcjonalny, może określić zamknięcie panelu
options.search {Boolean/String} opcjonalny, może ukryć pole wyszukiwania (default: true) lub {String} (nazwa kluczowa) może mapować wartość wyszukiwarki
options.selected {Object} opcjonalny, może zawierać wybraną wartość (default: undefined)
options.align {String} opcjonalny, left (default), right lub center
options.position {String} opcjonalny, top (default), bottom
options.raw {Boolean} opcjonalny, ta opcja uniemożliwia ucieczkę znaków (innymi słowy: zawartość HTML będzie dozwolona w etykietach elementów, domyślnie: false)
options.classname {String} opcjonalny, indywidualna klasa kontenerów dla wszystkich elementów
Absolutna pozycjonowanie działa tylko wtedy, gdy options.element nie jest zdefiniowany
- options.x {Number} pozycja absolutna
- options.y {Number} pozycja absolutna i
options.checkbox {Boolean} opcjonalny, umożliwia pudełko
options.checked {Array String} opcjonalny, identyfikator sprawdzonych elementów
- Celem jest options.items {Function(q, next)}.
- Callback zwraca tylko surowe identyfikatory Array {String}
NEW options.template {String} opcjonalny, indywidualny szablon Tangular np. {{ name }} (default: null)
NEW options.fuzzy {Boolean} opcjonalny, może wyłączyć fuzzy wyszukiwania (default: true)

Metoda: component.hide()

Konfiguracja:

placeholder - miejsce dla wejścia wyszukiwania
create - miejsce dla etykiety Create (default: Create)

Wspierane pola elementów:

name {String} nazwa etykiety
template {String} opcjonalny, indywidualny szablon Tangular
classname {String} opcjonalny, dodaje dodatkowe klasy do elementu <li>
disabled {Boolean} opcjonalny, może być wyłączony
selected {Boolean} opcjonalny, wybiera element

Formatyzacja przez Tangular:

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

Formatyzacja za pomocą funkcji:

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

Dodaj klasę:

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

Strona wyszukiwania:


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

Dobrze wiedzieć:

jeśli checkboxes:true następnie element rozszerza elementy poprzez dodanie czasowego szamponu selectedts {Number} ze względu na zamówienie

Użyj go z <ui-component name="directory">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>