Ericas @ EricBess WebHome

Laimi ne arogantiškas, negali prarasti alkani, yra šokas krūtinę ir veidą, pavyzdžiui, minų 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 flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flag
By N2H

JQuery efektas: "spustelėkite, norėdami pakeisti"

Tikslas

Naudojant AJAX (arba ahah) technologija, sukurta puslapį, nepaliekant lankytojai galės pamatyti, kad (x) HTML puslapį redakcinio turinio.

Programos

Spauskite ant reikia redaguoti tekstą, nekeičiant su atšaukti mygtuku ir įrašykite tekstą. Norėdami keisti dalis, ahah bus atsiųstas į serverio pusėje PHP scenarijų byla atnaujinama duomenų bazės (MySQL arba paprastame popieriuje).

Demonstravimas

AJAX-style "spustelėkite, norėdami pakeisti demonstravimas
Šioje pirmojoje demonstravimas, aš naudojama id "editinplace" div elementas. Kai pele per čia, į fono spalva bus šviesiai geltona. Spauskite ant teksto, kai kurių iš DOM bus pradėti operaciją, div elementus, buvo pakeista teksto elementų - kartu esančių pirminiame tekste.
Spustelėkite Įrašyti mygtuką prie serverio pusėje PHP norite siųsti naują HTML dokumentą, ir reeksporto gavo naują tekstą (iki $ _POST).
Realaus pasaulio terpėje, jūs taip pat turėtumėte pridėti saugos bandymus prieš pateikiant juos galima atnaujinti duomenų bazės informaciją ir grąžinti šią atnaujinamas puslapio turinį, kolegas informavo, kad norint sėkmingai įgyvendinti JQuery.

Tačiau šiuo atveju, visi pakeitimai būtų sėkmingas, siųsti duomenis į PHP scenarijų grįšiu nepaliesta į JQuery kodas, nurodantis, bendro pobūdžio įspėjimas, prie lango.

Kodas
? Žiūrėti kodą 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 ( ) { $ (Dokumentas). Parengtis (funkcija () ( 
	  setClickable (); 
  )); 

  funkcija setClickable () ( 
	  ) . click ( function ( ) { $ ( "# EditInPlace"). Paspauskite (funkcija () ( 
		  '<div><textarea rows="10" cols="60">' + $ ( this ) . html ( ) + '</textarea>' ; var textarea = '<div> <textarea rows="10" cols="60">' + $ (šią). Html () + '</ textarea>'; 
		  '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>' ; Var mygtukas = '<div> <input type="button" value="SAVE" class="saveButton" /> ARBA <input type="button" value="CANCEL" class="cancelButton" /> </ div> </ Div> '; 
		   $ ( this ) . html ( ) ; Var sugrįžti = $ (šis). Html (); 
		  ) . after ( textarea + button ) . remove ( ) ; $ (Šis). Po (Textarea + mygtuką). Šalinti (); 
		  ) . click ( function ( ) { saveChanges ( this , false ) ; } ) ; $ ( ". SaveButton"). Paspauskite (funkcija () (saveChanges (tai, melagingą );)); 
		  ) . click ( function ( ) { saveChanges ( this ,  revert ) ; } ) ; $ ( ". CancelButton"). Paspauskite (funkcija () (saveChanges (tai, sugrįžti );)); 
	  )) 
	  function ( ) { . Užvedę žymekl ant jų (funkcija () ( 
		  ) . addClass ( "editable" ) ; $ (Šis). AddClass ( "redagavimui"); 
	  )) 
	  function ( ) { . Mouseout (funkcija () ( 
		  ) . removeClass ( "editable" ) ; $ (Šis). RemoveClass ( "redagavimui"); 
	  )); 
  ); 

  obj ,  cancel ) { funkcija saveChanges (Obj, atšaukti) ( 
	  ! cancel ) { if (! atšaukti) ( 
		   $ ( obj ) . parent ( ) . siblings ( 0 ) . val ( ) ; var t = $ (objektas). tėvų (tėvus). broliai ir seserys (0). val (); 
		  "test2.php" , { $. Skelbti ( "test2.php", ( 
  		  turinys: t 
		  function ( txt ) { ), Pareigos (txt) ( 
			   txt ) ; perspėjimas (txt); 
		  )); 
	  { ) Kiti ( 
		   cancel; var t = atšaukti; 
	  ) 
	  t == '' )  t = '(click to add text)' ; jei (t, t, =='') = '(spustelėkite, jei norite įtraukti tekstą)'; 
	  . parent ( ) . parent ( ) . after ( '<div id="editInPlace">' + t + '</div>' ) . remove ( ) ; $ (Obj). Parent "(). Parent" (). Po ( "<div id="editInPlace">" + t + '</ div> "). Šalinti (); 
	  setClickable (); 
  )
? Žiūrėti kodą css 
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 

  organizme ( 
	   arial ,  helvetica , sans-serif ; font-family: Arial, Helvetica, sans-serif; 
	   small; font-size: mažas; 
  ) 

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

  Teksto ( 
	  95 % ; plotis: 95%; 
	  100 % ; font-size: 100%; 
  ) 

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

Puslapiai: 1 2

1 Star2 Stars3 Stars4 Stars5 Stars (1 balsų, vidurkis: 5 iš 5)
Loading ... Kraunasi ...
- Pasveikino reitingas pagal šį straipsnį,

Prisijunkite, susijusių su

Šiame dokumente, skaitytojai taip pat yra susirūpinęs dėl šiuo tekstu:

  • N / A

20 liepa 2008 Autorius: eric | Kodai, interneto technologijos | Trackback | Nėra komentarų | Email This Post Print This Post | 330 peržiūros

Pridėti komentarą

Leave a Reply

slėpti post comments