j-Features

• nur für Desktop-Computer
• Singleton
• Funktioniert mit dem Bootstrap Grid System

Methoden

Methode: component.open(opt)

• opt.placeholder {String} ein Platzhalter für die Sucheingabe (Standard: config.placeholder)
• opt.items {Object Array} mit Liste der Funktionen (erforderlich):
  • name {String} ein Funktionsname
  • icon {String} (optionales) Symbol ohne fa-
  • keywords {String} (optional) zusätzliche Schlüsselwörter für die Suche
  • value {Object/String/Number} ein Wert

opt.scrolltop {Boolean} scrollt nach oben, bis das Fenster angezeigt wird (Standard: false)

opt.callback(selected) {Function} ein Rückruf, der aufgerufen wird, wenn der Benutzer auf eine Funktion klickt. selected-Argument enthält ausgewähltes Element.

Methode: component.hide()

Konfiguration:

• placeholder {String} ein Platzhalter für die Sucheingabe
• height {Number} Höhe des Listenelements (optional, Standard 35)

Verwenden Sie es mit <ui-component name="features">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

<style>
	body { background-color: #F0F0F0; }
</style>

<ui-component name="features" config="placeholder:Search ..."></ui-component>

<div class="container">
	<a href="javascript:features()">Show features</a>
</div>

<script>
	function features() {
		var opt = {};
		opt.items = [{ name: 'Dashboard' }, { name: 'Invoices' }, { name: 'Orders' }, { name: 'Products' }, { name: 'Pages' }, { name: 'Notes' }, { name: 'Users', icon: 'user' }, { name: 'Settings' }];
		opt.callback = function(selected) {
			console.log('CLICK', selected);
		};
		SETTER('features/show', opt);
	}
	setTimeout(features, 500);
</script>