Eric @ EricBess WebHome

Gana no arrogante, no perder de hambre, no hay choque de pecho y la cara, como el mío Pinghu

Chinese (Simplified) flagItalian flagKorean flagPortuguese flagEnglish flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroat flagDanish flagFinnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flag
By N2H

JQuery efecto: "click-to-el cambio"

Meta

Uso de un AJAX (o AHAH), tecnología diseñada la página, sin dejar que los visitantes podrán ver en la (X) HTML de la página el contenido editorial.

Programa

Haga clic en la necesidad de editar el texto, cambiando con un botón de cancelar y guardar el texto. Para modificar la parte de la AHAH serán enviados a un servidor del lado del script PHP para actualizar la base de datos (MySQL o papel ordinario).

Demostración

AJAX-estilo de clic para cambiar de demostración
En esta primera demostración, que utiliza un ID de "editinplace" el elemento div. Cuando el ratón a través de aquí, el color de fondo será de color amarillo claro. Haga clic sobre el texto de algunos de los DOM se iniciará la operación, div elementos han sido sustituidos por los elementos de un texto - que figura en el texto original.
Haga clic en el botón Guardar para que el servidor del lado de los scripts PHP para enviar un nuevo documento HTML, y re-exportaciones recibido un nuevo texto (por $ _POST).
En el mundo real entornos, también debe agregar una pruebas de seguridad antes de que sean capaces de actualizar la base de datos y devolver la actualización de contenido de la página, informó a sus colegas el éxito de la aplicación de jQuery.

Sin embargo, en este caso, todos los cambios tienen éxito, enviar la información al script PHP regresará intacto a la jQuery código que indique una advertencia general a la ventana.

Código
? Ver código JavaScript 
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 

  . ready ( function ( ) { $ (Document). Listo (función () ( 
	  setClickable (); 
  )); 

  setClickable función () ( 
	  ) . click ( function ( ) { $ ( '# EditInPlace'). Haga clic en (función () ( 
		  '<div><textarea rows="10" cols="60">' + $ ( this ) . html ( ) + '</textarea>' ; var texto = '<div> <textarea rows="10" cols="60">' + $ (este). html () + '</ texto> "; 
		  '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>' ; var = botón '<div> <input type="button" value="SAVE" class="saveButton" /> O <input type="button" value="CANCEL" class="cancelButton" /> </ div> </ Div> '; 
		   $ ( this ) . html ( ) ; volver var = $ (este). html (); 
		  ) . after ( textarea + button ) . remove ( ) ; $ (Este). Después de (+ botón de texto). Eliminar (); 
		  ) . click ( function ( ) { saveChanges ( this , false ) ; } ) ; $ ( '. SaveButton'). Haga clic en (función () (saveChanges (este, falsa );)); 
		  ) . click ( function ( ) { saveChanges ( this ,  revert ) ; } ) ; $ ( '. CancelButton'). Haga clic en (función () (saveChanges (esto, volver );)); 
	  )) 
	  function ( ) { . Mouseover (función () ( 
		  ) . addClass ( "editable" ) ; $ (Este). AddClass ( "editar"); 
	  )) 
	  function ( ) { . Mouseout (función () ( 
		  ) . removeClass ( "editable" ) ; $ (Este). RemoveClass ( "editar"); 
	  )); 
  ); 

  obj ,  cancel ) { función saveChanges (obj, cancelar) ( 
	  ! cancel ) { if (! cancelar) ( 
		   $ ( obj ) . parent ( ) . siblings ( 0 ) . val ( ) ; var t = $ (obj). matriz (). hermanos (0). val (); 
		  "test2.php" , { $. Post ( "test2.php", ( 
  		  contenido: t 
		  function ( txt ) { ), Función (txt) ( 
			   txt ) ; alert (txt); 
		  )); 
	  { ) Else ( 
		   cancel; var t = cancelar; 
	  ) 
	  t == '' )  t = '(click to add text)' ; si (t =='') t = '(Haz clic para añadir texto)'; 
	  . parent ( ) . parent ( ) . after ( '<div id="editInPlace">' + t + '</div>' ) . remove ( ) ; $ (Obj). Padres (). Padres (). Después de ( '<div id="editInPlace">' + t + '</ div>'). Eliminar (); 
	  setClickable (); 
  )
? Ver código CSS 
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 

  cuerpo ( 
	   arial ,  helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif; 
	   small; font-size: pequeño; 
  ) 

   textarea { . Editable, de texto ( 
	  #ffffd3 ; background-color: # ffffd3; 
  ) 

  De texto ( 
	  95 % ; ancho: 95%; 
	  100 % ; font-size: 100%; 
  ) 

  Img.progress ( 
	  middle ; vertical-se suman: media; 
	   0 10px ; padding: 0 10px; 
  )

Páginas: 1 2

1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, promedio: 5 de 5)
Loading ... Cargando ...
- Acogió con beneplácito la calificación para este artículo

Relacionados con el registro de

En este documento, los lectores también están preocupados por el texto siguiente:

  • N / A

20 de julio, 2008 Autor: Eric | Codificación de Mercancías, Tecnología Web | Trackback | No hay comentarios | Email This Post Print This Post | 246 visitas

Añadir un comentario

Deje una respuesta

No hay comentarios ocultar enviar comentarios