j-Edit

A komponens lehetővé teszi a contenteditable attribútumot az elemek számára, amelyek edit vagy edit2 osztályúak.

• Szingapúr
• Az elemet a <body elem alá helyezzük, mint például a j-Directory vagy a j-DatePicker

Jó tudni:

• A edit osztályú minden elem egy kattintással szerkeszthető.
• A edit2 osztályú minden elem kétszeres kattintással szerkeszthető.

konfiguráció:

• dateformat {String} - A megadott dátumok alapértelmezett formátumát (például: yyyy-MM-dd)
• exec {String} opcionális, alapértelmezett út a function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} opcionális, lehetővé teszi az alapértelmezett úszást (default: false)
• minwidth {Number} opcionális, egy min szélesség
• offsetX {Number} opcionális, X offset
• offsetY {Number} opcionális, Y offset

---

A data-edit elnevezés támogatja:

• required {Boolean} opcionális, lehetővé teszi a „követelt” (default: false)
• type {String} opcionális, lehet string (nézetes), date, number, boolean, email, url, vagy html
• check {String} opcionális, egy út a function(opt, el) vissza kell boolean, ez azt jelenti, hogy Can the user edit that field?
• exec {String} opcionális, egy út a function(opt, accept(boolean/html_value_for_the_element))
• format {String} opcionális, a date formátum, alapértelmezett: yyyy-MM-dd
• maxlength {Number} és max.
• minvalue {Number} a min. értéke számtípus (default: undefined)
• maxvalue {Number} a maximális értéke számtípus (default: undefined)
• bind {Boolean}, ha a true csak a data-bind elemet kötődik (elsődleges: true)
• multiline {Boolean} opcionális, lehetővé teszi multiline + appends osztály editable-multiline (inline-block + width:100%) amikor szerkesztés (default: false)
• floating {Boolean/String} opcionális, lehetővé teszi az elemek áramlását (meghatározás: false, string tartalmazhat position vagy offset értékeket)
• offsetX {Number} opcionális, kiegészítő X offset az úszó ablakhoz
• offsetY {Number} opcionális, kiegészítő Y offset az úszó ablakhoz
• offsetWidth {Number} opcionális, további szélesség az úszó ablakhoz
• width {Number} opcionális, rögzített szélesség az úszó panelekhez
• parent {String} opcionális, egy kiválasztó az offset megszerzéséhez (a parent vagy a jQuery kiválaszthatót tartalmazhatja a .closest() módszerhez)
• selectall {Boolean} opcionális, válassza ki az összes szöveget
• cursor {String} opcionális, a kurzor pozíciója beg vagy end (default)
• notify {String} opcionális, a function(opt) felé vezető út, amelyet sikeres változás után értesítenek
• prevent {Boolean} opcionális, fut .preventDefault() és .stopPropagation() a kattintás esemény
• align {String} opcionális, a szöveg-align tulajdonságot csak az úszó üzemmódhoz valósítja meg
• focus {String} opcionális, egy link a function(opt, el) amikor összpontosít
• blur {String} opcionális, a function(opt, el)-hez való hivatkozás, amikor szétesik
• NEW: attr {String} opcionális, a data-{attr} név formázhatatlan értéket kap

Jó tudni:

• opt.set(value) Értéket adhatunk hozzá

Használja a <ui-component name="edit">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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