j-Spotlight

• Singleton
• Zastosowanie systemu Bootstrap Grid

Konfiguracja:

• height {Liczba} podstępna wysokość każdego elementu (podstępne: 40, musi być również zdefiniowany w CSS)
• placeholder {String} domyślny posiadacz miejsca (default: Search)

Metody:

Metoda: component.show(opt)

• opt.id {String} opcjonalny, identyfikator dla ostatnich elementów (default: empty)
• opt.recent {String} umożliwia ostatnie elementy, muszą zawierać format wygaśnięcia (default: 3 days, empty oznacza wyłączone)
• opt.callback(selected_item) {Function} jest uruchomiony, gdy użytkownik kliknie na element
• opt.cancel {Function} jest wyłączony, a następnie użytkownik usuwa składnik
• Adres URL opt.search {String} do wyszukiwania wartości w formularzu GET /api/search/?={0}
• lub opt.search {Function} link do function(search, next(ARR_ITEMS)) do wyszukiwania
• opt.cache {String} umożliwia cache, może zawierać format wygaśnięcia np. 1 day lub session
• opt.remap {Function} może pomieścić wyniki items => items.map(...)
• opt.clear {Boolean} oczyszcza poprzednie wyniki (default: false)
• opt.init {Boolean} tworzy puste wyszukiwanie, gdy składnik jest wezwany (default: false)
• opt.delay {Number} opóźnienie w ms do wykonywania wyszukiwania (default: 100)
• opt.height {Number} wysokość elementu (default: config.height)
• opt.class {String} dodaje do pojemnika klasę dostosowaną
• NEW opt.placeholder {String} miejsce wyszukiwania (default: config.placeholder)

Dobrze wiedzieć:

• Pole .items = [{ html }] -> html (w punktach) zostanie wyświetlone jako płaski HTML

Użyj go z <ui-component name="spotlight">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja MIT.

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