Jquery účinek: "To, že k bodu" | Eric @ EricBess WebHome

Jquery účinek: "click-to-změny"

Cíl

Použití AJAX (nebo AHAH) technologie určené stránky, aniž by opustil návštěvníci budou mít možnost vidět v (X) HTML stránky redakčního obsahu.

Program

Kliknutím na nutnost upravit text, měnící se zruší tlačítkem a uložte Textarea. Chcete-li změnit část z AHAH bude odeslána na server-Side PHP skriptu pro aktualizaci databáze (MySQL nebo obyčejný papír).

Demonstrace

AJAX-stylem "click-to-změna demonstrace
V této první demonstraci, jsem použil id "editinplace" div element. Když zde v celé myąi, barvu pozadí bude světle žluté barvy. Kliknutím na text z některé z DOM bude zahájen provoz, div prvky byly nahrazeny Textarea prvky - obsaženy v původním textu.
Klepněte na tlačítko Uložit na server-Side PHP skripty pro odeslání nové HTML dokumentu, a re-export obdržela nový text (pomocí $ _POST).
V reálném světě-prostředích, měli byste také přidat zkoušení bezpečnosti před tím, než jsou schopni aktualizaci databáze a vrátí aktualizovaný obsah stránky, kolegy informoval o úspěšném provedení jQuery.

Nicméně, v tomto případě, všechny změny jsou úspěšné, odeslat informace o PHP skript vrátí neporušenou na jQuery kód označující obecné varování k oknu.

Kód

? [Kopírovat do schránky] Zobrazit kód JAVASCRIPT

  . ready ( function ( ) { $ (Dokument). Připraveno (function () ( 
	  setClickable (); 
  )); 

  Funkce setClickable () ( 
	  ) . click ( function ( ) { $ ( '# EditInPlace'). Klepněte na tlačítko (funkce () ( 
		  '<div><textarea rows="10" cols="60">'   $ ( this ) . html ( )   '</textarea>' ; Textová var = '<DIV> <textarea rows="10" cols="60">'   $ (this). html ()   '</ Textarea>'; 
		  '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>' ; var button = '<DIV> <input type="button" value="SAVE" class="saveButton" /> nebo <input type="button" value="CANCEL" class="cancelButton" /> </ div> </ Div> '; 
		   $ ( this ) . html ( ) ; var vrátit = $ (this). html (); 
		  ) . after ( textarea   button ) . remove ( ) ; $ (This). After (Textarea   tlačítka). Odebrat (); 
		  ) . click ( function ( ) { saveChanges ( this , false ) ; } ) ; $ ( '. SaveButton'). Klepněte na tlačítko (funkce () (saveChanges (to, falešné );)); 
		  ) . click ( function ( ) { saveChanges ( this ,  revert ) ; } ) ; $ ( '. CancelButton'). Klepněte na tlačítko (funkce () (saveChanges (to, vrátit se );)); 
	  )) 
	  function ( ) { . Mouseover (function () ( 
		  ) . addClass ( "editable" ) ; $ (This). AddClass ( "upravovat"); 
	  )) 
	  function ( ) { . Mouseout (function () ( 
		  ) . removeClass ( "editable" ) ; $ (This). RemoveClass ( "upravovat"); 
	  )); 
  ); 

  obj ,  cancel ) { Funkce saveChanges (obj, zrušit) ( 
	  ! cancel ) { if (! zrušit) ( 
		   $ ( obj ) . parent ( ) . siblings ( 0 ) . val ( ) ; var t = $ (obj). mateřské (). sourozenci (0). val (); 
		  "test2.php" , { $. Post ( "test2.php" ( 
  		  Obsah: t 
		  function ( txt ) { ), Funkce (txt) ( 
			   txt ) ; alert (txt); 
		  )); 
	  { ) Else ( 
		   cancel; var t = zrušit; 
	  ) 
	  t == '' )  t = '(click to add text)' ; if (t =='') t = '(klikněte pro přidání textu)'; 
	  . parent ( ) . parent ( ) . after ( '<div id="editInPlace">'   t   '</div>' ) . remove ( ) ; $ (OBJ). Nadřízené (). Nadřízené (). After ( '<div id="editInPlace">'   T   '</ div>'). Odebrat (); 
	  setClickable (); 
  )

? [Kopírovat do schránky] Zobrazit kód CSS

  subjektu ( 
	   arial ,  helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif; 
	   small; font-size: malá; 
  ) 

   textarea { . Editovatelné, Textarea ( 
	  #ffffd3 ; background-color: # ffffd3; 
  ) 

  Textarea ( 
	  95 % ; šířka: 95%; 
	  100 % ; font-size: 100%; 
  ) 

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