j-Edit

O componente permite o atributo de contenteditable para elementos com classes de edit ou edit2.

• Singularidade
• Apresentação do elemento <body como o j-Directory ou o j-DatePicker.

Bom para saber:

• Cada elemento com a classe edit é possível editar com um único clique
• Cada elemento com a classe edit2 é possível editar com um duplo clique

Configuração:

• dateformat {String} um formato padrão para datas de parcelamento (default: yyyy-MM-dd)
• exec {String} opcional, um caminho padrão para function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} opcional, pode permitir o fluxo por padrão (default: false)
• minwidth {Number} opcional, uma min largura
• offsetX {Number} opcional, X offset
• offsetY {Number} opcional, Y offset

---

O data-edit suporta:

• required {Boolean} opcional, permite o "requisito" (default: false)
• type {String} opcional, pode ser string (defeitualmente em date, number, boolean, email, urlou html
• check {String} opcional, um caminho para function(opt, el) deve retornar boolean, isto significa Can the user edit that field?
• exec {String} opcional, um caminho para function(opt, accept(boolean/html_value_for_the_element))
• format {String} opcional, um formato para date, padrão: yyyy-MM-dd
• maxlength {Number} a extensão máxima
• minvalue {Number} a min. valor para o tipo de número (default: undefined)
• maxvalue {Number} um valor máximo para o tipo de número (default: undefined)
• bind {Boolean} se o true refuta data-bind apenas a este elemento (default: true)
• multiline {Boolean} opcional, permite multilina + aplicação classe editable-multiline (inline-block + width:100%) quando é editado (default: false)
• floating {Boolean/String} opcional, permite a janela flutuante para o elemento (default: false, string pode conter valores de position ou offset)
• offsetX {Number} opcional, adicional X offset para a janela flutuante
• offsetY {Number} opcional, offset Y adicional para a janela flutuante
• offsetWidth {Number} opcional, largura adicional para a janela flutuante
• width {Number} opcional, uma largura fixa para o painel flutuante
• parent {String} opcional, um seletor para obter offset (pode conter o seletore parent ou jQuery para o método .closest())
• selectall {Boolean} opcional, seleciona todo o texto
• cursor {String} opcional, uma posição de cursor beg ou end (default)
• notify {String} opcional, um caminho para function(opt) que será notificado após a mudança bem sucedida
• prevent {Boolean} opcional, executa .preventDefault() e .stopPropagation() no evento de clique
• align {String} opcional, estabelece um valeu para a propriedade alinhada ao texto para o modo de flutuante apenas
• focus {String} opcional, um link para o function(opt, el) quando focado
• blur {String} opcional, um link para o function(opt, el), quando é blurrado
• NEW: attr {String} opcional, um nome data-{attr} para obter o valor não formátado

Bom para saber:

• opt.set(value) pode ser usado para atribuir um valor

Use-o com <ui-component name="edit">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>