Ajax.InPlaceEditor (class)

L'objet Ajax.InPlaceEditor() donne accès une fonctionnalité de taille, l'édition en place de données ou en anglais "in place editing".
Cette édition en place de données permet par exemple une modification rapide des informations d'un formulaire sans devoir recharger la page ce qui visuellement est moins troublant pour l'utilisateur.

L'édition en place de données est utilisée par exemple sur des sites comme Flickr qui a été l'un des premiers sites à proposer cette fonctionnalité.


La syntaxe d'appel de cet objet est présenté ci après :
new Ajax.InPlaceEditor( element, url, [options]);
De part sa nature, l'objet Ajax.InPlaceEditor() supporte des options spécifiques.
Ses options sont listées dans le tableau ci après :

Nom de l'option	Type	Défaut	Détails
okButton	Boolean	true	Déterminer si un bouton de validation est présenté en mode Edition.
okText	String	ok	Texte du bouton de validation en mode Edition.
cancelLink	Boolean	true	Détermine si un lien d'annulation est ajouté en mode Edition.
cancelText	String	cancel	Texte du lien d'annulation en mode Edition.
savingText	String	Saving...	Texte affiché lorsque la valeur du champ édité est envoyée au serveur.
clickToEditText	String	Click to edit	Texte affiché lors du survol MouseOver du champ édité.
formId	String	Id élément DOM plus 'inPlaceForm'	10/01/2007 : détails à donner
externalControl	String	null	Id d'un élément DOM qui agit comme un contrôle externe à l'édition. L'élément DOM sera caché lors de l'entrée en mode édition et sera réaffiché lors de la sortie du mode édition.
rows	Number	1	Taille en ligne du champ de saisie. Toute valeur supérieure à 1 utilisera un 'textarea' au lieu d'un 'input'.
onComplete	Function	function(transport, element)	Méthode permet d'appliquer un effet Effect.Highlight() lorsque la requête HTTP est retournée par le serveur. L'effet est basé sur la couleur précisée dans Ajax.InPlaceEditor.options.highlightcolor définie en dehors du prototype de l'objet (???).
onFailure	Function	function(transport)	Méthode permettant d'afficher un message d'erreur contenant la réponse du serveur suite à une requête HTTP ayant terminé en erreur. La réponse est présentée sans les tags d'éléments.
cols	Number	none	Nombre de colonnes à afficher pour le champ éditable. Cette option marche aussi bien pour un champ monoligne ou multilignes.
highlightcolor	String Couleur HTML	#FFFF99	Couleur utilisée pour l'effet de survol du champ à éditer. Notons que cette couleur est définie en dehors du prototype de l'objet Ajax.InPlaceEditor .
highlightcolorend	String Couleur HTML	#FFFFFF	Couleur utilisée pour la fin de l'effet survol.
savingClassName	String	inplaceeditor-saving	Classe CSS a appliquer au champ pendant l'envoi de la requête HTTP au serveur. Cette classe CSS est supprimée lorsque le serveur retourne sa réponse.
formClassName	String	inplaceeditor-form	Classe CSS à appliquer au formulaire édité en place.
loadingClassName	String	inplaceeditor-loading	10/01/2007 :: mise à jour à faire
callback	Function	function(form) { return Form.serialize(form); }	Méthode appelée juste avant que la requête HTTP ne soit envoyée au serveur. Cette méthode permet d'ajouter le contenu du formulaire créé pour simuler l'édition.
submitOnBlur	Boolean	false	Cette option permet de proposer l'auto envoi de la requête HTTP de mise à jour du champ éditable lorsque le champ texte édité perd le focus.

Le tableau d'options ci avant nous donne une bonne idée de ce qu'il est possible de réaliser à l'aide de cet objet Ajax.InPlaceEditor() .
Des exemples d'utilisation de cet objet sont présentés sur la page Ajax.InPlaceEditor ( ) .

: 10/01/2007 03:18:36 | : Scriptaculous, Scriptaculous.js, Ajax, Ajax.InPlaceEditor, InPlaceEditor, édition, en, place, de, données, inplaceeditor, inplaceediting,

Aucun commentaire enregistré