css gallery

Design Web Tierra Virtual

BLOG DE TENDENCIA WEB

Un blog de divulgación sobre interntet y tecnológia

22
ago
2008
Jeditable, como actualizar una web in situ…

Empezaremos esta andadura que hemos comenzado hace relativamente poco para ir explicando a lo largo de los siguientes Post muchas utilidades que os van a resultar muy interesantes para agregar a vuestras páginas, para ello empezaremos por el framework Jquery sin duda para mi gusto el menos pesado y el mas útil de los frameworks para javascript.

Manos a la obra… La utilidad que os presento es Jeditable, un plugin de Jquery que nos permitira la edicion in situ de etiquetas en nuestra página web de esta forma podremos hacer unos CMS mucho mas vistosos y atractivos tanto para nuestras páginas como para nuestros clientes.

Necesitaremos.

Jquery – Descarga.
Jeditable – Descarga.

Voy a basar este tutorial exclusivamente a Jeditable dando por sentado que conoceis un poco el framework Jquery y sus nomenclaruras.

EJemplo básico:

Codigo HTML:

<div class=”edit” id=”div_1″>Dolor</div>
<div class=”edit_area” id=”div_2″>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

Codigo JAVASCRIPT

$(document).ready(function() {
$(“.edit”).editable(http://www.example.com/save.php);
});

Con esto le hemos dicho a Jeditable que escoja todos los elementos con clase “edit” y les de las funcionalidades de Jeditable, 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.

$(“.editable”).editable(“http://www.example.com/save.php”, {
cssclass : “someclass”
});

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

$(“.editable”).editable(“http://www.example.com/save.php”, {
data : ” {‘E’:'Letter E’,'F’:'Letter F’,'G’:'Letter G’, ‘selected’:'F’}”,
type : “select”,
submit : “OK”
});

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)

$array['E'] = ‘Letter E’;
$array['F'] = ‘Letter F’;
$array['G'] = ‘Letter G’;
$array['selected'] = ‘F’;
print json_encode($array);
?>

JAVASCRIPT

$(“.editable”).editable(“http://www.example.com/save.php”, { loadurl : “http://www.example.com/miarchivo.php”, type : “select”, submit : “OK”, style : “display: inline” });

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

TEXTAREA

$(“.editable”).editable(“http://www.example.com/save.php”, {
type : “textarea”,
submit : “OK”,
callback : function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
} });

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

$(“.dblclick”).editable(“http://www.appelsiini.net/projects/jeditable/php/echo.php”, {
indicator : “<img src=”http://www.web-web.org/images/indicator.gif” alt=”" />”,
tooltip : “Doubleclick to edit…”,
event : “dblclick”, //* Al hacer doble click *//
style : “inherit”
});

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

$(“.mouseover”).editable(“http://www.appelsiini.net/projects/jeditable/php/echo.php”, {
indicator : “<img src=”http://www.web-web.org/images/indicator.gif” alt=”" />”,
tooltip : “Move mouseover to edit…”,
event : “mouseover”,//* Al pasar por encima el mouse *//
style : “inherit”
});

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.

<h3 class=”editable” id=”header_3″>Header 3</h3>

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

$id=$_POST['id']; <– Header 3.
$valor = stripslashes($_POST['value'] ); <– Valor que haya escrito el usuario en el cambio.

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

Daniel Perez.

COMPÁRTELO

Facebook Twitter Delicious Technorati Stumbleupon Digg

No hay ningún comentário ánimate y participa escribe un comentário.

INSERTAR COMENTARIO

NOMBRE

EMAIL

WWWW - DIRECCIÓN WEB

COMENTARIOS (Separadas por coma)

¡CONTACTA!

T. (+34) 960 094 069

SOCIAL MEDIA