Jquery 효과 : "클릭 - - 변경"
대상
, 방문자 (x)를 HTML 페이지에 광고 문안 콘텐츠에 볼 수있을 것이다 페이지를 떠나지 않고 설계 (또는 AHAH) 기술은 AJAX를 사용합니다.
프로그램
텍스트를 수정할 필요성을 클릭, 취소 버튼으로 변경하고 텍스트를 저장합니다. the AHAH의 일부를 개정하려면 서버 - 사이드로 전송됩니다 PHP 스크립트 (MySQL의 또는 일반 용지) 데이터베이스를 업데이 트하는 파일입니다.
시위
-이 AJAX - 스타일을 클릭 - 변경 데모
이 첫 번째 데모에서는 "editinplace"DIV 요소에 대한 ID를 사용합니다. 여기에 걸쳐 때 마우스, 배경 색상을 밝은 노란색이 될 것입니다. 일부는 DOM의 텍스트를 클릭하는 div 요소는 텍스트 요소로 대체되었습니다 - 원래 텍스트 내에 포함된 작업이 시작됩니다.
서버 - 측면으로 저장 버튼을 클릭 PHP 스크립트, 그리고 다시 - 수출은 새로운 HTML 문서를 보내 새 텍스트 ($ _POST)을 받았다.
전에 데이터베이스를 업데이 트하고 업데이트된 페이지 콘텐 트를 반환할 수있다 진짜 - 세계 환경에서는 안전 테스트를 추가해야합니다, 동료 jQuery의 성공적인 구현을 통보했다.
그러나,이 경우에는, 모든 변경 사항을 성공적으로하는 PHP 스크립트로 jQuery 코드 창에 대한 일반적인 경고를 나타내는 정보를 보낼 그대로 반환됩니다.
코드
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 ( ) { $ (문서). 레디 (함수 () ( setClickable (); )); 함수 setClickable () ( ) . click ( function ( ) { $ ( '# EditInPlace'). 클릭 (함수 () ( '<div><textarea rows="10" cols="60">' $ ( this ) . html ( ) '</textarea>' ; var 텍스트 = '<div> 서비스 <textarea rows="10" cols="60">' $ (이)를. html () '</ 텍스트> "; '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton" /></div></div>' ; var 버튼 = '<div> 서비스 <input TYPE="BUTTON" value="SAVE" class="saveButton" /> 또는 <input TYPE="BUTTON" value="CANCEL" class="cancelButton" /> </ div는> </ div는> "; $ ( this ) . html ( ) ; var 되돌리려 = $ (이)를. html (); ) . after ( textarea button ) . remove ( ) ; $ (이). (텍스트 버튼). 제거 (); ) . click ( function ( ) { saveChanges ( this , false ) ; } ) ; $ ( '. SaveButton'). 클릭 (함수 () (SaveChanges (이, 거짓 );)); ) . click ( function ( ) { saveChanges ( this , revert ) ; } ) ; $ ( '. CancelButton'). 클릭 (함수 () (SaveChanges (이, );)); 되돌 )) function ( ) { . 마우스 (함수 () ( ) . addClass ( "editable" ) ; $ (이). AddClass ( "") 편집; )) function ( ) { . mouseout (함수 () ( ) . removeClass ( "editable" ) ; $ (이). RemoveClass ( "") 편집; )); ); obj , cancel ) { 함수 SaveChanges (를 obj), 취소 ( ! cancel ) { 만약 (! 취소) ( $ ( obj ) . parent ( ) . siblings ( 0 ) . val ( ) ; var 마 = $ (를 obj). 부모 (). 형제 (0). 발 (); "test2.php" , { $. 포스트 ( "test2.php", ( 내용 : 마 function ( txt ) { ), 기능 (txt)을 ( txt ) ; 경보 (txt)를; )); { ) 없다 ( cancel; var T는 취소 =; ) t == '' ) t = '(click to add text)' ; (마 =='') T는 = 만약 '(클릭)'텍스트를 추가하는; . parent ( ) . parent ( ) . after ( '<div id="editInPlace">' t '</div>' ) . remove ( ) ; $ (Obj). 부모 (). 부모 (). ( '를 <div id="editInPlace"> 후' 마 '</ div는> "). 제거 (); setClickable (); ) |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 시체 ( arial , helvetica , sans-serif ; 글꼴 - 가족 : Arial 폰트를 Helvetica, 산세 리프 - 장식; small; 글꼴 - 사이즈 : 소; ) textarea { ., 텍스트 편집 ( #ffffd3 ; 배경 - 색상 : # ffffd3; ) 텍스트 ( 95 % ; 너비 : 95 %; 100 % ; 글꼴 - 크기 : 100 %; ) Img.progress ( middle ; 수직 - 정렬할 : 중간; 0 10px ; 패딩 : 0 10px; ) |
 (1 표, 평균 : 5 5 개 중에)  로딩 ... |
로그 - 관련 | 이 신문에서는 독자는 또한 다음에 대해 우려하고있다 :
|
회신을 남겨주세요