j-Edit

Die Komponente aktiviert das Attribut contenteditable für Elemente mit den Klassen edit oder edit2.

• Singleton
• Platzieren Sie die Komponente unter dem Element <body wie j-Directory oder j-DatePicker

Gut zu wissen:

• Jedes Element mit der Klasse edit kann mit einem einzigen Klick bearbeitet werden
• Jedes Element mit der Klasse edit2 kann mit einem Doppelklick bearbeitet werden

Konfiguration:

• dateformat {String} ein Standardformat zum Parsen von Datumsangaben (Standard: yyyy-MM-dd)
• exec {String} optional, ein Standardpfad zu function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} optional, kann Floating standardmäßig aktivieren (Standard: false)
• minwidth {Number} optional, eine Mindestbreite
• offsetX {Number} optional, X-Offset
• offsetY {Number} optional, Y-Offset

---

Das data-edit-Attribut unterstützt:

• required {Boolean} optional, aktiviert „erforderlich“ (Standard: false)
• type {String} optional, kann string (Standard), date, number, boolean, email, url oder html sein
• check {String} optional, ein Pfad zu function(opt, el) muss boolean zurückgeben, was Can the user edit that field? bedeutet
• exec {String} optional, ein Pfad zu function(opt, accept(boolean/html_value_for_the_element))
• format {String} optional, ein Format für date, Standard: yyyy-MM-dd
• maxlength {Number} eine maximale Länge
• minvalue {Number} pro Minute. Wert für Nummerntyp (Standard: undefined)
• maxvalue {Number} max. Wert für Nummerntyp (Standard: undefined)
• bind {Boolean}, wenn true data-bind nur für dieses Element erneut bindet (Standard: true)
• multiline {Boolean} optional, aktiviert Mehrzeilen + hängt die Klasse editable-multiline (inline-block + width:100%) an, wenn sie bearbeitet wird (Standard: false)
• floating {Boolean/String} optional, aktiviert schwebendes Fenster für das Element (Standard: false, string kann position- oder offset-Werte enthalten)
• offsetX {Number} optional, zusätzlicher X-Offset für das schwebende Fenster
• offsetY {Number} optional, zusätzlicher Y-Offset für das schwebende Fenster
• offsetWidth {Number} optional, zusätzliche Breite für das schwebende Fenster
• width {Number} optional, eine feste Breite für schwebendes Panel
• parent {String} optional, ein Selektor zum Erhalten des Offsets (kann parent oder jQuery-Selektor für die Methode .closest() enthalten)
• selectall {Boolean} optional, wählt den gesamten Text aus
• cursor {String} optional, eine Cursorposition beg oder end (Standard)
• notify {String} optional, ein Pfad zu function(opt), der nach erfolgreicher Änderung benachrichtigt wird
• prevent {Boolean} optional, führt .preventDefault() und .stopPropagation() im Klickereignis aus
• align {String} optional, legt einen Wert für die text-align-Eigenschaft nur für den Floating-Modus fest
• focus {String} optional, ein Link zum function(opt, el), wenn es fokussiert ist
• blur {String} optional, ein Link zum function(opt, el), wenn es unscharf ist
• NEW: attr {String} optional, ein data-{attr}-Name, um den unformatierten Wert zu erhalten

Gut zu wissen:

• Mit opt.set(value) kann ein Wert zugewiesen werden

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

<ui-component name="edit"></ui-component>

<ui-plugin path="form" style="width:500px;padding:10px;border:1px solid #E0E0E0">

	<div class="row m">
		<div class="col-xs-3">
			Name:
		</div>
		<div class="col-xs-9">
			<ui-bind class="edit2 block" data-edit="required:1;floating:1" path="?.name" config="html" style="height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			Email:
		</div>
		<div class="col-xs-9">
			<div class="edit" data-edit="required:1;type:email;exec:save_email" style="height:24px;background-color:#E0E0E0">@</div>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			HTML:
		</div>
		<div class="col-xs-9">
			<ui-bind  class="edit block" data-edit="multiline:1;floating:1;type:html" path="form.html" config="html" style="min-height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<pre><ui-bind path="?" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-plugin>

<script>

	function save_email(opt, next) {
		SET('form.email', opt.value);
		// next(true);
		// next(false) OR next(null) cancels the change
		next(opt.value.toUpperCase());
	}

	var form = {};
	form.html = '<b>Hello world!</b>';
	form.name = 'UI components';

</script>