j-Edit

Komponent umožňuje atribút contenteditable pre prvky s triedami edit alebo edit2.

• singleton
• položte zložku pod prvok <body, ako je j-Directory alebo j-DatePicker

Je dobré vedieť:

• Každý prvok s triedou edit je možné upraviť jedným kliknutím
• Každý prvok s triedou edit2 je možné upraviť dvakrát

Konfigurácia:

• dateformat {String} je predvolený formát pre dátumy (predvolené: yyyy-MM-dd)
• exec {String} voliteľný, predvolená cesta k function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} voliteľné, môže povoliť predvolené plávanie (predvolené: false)
• minwidth {Number} voliteľné, min šírka
• offsetX {Number} voliteľné, X offset
• offsetY {Number} voliteľné, Y offset

---

data-edit podporuje:

• required {Boolean} voliteľné, umožňuje "povinné" (predvolené: false)
• type {String} Opcionálne môže byť string a predvolene , date, number, boolean, email, urlalebo html
• check {String} voliteľné, cesta k function(opt, el) musí vrátiť boolean, to znamená Can the user edit that field?
• exec {String} voliteľné, cesta k function(opt, accept(boolean/html_value_for_the_element))
• format {String} voliteľný, formát pre date, predvolený: yyyy-MM-dd
• maxlength {Number} a maximálna dĺžka
• minvalue {Number} min. hodnota pre typ čísla (predvolená hodnota: undefined)
• maxvalue {Number} je maximálna hodnota pre typ čísla (predvolená hodnota: undefined)
• bind {Boolean} ak true spája data-bind iba s týmto prvkom (predvolené: true)
• multiline {Boolean} voliteľné, umožňuje multiline + prílohy triedy editable-multiline (inline-block + width:100%) pri úprave (predvolené: false)
• floating {Boolean/String} voliteľné, umožňuje plávajúce okno pre prvok (predvolené: false, string môže obsahovať hodnoty position alebo offset)
• offsetX {Number} voliteľný, dodatočný X offset pre plávajúce okno
• offsetY {Number} voliteľný, dodatočný Y offset pre plávajúce okno
• offsetWidth {Number} voliteľná, dodatočná šírka pre plávajúce okno
• width {Number} voliteľné, pevná šírka pre plávajúce panely
• parent {String} voliteľný, selektor na získanie offset (môže obsahovať parent alebo jQuery selektor pre metódu .closest())
• selectall {Boolean} voliteľné, vyberá celý text
• cursor {String} voliteľné, kurzor pozície beg alebo end (predvolené)
• notify {String} je voliteľný, cesta k function(opt) bude oznámená po úspešnej zmene
• prevent {Boolean} voliteľne, vykonáva .preventDefault() a .stopPropagation() v kliknutí
• align {String} voliteľne, nastaví hodnotu pre textovú vlastnosť len pre plávajúci režim
• focus {String} voliteľné, odkaz na function(opt, el) keď je zameraný
• blur {String} voliteľné, odkaz na function(opt, el) keď je rozdrvený
• NEW: attr {String} voliteľné, názov data-{attr} získať neformátovanú hodnotu

Je dobré vedieť:

• opt.set(value) sa dá použiť na pridelenie hodnoty

Použite ho so <ui-component name="edit">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia 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>