Eric @ EricBess WebHome

Wint niet arrogant, niet te verliezen honger, er is shock borst en gezicht, zoals de mijne 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 inwerkingtreding: "click-to-change"

Doel

Het gebruik van een AJAX (of AHAH) technologie ontworpen pagina, zonder dat daarbij de bezoekers in staat zal zijn te zien in de (x) HTML pagina redactionele inhoud.

Programma

Klik op de noodzaak om de tekst te wijzigen, veranderen met een cancel-knop en bewaar het tekstveld. Tot wijziging van het gedeelte van de AHAH wordt verstuurd naar een server-side PHP script om de database te updaten (MySQL of gewoon papier).

Demonstratie

AJAX-stijl click-to-change demonstratie
In deze eerste demonstratie, gebruikte ik een id voor "editinplace" het div element. Wanneer de muis over hier, de achtergrondkleur zal zijn licht geel. Klik op de tekst van sommige van de DOM start operatie, div elementen zijn vervangen door een textarea elementen - in de oorspronkelijke tekst.
Klik op de Save-knop om de server-side PHP-scripts voor het verzenden van een nieuw HTML-document, en wederuitvoer kreeg een nieuwe tekst (door $ _POST).
In real-world omgevingen, moet u ook het toevoegen van een veiligheids-testen voordat zij in staat zijn om de database te updaten en geeft het bijgewerkte pagina-inhoud, collega's deelde de succesvolle implementatie van jQuery.

Maar in dit geval zijn alle veranderingen succesvol zijn, stuurt de informatie naar de PHP script intact zal terugkeren naar de opgave van jQuery code een algemene waarschuwing aan het venster.

Code
? [Kopiëren naar klembord] View Code 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). Ready (function () ( 
	  setClickable (); 
  )); 

  functie setClickable () ( 
	  ) . click ( function ( ) { $ ( '# EditInPlace'). Klik (function () ( 
		  '<div><textarea rows="10" cols="60">'   $ ( this ) . html ( )   '</textarea>' ; var textarea = '<div> <textarea rows="10" cols="60">'   $ (dit). html ()   '</ textarea>'; 
		  '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>' ; var knop = '<div> <input type="button" value="SAVE" class="saveButton" /> OF <input type="button" value="CANCEL" class="cancelButton" /> </ div> </ Div> '; 
		   $ ( this ) . html ( ) ; var terugkeren = $ (dit). html (); 
		  ) . after ( textarea   button ) . remove ( ) ; $ (Deze). After (textarea   knop). Verwijderen (); 
		  ) . click ( function ( ) { saveChanges ( this , false ) ; } ) ; $ ( '. SaveButton'). Klik (function () (saveChanges (dit, valse );)); 
		  ) . click ( function ( ) { saveChanges ( this ,  revert ) ; } ) ; $ ( '. CancelButton'). Klik (function () (saveChanges (dit ziet, );)); 
	  )) 
	  function ( ) { . Mouseover (function () ( 
		  ) . addClass ( "editable" ) ; $ (Deze). AddClass ( "bewerkbare"); 
	  )) 
	  function ( ) { . Mouseout (function () ( 
		  ) . removeClass ( "editable" ) ; $ (Deze). RemoveClass ( "bewerkbare"); 
	  )); 
  ); 

  obj ,  cancel ) { functie saveChanges (obj, annuleren) ( 
	  ! cancel ) { if (! annuleren) ( 
		   $ ( obj ) . parent ( ) . siblings ( 0 ) . val ( ) ; var t = $ (obj). moedermaatschappij (). broers en zussen (0). val (); 
		  "test2.php" , { $. Post ( "test2.php", ( 
  		  inhoud: t 
		  function ( txt ) { ), Function (txt) ( 
			   txt ) ; alert (txt); 
		  )); 
	  { ) Else ( 
		   cancel; var t = annuleren; 
	  ) 
	  t == '' )  t = '(click to add text)' ; if (t = t =='') '(klik op de tekst toevoegen)'; 
	  . parent ( ) . parent ( ) . after ( '<div id="editInPlace">'   t   '</div>' ) . remove ( ) ; $ (Obj). Parent (). Parent (). After ( '<div id="editInPlace">'   t   '</ div>'). Verwijderen (); 
	  setClickable (); 
  )
? [Kopiëren naar klembord] Bekijk de CSS-code 
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 

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

   textarea { . Bewerkbaar, textarea ( 
	  #ffffd3 ; background-color: # ffffd3; 
  ) 

  Textarea ( 
	  95 % ; breedte: 95%; 
	  100 % ; font-size: 100%; 
  ) 

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

Pagina's: 1 2

1 Star2 Stars3 Stars4 Stars5 Stars (1 stemmen, gemiddelde: 5 uit 5)
Loading ... Laden ...
- Is ingenomen met de rating voor dit artikel

Log in verband met

In deze paper wordt de lezers zich ook zorgen over het volgende:

  • N / A

20 juli, 2008 Auteur: eric | Codering, Web Technologie | Trackback? | Geen reacties | Email This Post Print This Post | 195 views

Add a Comment

Verlaat een Antwoord

Geen opmerkingen verbergen post comments