Tutorial Programming

Tutorial Membuat Autogrow Textarea

Jika kita mau update status di facebook dan update statusnya panjang kan textboxnya memanjang sendiri tuh, nah, kali ini kita akan membuat efek yang sama menggunakan sebuah plugin jquery
Plugin jQuery yang akan kita gunakan adalah jQuery Autosize, plugin ini dibuat oleh Jack Moore. Untuk menggunakannya, cukup buka www.jacklmoore.com/autosize/ kemudian klik tombol download
Cara menggunakannya pun sangat mudah, berdasarkan website aslinya, anda hanya perlu menuliskan kode ini
1
2
3
$(document).ready(function(){
    $('textarea').autosize();  
});

Dan, voila, selesai deh :D
Jika anda ingin memberikan animasi CSS saat textareanya "bertumbuh", anda hanya perlu memasukkan kode CSS ini:
1
2
3
4
5
textarea {
  -webkit-transition: height 0.2s;
  -moz-transition: height 0.2s;
  transition: height 0.2s;
}
Setelah menambahkan CSS, coba ubah sedikit javascriptnya menjadi seperti ini agar animasinya bisa kelihatan
1
$('.textarea').autosize({append: "\n"});
Kode javascript diatas berfungsi untuk menambahkan baris baru saat textareanya bertumbu, sehingga ada baris kosong dibawah baris yang berisi teks yang dimasukkan
Sebenarnya plugin ini masih mempunyai beberapa "fitur", tapi yang di tutorial ini sudah lengkap untuk basicnya dan bisa langsung diterapkan di website anda
Sekian dari ane, smeoga bermanfaat

No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.