j-Spotlight

• Szingapúr
• A Bootstrap Grid rendszer

konfiguráció:

• height {Number} az egyes elemek alapértelmezett magassága (az előzetes: 40, meg kell határozni a CSS is)
• placeholder {String} egy alapértelmezett helytartó (default: Search)

módszerek:

Módszer: component.show(opt)

• opt.id {String} opcionális, a legújabb elemek azonosítója (default: empty)
• opt.recent {String} lehetővé teszi a legújabb elemeket, meg kell tartalmaznia a lejárati formátumot (például: 3 days, empty azt jelenti, hogy kikapcsolva)
• A opt.callback(selected_item) {Function} akkor indítható, amikor a felhasználó kattintson az elemre
• A opt.cancel {Function} kiindul, majd a felhasználó törli az összetevőt
• opt.search {String} URL-cím a GET /api/search/?={0} formanyomtatvány értékek kereséséhez
• vagy opt.search {Function} a kereséshez szükséges function(search, next(ARR_ITEMS)) link
• opt.cache {String} lehetővé teszi a cache-t, lehet tartalmazni egy kimeneti formátumot, például a 1 day vagy a session
• opt.remap {Function} lehet helyreállítani az eredményeket items => items.map(...)
• opt.clear {Boolean} ez tisztítja a korábbi eredményeket (default: false)
• A opt.init {Boolean} üres keresést végez, amikor az összetevőt hívják (például: false)
• opt.delay {Number} a keresés elvégzéséhez szükséges ms késedelme (default: 100)
• opt.height {Number} egy elem magassága (default: config.height)
• A opt.class {String} hozzáad egy személyre szabott osztályot a kontejnerhez
• NEW opt.placeholder {String} keresési helytartó (default: config.placeholder)

Jó tudni:

• .items = [{ html }] -> html mező (az elemekben) egy tiszta HTML formátumban lesz megjelenítve

Használja a <ui-component name="spotlight">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.

<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="spotlight" config="placeholder:Search ..."></ui-component>

<div class="container">
	<a href="javascript:spotlight()">Show Spotlight</a>
</div>

<script>
	function spotlight() {

		var opt = {};

		opt.search = function(value, next) {
			// console.log(value);
			next([{ name: 'Dashboard' }, { name: 'Invoices' }, { name: 'Orders' }, { name: 'Products' }, { name: 'Pages' }, { name: 'Notes' }, { name: 'Users' }, { name: 'Settings' }]);
		};

		opt.callback = function(item) {
			console.log('Selected item:', item);
		};

		SETTER('spotlight/show', opt);
	}

	setTimeout(spotlight, 500);
</script>