j-Edit

De component maakt het mogelijk om de contenteditable-attribut te geven voor elementen met edit of edit2-klassen.

• Singleton
• de component onder het element <body als j-Directory of j-DatePicker

Goed om te weten:

• Elk element met de edit-klasse kan worden bewerkt met één klik
• Elk element met de edit2-klasse kan worden bewerkt met een dubbele klik.

Configuratie:

• dateformat {String} een standaardformaat voor parsingdatums (default: yyyy-MM-dd)
• exec {String} optie, een standaard pad naar function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} optioneel, kan standaard vloeien (default: false)
• minwidth {Number} optie, een min breedte
• offsetX {Number} optie, X offset
• offsetY {Number} optie, Y offset

---

data-edit Attribute ondersteunt:

• required {Boolean} optioneel, mogelijk "verplicht" (default: false)
• type {String} Optional kan het string De standaard, date, number, boolean, email, urlOf html
• check {String} optioneel, een weg naar function(opt, el) moet teruggaan naar boolean, dat wil zeggen Can the user edit that field?
• exec {String} optioneel, een weg naar function(opt, accept(boolean/html_value_for_the_element))
• format {String} optioneel, een format voor date, standaard: yyyy-MM-dd
• maxlength {Number} een max.
• minvalue {Number} een min. waarde voor nummer type (default: undefined)
• maxvalue {Number} een max. waarde voor nummer type (default: undefined)
• bind {Boolean} als true alleen data-bind aan dit element bindt (default: true)
• multiline {Boolean} optioneel, mogelijk multiline + appends klasse editable-multiline (inline-block + width:100%) wanneer het wordt bewerkt (default: false)
• floating {Boolean/String} optioneel, maakt het vloeibare venster voor het element mogelijk (de standaard: false, string kan de waarden van position of offset bevatten)
• offsetX {Number} optioneel, extra X offset voor het vloeibare venster
• offsetY {Number} optioneel, extra Y offset voor het vloeibare venster
• offsetWidth {Number} optioneel, extra breedte voor het vloeibare venster
• width {Number} optioneel, een vaste breedte voor vloeibare panelen
• parent {String} optioneel, een selector voor het verkrijgen van offset (kan de parent of jQuery selector bevatten voor de .closest()-methode)
• selectall {Boolean} optioneel, selecteert alle tekst
• cursor {String} optioneel, een cursor positie beg of end (default)
• notify {String} optioneel, een route naar function(opt) die na succesvolle wijziging zal worden gemeld
• prevent {Boolean} optioneel, uitvoert .preventDefault() en .stopPropagation() in de klik evenement
• align {String} optioneel, stelt een vallei voor de tekst-align eigenschap voor de vloeibare modus alleen
• focus {String} optioneel, een link naar de function(opt, el) wanneer het is gericht
• blur {String} optioneel, een link naar de function(opt, el) wanneer het is gebroken
• NEW: attr {String} optioneel, een data-{attr} naam om de niet-geformateerde waarde te krijgen

Goed om te weten:

• opt.set(value) kan worden gebruikt om een waarde aan te geven

Gebruik het met <ui-component name="edit">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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