j-Edit

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

El componente habilita el atributo contenteditable para elementos con clases edit o edit2.

singleton
coloque el componente bajo el elemento <body como j-Directory o j-DatePicker

Es bueno saberlo:

cada elemento con la clase edit es posible editar con un solo clic
cada elemento con la clase edit2 es posible editar con un doble clic

Configuración:

dateformat {String} un formato predeterminado para analizar fechas (predeterminado: yyyy-MM-dd)
exec {String} opcional, una ruta predeterminada a function(opt, accept(boolean/html_value_for_the_element))
floating {Boolean} opcional, puede habilitar la flotación de forma predeterminada (predeterminado: false)
minwidth {Number} opcional, un ancho mínimo
offsetX {Number} opcional, desplazamiento X
offsetY {Number} opcional, desplazamiento Y

El atributo data-edit admite:

required {Boolean} opcional, habilita "requerido" (predeterminado: false)
type {String} opcional, puede ser string (predeterminado), date, number, boolean, email, url o html.
check {String} opcional, una ruta a function(opt, el) debe devolver boolean, significa Can the user edit that field?
exec {String} opcional, una ruta a function(opt, accept(boolean/html_value_for_the_element))
format {String} opcional, un formato para date, predeterminado: yyyy-MM-dd
maxlength {Number} una longitud máxima
minvalue {Number} un mín. valor para el tipo de número (predeterminado: undefined)
maxvalue {Number} un máx. valor para el tipo de número (predeterminado: undefined)
bind {Boolean} si true vuelve a vincular data-bind solo en este elemento (predeterminado: true)
multiline {Boolean} opcional, habilita multilínea + agrega la clase editable-multiline (inline-block + width:100%) cuando se está editando (predeterminado: false)
floating {Boolean/String} opcional, habilita la ventana flotante para el elemento (predeterminado: false, string puede contener valores position o offset)
offsetX {Number} opcional, desplazamiento X adicional para la ventana flotante
offsetY {Number} opcional, desplazamiento Y adicional para la ventana flotante
offsetWidth {Number} opcional, ancho adicional para la ventana flotante
width {Number} opcional, ancho fijo para panel flotante
parent {String} opcional, un selector para obtener el desplazamiento (puede contener parent o selector jQuery para el método .closest())
selectall {Boolean} opcional, selecciona todo el texto
cursor {String} opcional, una posición del cursor beg o end (predeterminado)
notify {String} opcional, una ruta a function(opt) que será notificada después de un cambio exitoso
prevent {Boolean} opcional, ejecuta .preventDefault() y .stopPropagation() en el evento de clic
align {String} opcional, establece un valor para la propiedad de alineación de texto solo para el modo flotante
focus {String} opcional, un enlace al function(opt, el) cuando está enfocado
blur {String} opcional, un enlace al function(opt, el) cuando está borroso
NEW: attr {String} opcional, un nombre data-{attr} para obtener el valor sin formato

Es bueno saberlo:

opt.set(value) se puede utilizar para asignar un valor.

Úselo con <ui-component name="edit">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

example.html

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