Eric @ EricBess WebHome

Jquery efek: "klik-untuk-perubahan"

Target

Menggunakan AJAX (atau TERIMA KASIH) teknologi yang dirancang halaman, tanpa meninggalkan pengunjung akan dapat melihat ke dalam (x) HTML halaman editorial konten.

Program

Klik pada perlu mengedit teks, mengganti dengan tombol yang membatalkan dan menyimpan textarea. Perubahan bagian dari TERIMA KASIH akan dikirim ke server-file script PHP samping untuk memperbarui database (MySQL atau kertas biasa).

Demonstrasi

AJAX-gaya-klik untuk mengubah-demonstrasi
Dalam demonstrasi pertama ini, saya yang digunakan untuk id "editinplace" yang elemen span. Ketika mouse di sini, latar belakang akan cahaya warna kuning. Klik pada teks beberapa dari DOM akan memulai operasi, span unsur telah digantikan oleh elemen textarea - yang terdapat dalam teks asli.
Klik tombol Simpan untuk server-side script PHP untuk mengirim dokumen HTML baru, dan re-ekspor baru menerima teks (oleh $ _POST).
Dalam dunia nyata-lingkungan, Anda juga harus menambahkan pengujian keselamatan sebelum mereka dapat memperbarui database dan kembalikan diperbarui halaman konten, kolega informasi keberhasilan pelaksanaan jQuery.

Namun, dalam hal ini, semua perubahan yang berhasil, mengirim informasi ke PHP script akan kembali utuh ke jQuery kode menunjukkan umum peringatan ke jendela.

Kode

  $ (Dokumen). Siap (fungsi () ( 
	  setClickable (); 
  )); 

  fungsi setClickable () ( 
	  $ ( '# EditInPlace'). Mengklik (fungsi () ( 
		  var textarea = ' 
 <span  > '+ $ (Ini). Html () +'</span>  '; 
		  var tombol = ' 

  ATAU 



 '; 
		  var kembali = $ (ini). html (); 
		  $ (Ini). Setelah (textarea + tombol). Hapus (); 
		  $ ( '. SaveButton'). Mengklik (fungsi () (saveChanges (ini, palsu );}); 
		  $ ( '. CancelButton'). Mengklik (fungsi () (saveChanges (ini, kembali );}); 
	  )) 
	  . Gunaka mouse di atas (fungsi () ( 
		  $ (Ini). AddClass ( "diedit"); 
	  )) 
	  . Mouseout (fungsi () ( 
		  $ (Ini). RemoveClass ( "diedit"); 
	  )); 
  ); 

  fungsi saveChanges (obj, membatalkan) ( 
	  jika (! membatalkan) ( 
		  var t = $ (obj). induk (). saudara (0). Val (); 
		  $. Pos ( "test2.php", ( 
  		  konten: t 
		  ), Fungsi (txt) ( 
			  tanda (txt); 
		  )); 
	  ) Lain ( 
		  var t = membatalkan; 
	  ) 
	  jika (=='') t t = '(klik untuk menambahkan teks)'; 
	  $ (Obj). Induk (). Induk (). Setelah ( ' 
  'T + +' 

  '). Hapus (); 
	  setClickable (); 
  ) 

  tubuh ( 
	  tetap semangat, helvetica, tanpa-serif; 
	  font-size: kecil; 
  ) 

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

  textarea ( 
	  lebar: 95%; 
	  font-size: 100%; 
  ) 

  img.progress ( 
	  vertical-align: tengah; 
	  padding: 0 10px; 
  ) 

Halaman: 1 2

(1 suara, rata-rata: 5 dari 5) Loading ... - Disambut dengan rating untuk artikel ini

• Halaman disponsori oleh
• Sekarang menjadi sponsor
• Pertolongan

Tidak ada sumbangan dalam 180 terakhir days.Who membuat sumbangan akan meninggalkan pesan di sini. Donasi Sekarang.

SponsorName atau TextAds:
URL Anda: (misalnya, http://www.ericbess.com/)
Jumlah ($): 3 $ + sumbangan akan di daftar Sponsor Tab. Lagi sumbangan, Lebih besar Link!
Jika Anda memiliki account paypal yang tidak jadi far.Please mendaftar account paypal: [PayPal Registrasi] pertama.

Ini sebuah plugin wordpress Wp-Donatur. Laporan ini memberikan sumbangan fungsi pintar untuk autoleave sponsor informasi ini dalam kontainer setelah pembayaran. Orang dapat mendonasikan mengirimkan nama dan / atau URL TextLink AD. Informasi terkini dari para pendonor ditampilkan dalam awan. The Banyak orang menyumbangkan, yang lebih besar mereka akan be.It link 's akan mendukung antarmuka pembayaran paling populer di masa mendatang. ParPal Baru yang pertama. Lagi ..

Powered By: WP-Donatur

20 Juli 2008 Pengarang: eric | Coding, Teknologi Web | Trackback? | Tidak ada komentar | | 324 dilihat