j-Spotlight

• singolo
• Funziona con il sistema Bootstrap Grid

Configurazione:

• height {Numero} un'altezza predefinita di ciascun elemento (definito: 40, deve essere definito anche in CSS)
• placeholder {String} un locatore predefinito (default: Search)

Metodi:

Metodo: component.show(opt)

• opt.id {String} opzionale, un identificatore per gli articoli recenti (default: empty)
• opt.recent {String} permette gli articoli recenti, deve contenere un formato di scadenza (default: 3 days, empty significa disabilitato)
• opt.callback(selected_item) {Function} viene rilasciato quando l'utente fa clic sull'oggetto
• opt.cancel {Function} viene rilasciato e l'utente cancella il componente
• L'indirizzo URL opt.search {String} per la ricerca di valori nel modulo GET /api/search/?={0}
• o opt.search {Function} un link a function(search, next(ARR_ITEMS)) per la ricerca
• opt.cache {String} consente la cache, può contenere un formato di scadenza come 1 day o session
• opt.remap {Function} può rimuovere i risultati di items => items.map(...)
• opt.clear {Boolean} rimuove i risultati precedenti (default: false)
• opt.init {Boolean} fa una ricerca vuota quando il componente è chiamato (default: false)
• opt.delay {Number} un ritardo in ms per eseguire la ricerca (default: 100)
• opt.height {Number} un'altezza dell'oggetto (default: config.height)
• opt.class {String} aggiunge una classe personalizzata al contenitore
• NEW opt.placeholder {String} localizzatore di ricerca (default: config.placeholder)

Buono sapere:

• Il campo .items = [{ html }] -> html (in articoli) sarà rilasciato come un semplice HTML

Utilizzare con <ui-component name="spotlight">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza 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>