# j-Edit

> Il componente consente attribuzione di contenuto edilizzabile per gli elementi con classi di edit o edit2.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: 479e814df2ff848674650a18bd005ec5bd800cb3fb04300568d5f4cff3ae653a
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

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.

```html example.html
<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>
```