j-Spotlight

• Singleton
• Funktioniert mit dem Bootstrap Grid System

Konfiguration:

• height {Nummer} eine Standardhöhe jedes Elementes (Default: 40, muss auch in CSS definiert werden)
• placeholder {String} ein Standardplatzinhaber (Default: Search)

Methoden:

Methode: component.show(opt)

• opt.id {String} optionale, ein Identifikator für neueste Gegenstände (Default: empty)
• opt.recent {String} ermöglicht neueste Elemente, muss ein Ablaufformat enthalten (Default: 3 days, empty bedeutet nicht aktiviert)
• opt.callback(selected_item) {Function} wird ausgelöst, wenn der Benutzer auf das Element klickt
• opt.cancel {Function} wird ausgelöst, dann löscht der Benutzer die Komponente
• opt.search {String} URL für die Suche nach Werte im Formular GET /api/search/?={0}
• oder opt.search {Function} einen Link zu function(search, next(ARR_ITEMS)) für die Suche
• opt.cache {String} ermöglicht Cache, kann ein Auslaufformat wie 1 day oder session enthalten
• opt.remap {Function} es kann Ergebnisse items => items.map(...)
• opt.clear {Boolean} es reinigt vorherige Ergebnisse (Default: false)
• opt.init {Boolean} macht eine leere Suche, wenn die Komponente angerufen wird (Default: false)
• opt.delay {Number} eine Verzögerung in ms für die Durchführung der Suche (Default: 100)
• opt.height {Number} eine Höhe des Objekts (Default: config.height)
• opt.class {String} fügt eine benutzerdefinierte Klasse an den Container hinzu
• NEW opt.placeholder {String} Suchplatzinhaber (Default: config.placeholder)

Gut zu wissen:

• .items = [{ html }] -> html Feld (in Elementen) wird als eine reiche HTML dargestellt

Verwenden Sie es mit <ui-component name="spotlight">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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