# j-Edit

> Az összetevő lehetővé teszi a tartalomszerkeszthető attribútumot az elemek szerkesztésével vagy szerkesztéssel.

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

A komponens lehetővé teszi a `contenteditable` attribútumot az elemek számára, amelyek `edit` vagy `edit2` osztályúak.

- Szingapúr
- Az elemet a `<body` elem alá helyezzük, mint például a `j-Directory` vagy a `j-DatePicker`

__Jó tudni__:

- A `edit` osztályú minden elem egy kattintással szerkeszthető.
- A `edit2` osztályú minden elem kétszeres kattintással szerkeszthető.

__konfiguráció__:

- `dateformat {String}` - A megadott dátumok alapértelmezett formátumát (például: `yyyy-MM-dd`)
- `exec {String}` opcionális, alapértelmezett út a `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` opcionális, lehetővé teszi az alapértelmezett úszást (default: `false`)
- `minwidth {Number}` opcionális, egy min szélesség
- `offsetX {Number}` opcionális, X offset
- `offsetY {Number}` opcionális, Y offset

---

A `data-edit` elnevezés támogatja:

- `required {Boolean}` opcionális, lehetővé teszi a „követelt” (default: `false`)
- `type {String}` opcionális, lehet `string` (nézetes), `date`, `number`, `boolean`, `email`, `url`, vagy `html`
- `check {String}` opcionális, egy út a `function(opt, el)` vissza kell `boolean`, ez azt jelenti, hogy `Can the user edit that field?`
- `exec {String}` opcionális, egy út a `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` opcionális, a `date` formátum, alapértelmezett: `yyyy-MM-dd`
- `maxlength {Number}` és max.
- `minvalue {Number}` a min. értéke számtípus (default: `undefined`)
- `maxvalue {Number}` a maximális értéke számtípus (default: `undefined`)
- `bind {Boolean}`, ha a `true` csak a `data-bind` elemet kötődik (elsődleges: `true`)
- `multiline {Boolean}` opcionális, lehetővé teszi multiline + appends osztály `editable-multiline` (`inline-block` + `width:100%`) amikor szerkesztés (default: `false`)
- `floating {Boolean/String}` opcionális, lehetővé teszi az elemek áramlását (meghatározás: `false`, `string` tartalmazhat `position` vagy `offset` értékeket)
- `offsetX {Number}` opcionális, kiegészítő X offset az úszó ablakhoz
- `offsetY {Number}` opcionális, kiegészítő Y offset az úszó ablakhoz
- `offsetWidth {Number}` opcionális, további szélesség az úszó ablakhoz
- `width {Number}` opcionális, rögzített szélesség az úszó panelekhez
- `parent {String}` opcionális, egy kiválasztó az offset megszerzéséhez (a `parent` vagy a jQuery kiválaszthatót tartalmazhatja a `.closest()` módszerhez)
- `selectall {Boolean}` opcionális, válassza ki az összes szöveget
- `cursor {String}` opcionális, a kurzor pozíciója `beg` vagy `end` (default)
- `notify {String}` opcionális, a `function(opt)` felé vezető út, amelyet sikeres változás után értesítenek
- `prevent {Boolean}` opcionális, fut `.preventDefault()` és `.stopPropagation()` a kattintás esemény
- `align {String}` opcionális, a szöveg-align tulajdonságot csak az úszó üzemmódhoz valósítja meg
- `focus {String}` opcionális, egy link a `function(opt, el)` amikor összpontosít
- `blur {String}` opcionális, a `function(opt, el)`-hez való hivatkozás, amikor szétesik
- __NEW__: `attr {String}` opcionális, a `data-{attr}` név formázhatatlan értéket kap

__Jó tudni__:

- `opt.set(value)` Értéket adhatunk hozzá

Használja a `<ui-component name="edit">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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