j-Edit

Składnik umożliwia atrybut contenteditable dla elementów z klasami edit lub edit2.

• Singleton
• Położenie składnika pod elementem <body, takim jak j-Directory lub j-DatePicker

Dobrze wiedzieć:

• Każdy element z klasą edit można edytować jednym kliknięciem.
• Każdy element z klasą edit2 można edytować za pomocą dwukliki

Konfiguracja:

• dateformat {String} - standardowy format daty parsingu (default: yyyy-MM-dd)
• exec {String} opcjonalny, domyślna ścieżka do function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} opcjonalny, może umożliwić pływanie wstępnie (default: false)
• minwidth {Number} opcjonalny, min szerokość
• offsetX {Number} opcjonalny, X offset
• offsetY {Number} opcjonalny, Y offset

---

Wymagania data-edit są:

• required {Boolean} opcjonalny, umożliwia "wymagane" (default: false)
• type {String} opcjonalny, może być string (default), date, number, boolean, email, url, lub html
• check {String} opcjonalny, droga do function(opt, el) musi powrócić do boolean, co oznacza, że Can the user edit that field?
• exec {String} opcjonalny, droga do function(opt, accept(boolean/html_value_for_the_element))
• format {String} opcjonalny, format dla date, standardowy: yyyy-MM-dd
• maxlength {Number} maksymalna długość
• Wartość minvalue {Number} min. dla typu liczby (default: undefined)
• maxvalue {Number} maksymalna wartość dla typu liczby (default: undefined)
• bind {Boolean} jeśli true odłącza data-bind tylko do tego elementu (default: true)
• multiline {Boolean} opcjonalny, umożliwia wielokrotne + dodatki klasy editable-multiline (inline-block + width:100%) podczas edycji (default: false)
• floating {Boolean/String} opcjonalny, umożliwia płynne okno dla elementu (default: false, string może zawierać wartości position lub offset)
• offsetX {Number} opcjonalny, dodatkowy X offset dla płynącego okna
• offsetY {Number} opcjonalny, dodatkowy odsetek Y dla płynącego okna
• offsetWidth {Number} opcjonalne, dodatkowe szerokość dla okna pływającego
• width {Number} opcjonalny, stała szerokość dla panelu pływającego
• parent {String} opcjonalny, selektor do uzyskania offset (może zawierać selektor parent lub jQuery dla metody .closest())
• selectall {Boolean} opcjonalny, wybiera cały tekst
• cursor {String} opcjonalny, pozycja kursora beg lub end (default)
• notify {String} opcjonalny, ścieżka do function(opt), która zostanie powiadomiona po udanej zmianie
• prevent {Boolean} opcjonalny, wykonuje .preventDefault() i .stopPropagation() w przypadku kliknięcia
• align {String} opcjonalny, ustawia wartość dla właściwości tekstowej tylko w trybie pływającym
• focus {String} opcjonalny, link do function(opt, el) kiedy jest skoncentrowany
• blur {String} opcjonalny, łącznik do function(opt, el) kiedy jest rozcieńczony
• NEW: attr {String} opcjonalny, nazwa data-{attr} do uzyskania wartości nieformatującej

Dobrze wiedzieć:

• opt.set(value) może być wykorzystywany do przyznania wartości

Użyj go z <ui-component name="edit">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>