j-Directory

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Este o componentă similară cu j-Suggestion, dar are un design îmbunătățit și susține funcții mai inteligente.

Singletă
Lucrează cu atingere
Modul întunecat - Dark Mode

IMPORTANT: în mod implicit, acest component oferă o valoare ca text din proprietatea name.

Metode:

Metodă: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} o listă de elemente (tipul String înseamnă un link la sursa de date)
options.offsetX {Number} opțional, x offset (default: 0)
options.offsetY {Number} opțional, y offset (default: 0)
options.offsetWidth {Number} opțional, width offset (default: 0)
options.placeholder {String} opțional, un locator pentru câmpul de căutare
NEW options.height {Number} opțional, o înălțime a containerului (defață: 180)
options.render {Function} opțional, o funcție de renderare personalizată a elementului function(item, text) trebuie să returneze HTML
options.custom {Boolean/String} opțional, permite returnarea unei valori care nu este definită în options.items, standard: false
options.minwidth {Number} opțional, o lățime minimă, standard 200
options.maxwidth {Number} opțional, o lățime maximă, standard infinite
options.callback(selected_item, element, iscustom, e) {Function} este declanșat atunci când utilizatorul face clic pe elementul
options.key {String} Opţiune, un defect key Pentru text Valoarea standardă (default) name)
options.empty {String} este opțional, adăugați un câmp gol
options.exclude {Function} este opțional, poate exclude elementele și trebuie să restituie un boolean function(item) { return item.id !== 100 }
options.close {Function} opțional, poate determina închiderea panourilor
options.search {Boolean/String} opțional, poate ascunde un câmp de căutare (default: true) sau {String} (numele cheie) poate descrie o valoare pentru căutarea
options.selected {Object} opțional, poate conține o valoare selectată (default: undefined)
options.align {String} opțional, left (default), right sau center
options.position {String} opțional, top (default), bottom
options.raw {Boolean} opțional, această opțiune împiedică scăderea caracterelor (în alte cuvinte: conținutul HTML va fi permis în etichete de elemente, în mod implicit: false)
options.classname {String} opțional, o clasă de container personalizată pentru toate articolele
poziționarea absolută funcționează numai dacă options.element nu este definit
- options.x {Number} poziția absolută X
- options.y {Number} poziție absolută
options.checkbox {Boolean} opțional, permite cutii de verificare
options.checked {Array String} opțional, identificatori de elemente verificate
- Obiectiv pentru options.items {Function(q, next)}
- Callback returnează numai identificatorii crudi Array {String}
NEW options.template {String} opțional, un șablon personalizat Tangular de exemplu {{ name }} (default: null)
NEW options.fuzzy {Boolean} opțional, poate dezactiva căutarea fuzzy (default: true)

Metodă: component.hide()

Configurarea:

placeholder - un locator pentru intrarea de căutare
create - un depozitar pentru eticheta Create (default: Create)

câmpuri de elemente susținute:

name {String} un nume de etichetă
template {String} opțional, un șablon personalizat Tangular
classname {String} este opțional, adăugând clase suplimentare în elementul <li>
disabled {Boolean} opțional, poate dezactiva elementul
selected {Boolean} opțional, selectează elementul

Formatează prin Tangular:

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

Formatează prin funcție personalizată:

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

Adăugarea de clasă:

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

Căutare pe server:


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

bine să știi:

dacă checkboxes:true apoi componenta extinde elementele prin adăugarea unui timestamp selectedts {Number} datorită comenzii

Utilizați-l cu <ui-component name="directory">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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>