j-Spotlight

• singlar
• Det fungerar med Bootstrap Grid System

Konfigurera:

• height {Numret} en standardhöjd för varje objekt (default: 40, måste definieras i CSS också)
• placeholder {String} en standardplatsinnehavare (default: Search)

Metoder:

Metod: component.show(opt)

• opt.id {String} valfritt, en identifierare för senaste objekt (default: empty)
• opt.recent {String} aktiverar nyligen föremål, måste innehålla ett utgångsformat (default: 3 days, empty betyder inaktiverad)
• opt.callback(selected_item) {Function} utlöses när användaren klickar på objektet
• opt.cancel {Function} utlöses och användaren avbryter komponenten
• opt.search {String} URL för sökning av värden i formuläret GET /api/search/?={0}
• eller opt.search {Function} en länk till function(search, next(ARR_ITEMS)) för sökning
• opt.cache {String} möjliggör cache, kan innehålla ett utgångsformat t.ex. 1 day eller session
• opt.remap {Function} det kan återställa resultat items => items.map(...)
• opt.clear {Boolean} det rensar tidigare resultat (default: false)
• opt.init {Boolean} gör en tom sökning när komponenten kallas (default: false)
• opt.delay {Number} en försening i ms för att utföra sökningen (default: 100)
• opt.height {Number} en höjd av objektet (default: config.height)
• opt.class {String} lägger till en anpassad klass i behållaren
• NEW opt.placeholder {String} sökplatsinnehavare (default: config.placeholder)

Bra att veta:

• .items = [{ html }] -> html fält (i objekt) kommer att renderas som en platt HTML

Använd den med <ui-component name="spotlight">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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