j-Directory

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Hasonló komponens, mint a j-Suggestion, de javult a tervezés és támogatja a kényelmesebb funkciókat.

Szingapúr
érintéssel dolgozik
Támogatja a sötét módot

IMPORTANT: Ez az összetevő alapértelmezett értéket ad a name tulajdonságból származó szövegként.

módszerek:

Módszer: component.show(options)

options.element {Element/jQuery Element}
options.items {Array/String/Function} az elemek listája (String típus az adatforráshoz való link)
options.offsetX {Number} opcionális, x offset (default: 0)
options.offsetY {Number} opcionális, y offset (default: 0)
options.offsetWidth {Number} opcionális, width offset (default: 0)
options.placeholder {String} opcionális, a keresési mező tárolója
NEW options.height {Number} opcionális, a tartály magassága (default: 180)
options.render {Function} opcionális, a function(item, text) elem személyre szabott renderelésének funkciója vissza kell térnie a HTML-hez
options.custom {Boolean/String} opcionális, lehetővé teszi a options.items-ben nem meghatározott érték visszatérítését, alapértelmezett: false
options.minwidth {Number} opcionális, minimális szélesség, alapértelmezett 200
options.maxwidth {Number} opcionális, maximális szélesség, alapértelmezett infinite
A options.callback(selected_item, element, iscustom, e) {Function} akkor indítható, amikor a felhasználó kattintson az elemre
options.key {String} opcionális, alapértelmezett key a text értéke (alapértelmezés: name)
options.empty {String} opcionális, üres mező hozzáadása
options.exclude {Function} opcionális, kizárhatja az elemeket, és vissza kell adnia a boolean function(item) { return item.id !== 100 }
options.close {Function} opcionális, meghatározhatja a panel bezárását
options.search {Boolean/String} opcionális, elrejtheti a keresési mezőt (default: true) vagy {String} (kulcsnev) térképezhet egy keresési értéket
options.selected {Object} opcionális, tartalmazhat egy kiválasztott értéket (default: undefined)
options.align {String} opcionális, left (default), right vagy center
options.position {String} opcionális, top (default), bottom
options.raw {Boolean} opcionális, ez az opció megakadályozza a karakterek elkerülése (más szóval: HTML tartalom engedélyezhető címkék elemeket, alapértelmezett: false)
options.classname {String} opcionális, egyéni tartály osztály minden elemre
Az abszolút pozíció csak akkor működik, ha a options.element nem meghatározott
- options.x {Number} Az abszolút pozíció X
- options.y {Number} Abszolút álláspont és
options.checkbox {Boolean} opcionális, lehetővé teszi a checkboxes
options.checked {Array String} opcionális, ellenőrzött tárgyak azonosítója
- célzott options.items {Function(q, next)}
- A hívás csak nyers Array {String} azonosítót ad vissza
NEW options.template {String} opcionális, egy személyre szabott Tangular mintát, például a {{ name }} (első: null)
NEW options.fuzzy {Boolean} opcionális, lehet kikapcsolni fuzzy keresés (default: true)

Módszer: component.hide()

konfiguráció:

placeholder - a keresési beviteli helyszín
create - a Create címkével rendelkező helytartó (default: Create)

Támogatott témakörök:

name {String} címkével
template {String} opcionális, egy személyre szabott Tangular sablon
classname {String} opcionális, további osztályokat ad a <li> elemhez
disabled {Boolean} opcionális, lehet eltávolítani az elemet
selected {Boolean} opcionális, kiválasztja az elemet

A Tangular formázása:

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

Személyes funkciók formázása:

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

A szokásos osztály hozzáadása:

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

Server oldal keresés:


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

Jó tudni:

ha a checkboxes:true az elemeket kiterjeszti, egy selectedts {Number} időzítőt adva a megrendelés miatt

Használja a <ui-component name="directory">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>