# j-Edit

> Componentul permite atributul editabil de conținut pentru elemente cu clase edit sau edit2.

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

Componentul permite atribuirea `contenteditable` pentru elemente cu clase `edit` sau `edit2`.

- Singletă
- Se pune sub elementul `<body`, cum ar fi `j-Directory` sau `j-DatePicker`.

__bine să știi__:

- Fiecare element cu clasa `edit` poate fi editat cu un singur clic
- Fiecare element cu clasa `edit2` poate fi editat cu un dublu clic

__Configurarea__:

- `dateformat {String}` este un format standard pentru datele de parcare (default: `yyyy-MM-dd`)
- `exec {String}` opțional, o cale de preferință la `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` opțional, poate permite floarea în mod implicit (default: `false`)
- `minwidth {Number}` opțional, o min width
- `offsetX {Number}` opțional, X offset
- `offsetY {Number}` opțional, Y offset

---

Atribuția `data-edit` susține:

- `required {Boolean}` opțional, permite „necesită” (default: `false`)
- `type {String}` Opțional, poate fi `string` în mod implicit, `date`, `number`, `boolean`, `email`, `url`sau `html`
- `check {String}` opțional, o cale la `function(opt, el)` trebuie să se întoarcă la `boolean`, înseamnă `Can the user edit that field?`
- `exec {String}` opțional, o cale către `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` opțional, un format pentru `date`, standard: `yyyy-MM-dd`
- `maxlength {Number}` o lungime maxă
- `minvalue {Number}` o valoare min. pentru tipul de număr (default: `undefined`)
- `maxvalue {Number}` o valoare maximă pentru tipul de număr (default: `undefined`)
- `bind {Boolean}` dacă `true` reunește numai `data-bind` la acest element (default: `true`)
- `multiline {Boolean}` opțional, permite clasa multilină + aplicații `editable-multiline` (`inline-block` + `width:100%`) atunci când este editarea (default: `false`)
- `floating {Boolean/String}` opțional, permite fereastra de floare pentru element (defață: `false`, `string` poate conține valori `position` sau `offset`)
- `offsetX {Number}` opțional, offset suplimentar X pentru fereastra float
- `offsetY {Number}` opțional, offset Y suplimentar pentru fereastra float
- `offsetWidth {Number}` opțional, lățime suplimentară pentru fereastra de floare
- `width {Number}` opțional, o lățime fixă pentru panourile de floare
- `parent {String}` opțional, un selector pentru obținerea offset-ului (poate conține `parent` sau jQuery pentru metoda `.closest()`)
- `selectall {Boolean}` opțional, selectați toate textele
- `cursor {String}` opțional, o poziție de cursor `beg` sau `end` (default)
- `notify {String}` opțional, o cale către `function(opt)` care va fi notificată după schimbarea de succes
- `prevent {Boolean}` opțional, execută `.preventDefault()` și `.stopPropagation()` în evenimentul de clic
- `align {String}` opțional, stabilește o vală pentru proprietatea text-align pentru modul de floare numai
- `focus {String}` opțional, un link la `function(opt, el)` atunci când este concentrat
- `blur {String}` opțional, un link la `function(opt, el)` atunci când este blurată
- __NEW__: `attr {String}` opțional, un nume `data-{attr}` pentru a obține valoarea neformată

__bine să știi__:

- `opt.set(value)` poate fi utilizat pentru a atribui o valoare

Utilizați-l cu `<ui-component name="edit">`Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa `DEF.fallback` (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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