j-Spotlight

• Singleton
• Werk met Bootstrap Grid System

Configuratie:

• height {Nummer} een standaard hoogte van elk item (de standaard: 40, moet ook in CSS worden gedefinieerd)
• placeholder {String} een standaard plaatshouder (default: Search)

Methoden:

Methode: component.show(opt)

• opt.id {String} optioneel, een identificator voor recente items (default: empty)
• opt.recent {String} maakt recente items mogelijk, moet een verstrijksformaat bevatten (de standaard: 3 days, empty betekent niet geactiveerd)
• opt.callback(selected_item) {Function} wordt uitgevoerd wanneer de gebruiker op het item klikt
• opt.cancel {Function} wordt uitgegeven en dan annuleert de gebruiker de component.
• opt.search {String} URL voor het zoeken naar waarden in het formulier GET /api/search/?={0}
• of opt.search {Function} een link naar function(search, next(ARR_ITEMS)) voor het zoeken
• opt.cache {String} maakt cache mogelijk, kan een uitgaansformaat bevatten bijvoorbeeld 1 day of session
• opt.remap {Function} het kan resultaten remmen items => items.map(...)
• opt.clear {Boolean} het verwijdert eerdere resultaten (default: false)
• opt.init {Boolean} maakt een leeg zoeken wanneer de component wordt geroepen (default: false)
• opt.delay {Number} een vertraging in ms voor het uitvoeren van zoekopdrachten (default: 100)
• opt.height {Number} een hoogte van het item (default: config.height)
• opt.class {String} voegt een custom class toe aan de container
• NEW opt.placeholder {String} zoekplaatshouder (default: config.placeholder)

Goed om te weten:

• .items = [{ html }] -> html veld (in items) zal worden gerandereerd als een plat HTML

Gebruik het met <ui-component name="spotlight">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.

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