j-Edit

Komponenten möjliggör contenteditable attribut för element med edit eller edit2 klasser.

• singlar
• Lägg komponenten under <body-elementet som j-Directory eller j-DatePicker

Bra att veta:

• Varje element med edit-klassen kan redigeras med ett enda klick
• Varje element med edit2-klassen kan redigeras med ett dubbelklick

Konfigurera:

• dateformat {String} ett standardformat för parsingdatum (default: yyyy-MM-dd)
• exec {String} valfritt, en standardväg till function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} är valfritt, kan aktivera standardflygning (default: false)
• minwidth {Number} valfritt, en min bredd
• offsetX {Number} alternativ, X offset
• offsetY {Number} alternativ, Y offset

---

data-edit stöds av:

• required {Boolean} valfritt, möjliggör "nödvändigt" (default: false)
• type {String} kan vara string (default), date, number, boolean, email, url, eller html
• check {String} är valfritt, en väg till function(opt, el) måste returnera boolean, det vill säga Can the user edit that field?
• exec {String} alternativ, en väg till function(opt, accept(boolean/html_value_for_the_element))
• format {String} valfritt, ett format för date, standard: yyyy-MM-dd
• maxlength {Number} max längd
• minvalue {Number} en min. värde för siffror typ (default: undefined)
• maxvalue {Number} en max. värde för siffror typ (default: undefined)
• bind {Boolean} om true återförenar data-bind endast på detta element (default: true)
• multiline {Boolean} valfritt, möjliggör multiline + append klas editable-multiline (inline-block + width:100%) när det är redigering (default: false)
• floating {Boolean/String} valfritt, möjliggör flytande fönster för elementet (default: false, string kan innehålla värden position eller offset)
• offsetX {Number} valfritt, extra X-offset för det flytande fönstret
• offsetY {Number} valfritt, extra Y-avset för det flytande fönstret
• offsetWidth {Number} valfritt, extra bredd för det flytande fönsteret
• width {Number} valfritt, en fast bredd för flytande panel
• parent {String} valfritt, en selektor för att få offset (kan innehålla parent eller jQuery selektoren för .closest()-metoden)
• selectall {Boolean} valfritt, Välj hela texten
• cursor {String} valfritt, en kursor position beg eller end (default)
• notify {String} valfritt, en väg till function(opt) som kommer att meddelas efter framgångsrik förändring
• prevent {Boolean} valfritt, utför .preventDefault() och .stopPropagation() i klick händelsen
• align {String} valfritt, ställer in en valeu för textliknande egenskaper för flödesläget endast
• focus {String} valfritt, en länk till function(opt, el) när den är fokuserad
• blur {String} valfritt, en länk till function(opt, el) när den är blurad
• NEW: attr {String} valfritt, ett data-{attr} namn för att få det obformat värdet

Bra att veta:

• opt.set(value) kan användas för att tilldela ett värde

Använd den med <ui-component name="edit">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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