j-Edit

Komponenta umožňuje atribut contenteditable pro prvky s třídami edit nebo edit2.

• singleton
• Vložte složku pod prvek <body, jako je j-Directory nebo j-DatePicker

Dobré vědět:

• Každý prvek s třídou edit lze upravit jedním kliknutím
• Každý prvek s třídou edit2 lze upravit dvojím kliknutím.

Konfigurace:

• dateformat {String} je standardní formát pro termíny (default: yyyy-MM-dd)
• exec {String} volitelný, předvolená cesta k function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} je volitelný, může povolit výchozí plavbu (předběžné: false)
• minwidth {Number} volitelné, min šířka
• offsetX {Number} volitelný, X offset
• offsetY {Number} volitelný, Y offset

---

data-edit podporuje:

• required {Boolean} volitelně, umožňuje "potřebné" (předvolené: false)
• type {String} je volitelný, může být string (předvolený), date, number, boolean, email, url, nebo html
• check {String} je volitelný, cesta k function(opt, el) musí vrátit boolean, to znamená, že Can the user edit that field?
• exec {String} volitelný, cesta k function(opt, accept(boolean/html_value_for_the_element))
• format {String} volitelný, formát pro date, předvolený: yyyy-MM-dd
• maxlength {Number} max. délka
• minvalue {Number} min. hodnota pro typ čísla (default: undefined)
• maxvalue {Number} Maximální hodnota pro typ čísla (default: undefined)
• bind {Boolean}, pokud true přidává data-bind pouze na tento prvek (předvolený: true)
• multiline {Boolean} volitelně, umožňuje multilin + doplňky třídy editable-multiline (inline-block + width:100%) při úpravě (default: false)
• floating {Boolean/String} volitelné, umožňuje plovoucí okno pro prvek (předvolené: false, string může obsahovat hodnoty position nebo offset)
• offsetX {Number} volitelný, doplňkový X offset pro plovoucí okno
• offsetY {Number} volitelný, doplňkový Y offset pro plovoucí okno
• offsetWidth {Number} volitelná, další šířka pro plovoucí okno
• width {Number} volitelná, pevná šířka pro plovoucí panel
• parent {String} volitelný, selektor pro získání offset (může obsahovat parent nebo jQuery selektoru pro metodu .closest())
• selectall {Boolean} volitelně, vyberte celý text
• cursor {String} volitelně, kurzor pozice beg nebo end (podmíněné)
• notify {String} je volitelná, cesta k function(opt) bude oznámena po úspěšné změně
• prevent {Boolean} volitelně, provádí .preventDefault() a .stopPropagation() v kliknutí
• align {String} volitelně, nastaví hodnotu pro text-align vlastnost pouze pro plavací režim
• focus {String} volitelné, odkaz na function(opt, el) když je zaměřen
• blur {String} volitelně, odkaz na function(opt, el) když je roztaven
• NEW: attr {String} volitelné, jméno data-{attr} získat neformátovanou hodnotu

Dobré vědět:

• opt.set(value) lze použít k přidělování hodnoty

Použijte ji s <ui-component name="edit">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

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