Jquery effet: "à ce point que" | Eric @ EricBess WebHome

Jquery effet: "click-to-changement»

Cible

AJAX en utilisant un (ou AHAH) technologie conçue page, sans laisser les visiteurs seront en mesure de voir dans le (X) HTML page de contenu éditorial.

Program

Cliquez sur la nécessité de modifier le texte, en changeant avec un bouton annuler et de mettre la zone de texte. Pour modifier la partie de la AHAH sera envoyé à un serveur-côté fichier de script PHP pour mettre à jour la base de données (MySQL ou papier ordinaire).

Démonstration

AJAX-cliquez sur le style à changer de démonstration
Dans cette première démonstration, j'ai utilisé une id pour "editinplace" l'élément div. Quand la souris à travers ici, la couleur de fond sera jaune pâle. Cliquez sur le texte de certains des DOM opération débutera, div éléments ont été remplacés par un textarea éléments - contenues dans le texte original.
Cliquez sur le bouton Enregistrer pour le côté serveur des scripts PHP pour envoyer un nouveau document HTML, et les réexportations reçu un nouveau texte (par $ _POST).
Dans le monde réel des environnements, vous devriez également ajouter un des tests de sécurité avant qu'ils ne soient en mesure de mettre à jour la base de données et retourner le contenu de la page mise à jour, les collègues informés de la mise en œuvre réussie de JQuery.

Toutefois, dans ce cas, toutes les modifications sont couronnées de succès, envoyer l'information au script PHP sera de retour intact à la JQuery code indiquant un avertissement général à la fenêtre.

Code

? [Copier dans le presse-papier] Voir Code JAVASCRIPT

  . ready ( function ( ) { $ (Document). Ready (function () ( 
	  setClickable (); 
  )); 

  setClickable fonction () ( 
	  ) . click ( function ( ) { $ ( '# EditInPlace »). Cliquez sur (function () ( 
		  '<div><textarea rows="10" cols="60">'   $ ( this ) . html ( )   '</textarea>' ; textarea var = '<div> <textarea rows="10" cols="60">'   $ (ce). html ()   "</ textarea> '; 
		  '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>' ; bouton var = '<div> <input type="button" value="SAVE" class="saveButton" /> <input OU type="button" value="CANCEL" class="cancelButton" /> </ div> </ Div> '; 
		   $ ( this ) . html ( ) ; revenir var = $ (ce). html (); 
		  ) . after ( textarea   button ) . remove ( ) ; $ (Ce). Après (textarea bouton  ). Supprimer (); 
		  ) . click ( function ( ) { saveChanges ( this , false ) ; } ) ; $ ( '. SaveButton »). Cliquez sur (function () (SaveChanges (ce qui, de fausses );)); 
		  ) . click ( function ( ) { saveChanges ( this ,  revert ) ; } ) ; $ ( '. CancelButton »). Cliquez sur (function () (SaveChanges (ce qui, revenir );)); 
	  )) 
	  function ( ) { . Passez votre curseur (function () ( 
		  ) . addClass ( "editable" ) ; $ (Ce). AddClass ( "éditable"); 
	  )) 
	  function ( ) { . Mouseout (function () ( 
		  ) . removeClass ( "editable" ) ; $ (Ce). RemoveClass ( "éditable"); 
	  )); 
  ); 

  obj ,  cancel ) { SaveChanges fonction (obj, annuler) ( 
	  ! cancel ) { if (! annuler) ( 
		   $ ( obj ) . parent ( ) . siblings ( 0 ) . val ( ) ; var t = $ (obj). mère (). frères et sœurs (0). val (); 
		  "test2.php" , { $. Post ( "test2.php", ( 
  		  contenu: t 
		  function ( txt ) { ), Fonction (txt) ( 
			   txt ) ; alert (txt); 
		  )); 
	  { ) Else ( 
		   cancel; var t = annuler; 
	  ) 
	  t == '' )  t = '(click to add text)' ; if (t = t =='') "(cliquez pour ajouter du texte)»; 
	  . parent ( ) . parent ( ) . after ( '<div id="editInPlace">'   t   '</div>' ) . remove ( ) ; $ (Obj). Parent (). Parent (). Après ( '<div id="editInPlace">'   t   '</ div>'). Supprimer (); 
	  setClickable (); 
  )

? [Copier dans le presse-papier] Afficher le code CSS

  corps ( 
	   arial ,  helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif; 
	   small; font-size: petit; 
  ) 

   textarea { . Modifiables, de texte ( 
	  #ffffd3 ; background-color: # ffffd3; 
  ) 

  De texte ( 
	  95 % ; largeur: 95%; 
	  100 % ; font-size: 100%; 
  ) 

  Img.progress ( 
	  middle ; vertical-align: center; 
	   0 10px ; padding: 0 10px; 
  )