j-Spotlight

• Σιγκλέτο
• Η λειτουργία του Bootstrap Grid System

ΕΠΙΤΡΟΦΗ:

• height {Αριθμός} ένα προεπιλεγμένο ύψος κάθε στοιχείου (προεπιλογή: 40, πρέπει επίσης να ορίζεται στο CSS)
• placeholder {String} ένα προεπιλεγμένο κάτοχο (προεπιλογή: Search)

Μέθοδοι:

Μέθοδος: component.show(opt)

• opt.id {String} προαιρετικό, αναγνωριστικό για τα πρόσφατα στοιχεία (προεπιλεγμένο: empty)
• Το opt.recent {String} επιτρέπει πρόσφατα στοιχεία, πρέπει να περιέχει μορφή λήξης (προεπιλογή: 3 days, empty σημαίνει απενεργοποιημένο)
• Το opt.callback(selected_item) {Function} εκκινείται όταν ο χρήστης κάνει κλικ στο στοιχείο
• Το opt.cancel {Function} ενεργοποιείται και ο χρήστης ακυρώνει το συστατικό
• Διεύθυνση URL opt.search {String} για την αναζήτηση τιμών στη φόρμα GET /api/search/?={0}
• ή opt.search {Function} ένα σύνδεσμο στο function(search, next(ARR_ITEMS)) για την αναζήτηση
• Το opt.cache {String} επιτρέπει την κρυπτογράφηση, μπορεί να περιέχει μια μορφή λήξης όπως το 1 day ή το session
• opt.remap {Function} μπορεί να αποκαταστήσει τα αποτελέσματα items => items.map(...)
• opt.clear {Boolean} καθαρίζει τα προηγούμενα αποτελέσματα (προεπιλεγμένα: false)
• Το opt.init {Boolean} κάνει μια κενή αναζήτηση όταν το συστατικό καλείται (προεπιλογή: false)
• opt.delay {Number} μια καθυστέρηση στο ms για την εκτέλεση της αναζήτησης (προεπιλογή: 100)
• opt.height {Number} ύψος στοιχείου (προεπιλογή: config.height)
• Το opt.class {String} προσθέτει μια προσαρμοσμένη κατηγορία στο δοχείο
• NEW opt.placeholder {String} εντοπιστής αναζήτησης (προεπιλεγμένη: config.placeholder)

Καλό να ξέρεις:

• Το πεδίο .items = [{ html }] -> html (σε αντικείμενα) θα παραδοθεί ως επίπεδη HTML

Χρησιμοποιήστε το με <ui-component name="spotlight">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, 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>