j-Edit

Componentul permite atribuirea contenteditable pentru elemente cu clase edit sau edit2.

• Singletă
• Se pune sub elementul <body, cum ar fi j-Directory sau j-DatePicker.

bine să știi:

• Fiecare element cu clasa edit poate fi editat cu un singur clic
• Fiecare element cu clasa edit2 poate fi editat cu un dublu clic

Configurarea:

• dateformat {String} este un format standard pentru datele de parcare (default: yyyy-MM-dd)
• exec {String} opțional, o cale de preferință la function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} opțional, poate permite floarea în mod implicit (default: false)
• minwidth {Number} opțional, o min width
• offsetX {Number} opțional, X offset
• offsetY {Number} opțional, Y offset

---

Atribuția data-edit susține:

• required {Boolean} opțional, permite „necesită” (default: false)
• type {String} Opțional, poate fi string în mod implicit, date, number, boolean, email, urlsau html
• check {String} opțional, o cale la function(opt, el) trebuie să se întoarcă la boolean, înseamnă Can the user edit that field?
• exec {String} opțional, o cale către function(opt, accept(boolean/html_value_for_the_element))
• format {String} opțional, un format pentru date, standard: yyyy-MM-dd
• maxlength {Number} o lungime maxă
• minvalue {Number} o valoare min. pentru tipul de număr (default: undefined)
• maxvalue {Number} o valoare maximă pentru tipul de număr (default: undefined)
• bind {Boolean} dacă true reunește numai data-bind la acest element (default: true)
• multiline {Boolean} opțional, permite clasa multilină + aplicații editable-multiline (inline-block + width:100%) atunci când este editarea (default: false)
• floating {Boolean/String} opțional, permite fereastra de floare pentru element (defață: false, string poate conține valori position sau offset)
• offsetX {Number} opțional, offset suplimentar X pentru fereastra float
• offsetY {Number} opțional, offset Y suplimentar pentru fereastra float
• offsetWidth {Number} opțional, lățime suplimentară pentru fereastra de floare
• width {Number} opțional, o lățime fixă pentru panourile de floare
• parent {String} opțional, un selector pentru obținerea offset-ului (poate conține parent sau jQuery pentru metoda .closest())
• selectall {Boolean} opțional, selectați toate textele
• cursor {String} opțional, o poziție de cursor beg sau end (default)
• notify {String} opțional, o cale către function(opt) care va fi notificată după schimbarea de succes
• prevent {Boolean} opțional, execută .preventDefault() și .stopPropagation() în evenimentul de clic
• align {String} opțional, stabilește o vală pentru proprietatea text-align pentru modul de floare numai
• focus {String} opțional, un link la function(opt, el) atunci când este concentrat
• blur {String} opțional, un link la function(opt, el) atunci când este blurată
• NEW: attr {String} opțional, un nume data-{attr} pentru a obține valoarea neformată

bine să știi:

• opt.set(value) poate fi utilizat pentru a atribui o valoare

Utilizați-l cu <ui-component name="edit">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Autor: Peter Širka. sursă: Componentator Componente de stocare, MIT licență.

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