j-Spotlight

• Singletă
• Funcționează cu sistemul Bootstrap

Configurarea:

• height {Număr} o înălțime de bază a fiecărui element (default: 40, trebuie definită și în CSS)
• placeholder {String} un locator standard (default: Search)

Metode:

Metodă: component.show(opt)

• opt.id {String} opțional, un identificator pentru elementele recente (default: empty)
• opt.recent {String} permite elementele recente, trebuie să conțină un format de expirare (default: 3 days, empty înseamnă dezactivat)
• opt.callback(selected_item) {Function} este declanșat atunci când utilizatorul face clic pe elementul
• opt.cancel {Function} este dezactivat, apoi utilizatorul anulează componenta
• URL-ul opt.search {String} pentru căutarea valorilor în formularul GET /api/search/?={0}
• sau opt.search {Function} un link la function(search, next(ARR_ITEMS)) pentru căutare
• opt.cache {String} permite cache, poate conține un format de expirare cum ar fi 1 day sau session
• opt.remap {Function} poate remedia rezultatele items => items.map(...)
• opt.clear {Boolean} clarifică rezultatele anterioare (default: false)
• opt.init {Boolean} face o căutare goală atunci când componenta este numită (default: false)
• opt.delay {Number} o întârziere în ms pentru efectuarea căutării (default: 100)
• opt.height {Number} o înălțime a elementului (defață: config.height)
• opt.class {String} adăuga o clasă personalizată la container
• NEW opt.placeholder {String} localizator de căutare (default: config.placeholder)

bine să știi:

• .items = [{ html }] -> câmpul html (în articole) va fi prezentat ca un HTML plat

Utilizați-l cu <ui-component name="spotlight">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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