j-Directory

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

Det är en liknande komponent som j-Suggestion, men har förbättrad design och stöder mer smarta funktioner.

singlar
Arbeta med beröring
Stöd för dark mode

IMPORTANT: Standardvis ger denna komponent ett värde som text från name-egenskapen.

Metoder:

Metod: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} en lista över objekt (String betyder en länk till datakällan)
options.offsetX {Number} alternativ, x offset (default: 0)
options.offsetY {Number} alternativ, y offset (default: 0)
options.offsetWidth {Number} alternativ, width offset (default: 0)
options.placeholder {String} valfritt, en platsinnehavare för sökfältet
NEW options.height {Number} valfritt, en höjd av behållaren (default: 180)
options.render {Function} valfritt, en funktion för anpassad rendering av objektet function(item, text) måste returnera HTML
options.custom {Boolean/String} alternativ, möjliggör retur av ett värde som inte är definierat i options.items, standard: false
options.minwidth {Number} valfritt, en minimal bredd, standard 200
options.maxwidth {Number} valfritt, högsta bredd, standard infinite
options.callback(selected_item, element, iscustom, e) {Function} utlöses när användaren klickar på objektet
options.key {String} valfritt, en standard key för text värde (default: name)
options.empty {String} alternativ, lägger till tomt fält
options.exclude {Function} är valfritt, kan utesluta objekt och måste returnera en boolean function(item) { return item.id !== 100 }
options.close {Function} valfritt, kan bestämma stängningen av panelen
options.search {Boolean/String} alternativ, kan dölja sökfältet (default: true) eller {String} (nyckelnamn) kan kartlägga ett värde för sökning
options.selected {Object} är valfritt, kan innehålla ett valfritt värde (default: undefined)
options.align {String} alternativ, left (default), right eller center
options.position {String} valfritt, top (default), bottom
options.raw {Boolean} är valfritt, det här alternativet förhindrar att tecken fly (i andra ord: HTML-innehåll kommer att tillåtas i etiketter av objekt, standard: false)
options.classname {String} valfritt, en anpassad containerklass för alla objekt
absolut positionering fungerar endast om options.element inte definieras
- options.x {Number} absolut position X
- options.y {Number} absolut position och
options.checkbox {Boolean} alternativ, möjliggör checkboxar
options.checked {Array String} valfritt, identifierare av kontrollerade objekt
- Riktade på options.items {Function(q, next)}
- Callback returnerar endast råidentifierare Array {String}
NEW options.template {String} valfritt, en anpassad Tangular mall t.ex. {{ name }} (default: null)
NEW options.fuzzy {Boolean} valfritt, det kan inaktivera fuzzy sökning (default: true)

Metod: component.hide()

Konfigurera:

placeholder - en platsinnehavare för sökningen
create - en platsinnehavare för Create etikett (default: Create)

Stödda objektfält:

name {String} ett märke
template {String} valfritt, en anpassad Tangular mall
classname {String} alternativ, lägger till ytterligare klasser i elementet <li>
disabled {Boolean} alternativ, det kan inaktivera objektet
selected {Boolean} är valfritt, det väljer objektet

Formatera via Tangular:

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

Formatera via custom:

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

Lägga till custom class:

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

Server-sidan sökning:


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

Bra att veta:

om checkboxes:true sedan komponenten förlänger objekt genom att lägga till en timestamp selectedts {Number} på grund av beställning

Använd den med <ui-component name="directory">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>