j-FloatingInput

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Singleton
unterstützt den Dark-Modus

Methoden:

Methode: component.show(options)

options.element {Element/jQuery Element}
options.offsetX {Number} optional, x Offset (Standard: 0)
options.offsetY {Number} optional, y Offset (Standard: 0)
options.offsetWidth {Number} optional, width Offset (Standard: 0)
options.placeholder {String} optional, ein Platzhalter für das Suchfeld
options.minwidth {Number} optional, eine minimale Breite, Standard 200
options.maxwidth {Number} optional, eine maximale Breite, Standard infinite
options.maxlength {Number} optional, eine maximale Länge des Werts, Standard 50
options.callback(value, element) {Function} wird ausgelöst, wenn der Benutzer auf das Element klickt
options.icon {String} optional, Font-Awesome-Symbol
options.close {Function} optional, kann das Schließen des Panels bestimmen
options.align {String} optional, left (Standard), right oder center
options.value {String} optional, ein Standardwert für die Eingabe
options.position {String} optional, top (Standard), bottom
options.summary {String} zusätzlicher Hilfeinhalt
options.monospace {Boolean} aktiviert Monospace-Schriftart
options.select {Boolean} wählt Text aus
NEW options.multiline {Boolean} ermöglicht Multiline
NEW options.height {Number} eine Höhe für Multiline (Standard: 100)

Methode: component.hide()

Konfiguration:

placeholder – ein Platzhalter für die Eingabe

Verwenden Sie es mit <ui-component name="floatinginput">. 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.

example.html

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

<ui-component name="floatinginput" config="placeholder:Type something ..."></ui-component>

<div class="container">
	<a href="javascript:void(0)">Type your name</a>
</div>

<script>
	$(document).on('click', 'a', function() {

		var opt = {};
		opt.element = this;
		opt.callback = function(value) {
			console.log('CLICK', value);
		};

		SETTER('floatinginput/show', opt);
	});
</script>