Design Web Tierra Virtual

Jeditable, como actualizar una web in situ…

We’ll follow showing you various utilities that you’ll apreciate when you’re managing your pages, we start from Jquery framework, in my opinion the lighter and more useful of javascript’s frameworks.

Let’s start… The utility I present you is Jeditable, a Jquery plugin that allows the “on site” edition of the tags of our page. This way it’s easier to achieve to create attractive CMS for our pages or clients.

We need.

Jquery – Download.
Jeditable – Download.

I’m gonna base this tutorial only on Jeditable, we’ll assume that you know Jquery and his carachteristics.

Basic example:

HTML Code:

JAVASCRIPT code

This way we told to Jeditable to choose all elements with “edit” class and to give them the Jeditable’s funcionalities, entre parentesis ponemos que programa php ha de recibir los datos y gestionarlos “http://www.example.com/save.php”.

Un ejemplo visual sacado del creador de Jeditable.

Pero esto no queda aquí Jeditable tiene multiples configuraciones para poder realizar todas las tareas más basicas de edición de una pagina, tanto como el uso de SELECTS, TEXTAREAS, control sobre los eventos, CLICK, DOBLECLICK, HOVER, ETC.. A continuación os hago un breve resumen de todas opciones, para mas información podeis ir a la web del creador, está en ingles pero es bastante visual.

En primer lugar haré una breve descripcion de las opciones y las posibilidades de cada una.

‘Type’: ‘Select’ (para que al editar salga una lista SELECT), ‘Text’ (para un cuadro de texto), ‘TextArea’ (obviooooooo)

‘Cancel’: ‘Etiqueta’ (Saldrá un boton de cancelar y podremos darle el nombre que deseemos’

‘SUbmit’: ‘OK’ (igual que el anterior pero para que salga un botón de confirmar’

‘Indicator’: ‘ ‘ (Es lo que sale cuando se está procesando la etiqueta “… Cargando”, “<img src=”mi_imagen.jpg” />)

‘tooltip’: ‘Mensaje’ (Obviamente saldrá cuando nos situemos por encima de la etiqueta el texto escrito en Mensaje)

‘loadurl’: ‘url’ (En este parametro pondremos la direccion de una url en caso de que queramos generar ese parametro dinámicamente “ejem:carga.php”)

Estas son la utilidades basicas a continuación os explico varios usos mas, por ejem la introducción de clases dentro de las propias ediciones.

En este ejemplo a todos los elementos con la clase “.editable” le añadimos la clase “.someclass”

¿Util verdad? Ahora os mostrare algunos ejemplos mas del uso de Jeditable añadiendo las opciones que os he mostrado anteriormente.

SELECT

Lo mismo a todas los objetos con clase editable le añade la opcion de poder editarlas y para ello en la etiqueta data le añade la, “‘opción’ : ‘valor’, ‘opcion’:'valor’” separando con comas cada elemento.
Le dice que es un tipo SELECT ( muestra objeto de formulario SELECT).
Le dice que quiere un boton de confirmación con la etiqueta ‘OK’.

Además podemos hacer que esos mismos datos que hemos picado a mano en la etiqueta “data”, los saque dinámicamente de un php por ejem:

El archivo Php. (miarchivo.php)

JAVASCRIPT

Aqui podemos observar que el campo SELECT los datos los obtiene de miarchivo.php

TEXTAREA

Podemos observar el type le dice que sea un text area.
No comentare lo del submit.
Observamos la inclusión de una nueva opción “callback” esto se utiliza para un manejo mas minucioso del flujo de datos, por ello introducimos una funcion dentro del propio Jeditable.

Abreis observado que en ningún momento e usado la etiqueta (type : “TEXT”) es la que sale por defecto al crear el objeto .editable.

Por último os enseñare los eventos que se pueden usar sobre este plugin.
Para ello utilizaremos la opcion “event:’evento’”
Codigo

Cuando agamos doble click sobre el objeto se podrá editar.

Cuando pasemos el raton por encima del objeto se podrá editar.

Para finalizar la pregunta del millón, ¿Como localiza mi programa php que variable ha de modificar?, pues bien dentro de la codificacion html Jeditable pasará como variables por defecto el ID y VALUE=a los datos modificados.

Ejemplo de recepción del php (Maskadito no os quejareis :>)
save.php

Bueno aquí os dejo otra vez la demo para que podais observar las posibilidades un saludo y hasta otro Post.

Daniel Perez.