j-Directory

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Het is vergelijkbaar met j-Suggestion, maar heeft een betere ontwerp en ondersteunt meer handige functies.

Singleton
Werken met touches
Ondersteunt het donkere mode

IMPORTANT: deze component geeft standaard een waarde als tekst uit de eigenschap van name.

Methoden:

Methode: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} een lijst van items (String type betekent een link naar de gegevensbron)
options.offsetX {Number} optioneel, x offset (default: 0)
options.offsetY {Number} optioneel, y offset (default: 0)
options.offsetWidth {Number} optioneel, width offset (default: 0)
options.placeholder {String} optioneel, een plaatshouder voor het zoekveld
NEW options.height {Number} optioneel, een hoogte van de container (default: 180)
options.render {Function} optioneel, een functie voor aangepaste rendering van het item function(item, text) moet HTML retourneren
options.custom {Boolean/String} optioneel, een waarde die niet is gedefinieerd in options.items, standaard: false kan worden teruggekeerd
options.minwidth {Number} optioneel, een minimale breedte, standaard 200
options.maxwidth {Number} optioneel, een maximale breedte, standaard infinite
options.callback(selected_item, element, iscustom, e) {Function} wordt uitgevoerd wanneer de gebruiker op het item klikt
options.key {String} Optie, een default key Voor text De waarde (de standaard) name)
options.empty {String} optioneel, voegt leeg veld toe
options.exclude {Function} optioneel, kan items uitsluiten en moet een boolean function(item) { return item.id !== 100 } retourneren
options.close {Function} optioneel, kan het sluiten van de panelen bepalen
options.search {Boolean/String} optioneel, kan het zoekveld verbergen (default: true) of {String} (key name) kan een waarde voor het zoeken mappen
options.selected {Object} optioneel, kan een geselecteerde waarde bevatten (default: undefined)
options.align {String} optioneel, left (default), right of center
options.position {String} optioneel, top (default), bottom
options.raw {Boolean} optioneel, deze optie voorkomt het ontsnappen van tekens (met andere woorden: HTML-inhoud wordt toegestaan in etiketten van items, standaard: false)
options.classname {String} optioneel, een aangepaste containerklasse voor alle items
absolute positionering werkt alleen als options.element niet is gedefinieerd
- options.x {Number} absolute positie X
- options.y {Number} absolute positie
options.checkbox {Boolean} optioneel, mogelijk checkboxes
options.checked {Array String} optioneel, identificatoren van gecontroleerde items
- Gericht op options.items {Function(q, next)}
- De callback geeft alleen de grond-ID's Array {String}
NEW options.template {String} optioneel, een aangepaste Tangular template bijvoorbeeld {{ name }} (default: null)
NEW options.fuzzy {Boolean} optioneel, het kan fuzzy zoeken uit te schakelen (default: true)

Methode: component.hide()

Configuratie:

placeholder - een plaatshouder voor de zoekopdracht
create - een plaatshouder voor het label Create (default: Create)

Ondersteunde items:

name {String} een label naam
template {String} optioneel, een aangepaste Tangular template
classname {String} optioneel, voegt extra klassen toe aan het element <li>
disabled {Boolean} optioneel, het kan item uit te schakelen
selected {Boolean} optioneel, het selecteert item

Formatting via Tangular:

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

Formatting via custom function:

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

Toegevoegd aan custom class:

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

Server-zijde zoekopdracht:


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

Goed om te weten:

als checkboxes:true dan de component items uitbreidt door een timestamp selectedts {Number} toe te voegen als gevolg van bestelling

Gebruik het met <ui-component name="directory">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>