j-Spotlight

• singleton
• Systém Bootstrap Grid

Konfigurace:

• height {Číslo} předvolená výška každého položky (předvolená: 40, musí být také definována v CSS)
• placeholder {String} předvolený držitel místa (předvolený: Search)

Metody:

Metoda: component.show(opt)

• opt.id {String} volitelně, identifikátor pro poslední položky (podmínkou: empty)
• opt.recent {String} aktivuje poslední položky, musí obsahovat formát vypršení (předvolený: 3 days, empty znamená vypnutý)
• opt.callback(selected_item) {Function} je vyvolán, když uživatel klikne na položku
• opt.cancel {Function} je vyvolán, pak uživatel zruší složku
• URL adresy opt.search {String} pro vyhledávání hodnot ve formě GET /api/search/?={0}
• nebo opt.search {Function} odkaz na function(search, next(ARR_ITEMS)) pro vyhledávání
• opt.cache {String} umožňuje cache, může obsahovat formát vypršení, např. 1 day nebo session
• opt.remap {Function} může odstranit výsledky items => items.map(...)
• opt.clear {Boolean} to čistí předchozí výsledky (default: false)
• opt.init {Boolean} provádí prázdné vyhledávání, když je složka volána (předvolené: false)
• opt.delay {Number} zpoždění v ms pro provádění vyhledávání (předvolené: 100)
• opt.height {Number} - výška položky (předvolená hodnota: config.height)
• opt.class {String} přidává do kontejneru třídu
• NEW opt.placeholder {String} vyhledávací místo (předvolené: config.placeholder)

Dobré vědět:

• .items = [{ html }] -> html pole (v položkách) bude přenášeno jako plochý HTML

Použijte ji s <ui-component name="spotlight">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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