j-Edit

Компонентът позволява 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.

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