j-Edit

Il componente consente l'attribuzione di contenteditable per gli elementi con classi edit o edit2.

• singolo
• Il componente è sottoposto all'elemento <body come j-Directory o j-DatePicker.

Buono sapere:

• Ogni elemento con la classe edit può essere modificato con un solo clic
• Ogni elemento con la classe edit2 può essere modificato con un doppio clic

Configurazione:

• dateformat {String} un formato predefinito per le date di partenza (predefinita: yyyy-MM-dd)
• exec {String} opzionale, un percorso predefinito a function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} opzionale, può consentire il flusso di default (default: false)
• minwidth {Number} opzionale, una min larghezza
• offsetX {Number} opzionale, X offset
• offsetY {Number} opzionale e offset

---

L’attribuzione di data-edit supporta:

• required {Boolean} opzionale, consente "necessario" (default: false)
• type {String} opzionale, può essere string (default), date, number, boolean, email, url, o html
• check {String} opzionale, un percorso a function(opt, el) deve restituire boolean, cioè Can the user edit that field?
• exec {String} opzionale, un percorso a function(opt, accept(boolean/html_value_for_the_element))
• format {String} opzionale, un formato per date, predefinito: yyyy-MM-dd
• maxlength {Number} di lunghezza massima
• minvalue {Number} a min. valore per il tipo di numero (default: undefined)
• maxvalue {Number} un valore massimo per il tipo di numero (default: undefined)
• bind {Boolean} se true rimbone data-bind solo su questo elemento (default: true)
• multiline {Boolean} opzionale, consente multiline + appendice classe editable-multiline (inline-block + width:100%) quando si edita (default: false)
• floating {Boolean/String} opzionale, permette la finestra di flusso per l'elemento (default: false, string può contenere valori position o offset)
• offsetX {Number} opzionale, aggiuntivo X offset per la finestra in flusso
• offsetY {Number} opzionale, offset Y aggiuntivo per la finestra in flusso
• offsetWidth {Number} opzionale, larghezza aggiuntiva per la finestra a flusso
• width {Number} opzionale, una larghezza fissa per il pannello di flusso
• parent {String} opzionale, un selettore per ottenere offset (può contenere il seletore parent o jQuery per il metodo .closest())
• selectall {Boolean} opzionale, seleziona tutto il testo
• cursor {String} opzionale, una posizione di cursore beg o end (default)
• notify {String} opzionale, un percorso a function(opt) che sarà notificato dopo il successo di cambiamento
• prevent {Boolean} opzionale, esegue .preventDefault() e .stopPropagation() nell'evento di clic
• align {String} opzionale, impone un valeu per la proprietà alineata a testo solo per il modulo di flusso
• focus {String} opzionale, un collegamento al function(opt, el) quando è focalizzato
• blur {String} opzionale, un collegamento al function(opt, el) quando è blurato
• NEW: attr {String} opzionale, un nome data-{attr} per ottenere il valore non formato

Buono sapere:

• opt.set(value) può essere utilizzato per assegnare un valore

Utilizzare con <ui-component name="edit">Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo DEF.fallback (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

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