# j-Edit

> Компонентът позволява съдържаниередактиращ атрибут за елементи с редактиране или редактиращи класове.

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

Компонентът позволява `contenteditable` атрибут за елементи с класове `edit` или `edit2`.

- Синглът
- Поставете компонента под `<body` елемент като `j-Directory` или `j-DatePicker`

__Добре е да се знае__:

- Всеки елемент с клас `edit` може да бъде редактиран с един клик
- Всеки елемент с клас `edit2` може да бъде редактиран с двойно кликване

__Конфигуриране__:

- `dateformat {String}` е стандартният формат за датите на пасинг (предварително: `yyyy-MM-dd`)
- `exec {String}` опционален, стандартният път към `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` е опционален, може да позволява плуване по подразбиране (предварително: `false`)
- `minwidth {Number}` опционално, минимална ширина
- `offsetX {Number}` опция, X отстъпка
- `offsetY {Number}` опция, Y отстъпка

---

`data-edit` Атрибутът подкрепя:

- `required {Boolean}` опционално, позволява "необходимо" (дефолт: `false`)
- `type {String}` Опционално, може да се `string` и по подразбиране, `date`, `number`, `boolean`, `email`, `url`или `html`
- `check {String}` Опционален път към `function(opt, el)` Трябва да се върне `boolean`Това означава `Can the user edit that field?`
- `exec {String}` опция, пътят към `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` опционален, формат за `date`, дефолт: `yyyy-MM-dd`
- `maxlength {Number}` Максимално
- `minvalue {Number}` е минимална стойност за номер тип (предварително: `undefined`)
- `maxvalue {Number}` е максималната стойност за тип номер (предварително: `undefined`)
- `bind {Boolean}` Ако `true` връзката `data-bind` В този случай (по подразбиране) `true`)
- `multiline {Boolean}` е опционален, позволява многолинен + приложни клас `editable-multiline` (`inline-block` + `width:100%`) когато се редактира (предварително: `false`)
- `floating {Boolean/String}` опционално, позволява плуване на прозореца за елемента (предварително: `false`, `string` може да съдържа стойностите на `position` или `offset`)
- `offsetX {Number}` опция, допълнителна X отстъпка за плуващото прозорци
- `offsetY {Number}` опция, допълнителна Y отстъпка за плуващото прозорци
- `offsetWidth {Number}` опция, допълнителна ширина за плуващото прозорче
- `width {Number}` опция, фиксирана ширина за плуване
- `parent {String}` опция, селектор за получаване на отстъпка (може да съдържа `parent` или jQuery селектор на метода `.closest()`)
- `selectall {Boolean}` опция, изберете целия текст
- `cursor {String}` опционално, позицията на курсора `beg` или `end` (предварително)
- `notify {String}` опционален, пътят към `function(opt)` който ще бъде уведомен след успешна промяна
- `prevent {Boolean}` опционално, изпълнява `.preventDefault()` и `.stopPropagation()` в кликване събитие
- `align {String}` опционално, поставяте валута за текстовата свойство само за плуващия режим
- `focus {String}` е опционален, връзката към `function(opt, el)` е фокусирана
- `blur {String}` е опционален, връзката към `function(opt, el)`, когато е изчерпана
- __NEW__: `attr {String}` опционално, името на `data-{attr}` за получаване на неформатната стойност

__Добре е да се знае__:

- `opt.set(value)` може да се използва за определяне на стойност

Използвайте го с `<ui-component name="edit">`Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в `DEF.fallback` (След това Componentator Източник: Питър Шерка Componentator Съставни съставки, лиценз на 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>
```