j-Edit

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Le composant active l'attribut contenteditable pour les éléments avec les classes edit ou edit2.

singleton
placez le composant sous l'élément <body comme j-Directory ou j-DatePicker

Bon à savoir :

chaque élément de la classe edit est modifiable en un seul clic
chaque élément de la classe edit2 est éditable en double clic

Configuration :

dateformat {String} un format par défaut pour l'analyse des dates (par défaut : yyyy-MM-dd)
exec {String} facultatif, un chemin par défaut vers function(opt, accept(boolean/html_value_for_the_element))
floating {Boolean} en option, peut activer le flottement par défaut (par défaut : false)
minwidth {Number} en option, une largeur minimale
offsetX {Number} en option, déport X
offsetY {Number} en option, décalage Y

L'attribut data-edit prend en charge :

required {Boolean} en option, active "obligatoire" (par défaut : false)
type {String} en option, peut être string (par défaut), date, number, boolean, email, url ou html
check {String} facultatif, un chemin vers function(opt, el) doit renvoyer boolean, cela signifie Can the user edit that field?
exec {String} en option, un chemin vers function(opt, accept(boolean/html_value_for_the_element))
format {String} en option, un format pour date, par défaut : yyyy-MM-dd
maxlength {Number} une longueur maximale
minvalue {Number} une minute. valeur pour le type de numéro (par défaut : undefined)
maxvalue {Number} un maximum. valeur pour le type de numéro (par défaut : undefined)
bind {Boolean} si true relie data-bind sur cet élément uniquement (par défaut : true)
multiline {Boolean} en option, active le multiligne + ajoute la classe editable-multiline (inline-block + width:100%) lors de l'édition (par défaut : false)
floating {Boolean/String} en option, active la fenêtre flottante pour l'élément (par défaut : false, string peut contenir des valeurs position ou offset)
offsetX {Number} en option, décalage X supplémentaire pour la fenêtre flottante
offsetY {Number} en option, décalage Y supplémentaire pour la fenêtre flottante
offsetWidth {Number} en option, largeur supplémentaire pour la fenêtre flottante
width {Number} en option, une largeur fixe pour panneau flottant
parent {String} en option, un sélecteur pour l'obtention du offset (peut contenir parent ou un sélecteur jQuery pour la méthode .closest())
selectall {Boolean} en option, sélectionne tout le texte
cursor {String} en option, une position du curseur beg ou end (par défaut)
notify {String} facultatif, un chemin vers function(opt) qui sera notifié après une modification réussie
prevent {Boolean} facultatif, exécute .preventDefault() et .stopPropagation() en cas de clic
align {String} facultatif, définit une valeur pour la propriété text-align pour le mode flottant uniquement
focus {String} en option, un lien vers le function(opt, el) lorsqu'il est focalisé
blur {String} en option, un lien vers le function(opt, el) lorsqu'il est flou
NEW : attr {String} facultatif, un nom data-{attr} pour récupérer la valeur non formatée

Bon à savoir :

opt.set(value) peut être utilisé pour attribuer une valeur

Utilisez-le avec <ui-component name="edit">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence 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>