10 Plugin-Tutorial Desain Facebook UI Dengan AJAX
Salah satu kelebihan yang dimiliki Facebook sebagai situs social network terbesar di dunia adalah user interface-nya yang sangat interaktif dan menarik. UI yang penuh dengan efek animasi ini pastinya didukung oleh teknologi AJAX yang memanfaatkan JavaScript.
Banyak pengembang telah membuat JavaScript tiruan yang mirip dengan antarmuka Facebook—yang memanfaatkan framework atau JavaScript library terkenal seperti jQuery dan MooTools. Berikut ini adalah daftar script-script temuan saya via Google yang bisa digunakan untuk membuat tampilan blog atau website kita semenarik Facebook ↓
1 – Facebox (jQuery)
Facebox adalah sebuah plugin untuk jQuery untuk menampilkan overlay window dalam bentuk seperti Lightbox, dengan label “close” di bagian bawah. Facebox cukup menarik digunakan untuk preview gambar, galeri, pesan error dan konfirmasi, dan sebagainya—sebagai alternatif Thickbox yang sangat populer itu.
Demo bisa dilihat di FamSpam.
2 – Facebox (MooTools)
Sama seperti plugin Facebox untuk jQuery, tetapi yang ini berbasis MooTools. Fungsinya sama, bisa menampilkan overlay window seperti pop-up yang berisi gambar, flash, dan sebagainya.
Lihat demo dan download Facebox untuk MooTools di MooLabs.
3 – Boxy
Boxy merupakan plugin jQuery untuk menampilkan kotak dialog seperti Facebook yang dapat diseret (drag). Kotak dialog ini bisa dimanfaatkan untuk form, jendela konfirmasi, jendela pertanyaan, dan sebagainya. Lihat demo di onehackoranother.com.
4 – Facebook-like Registration Form
Halaman form registrasi menggunakan AJAX seperti Facebook bisa dibuat menggunakan jQuery. Tutorialzine memberikan tutorial langkah demi langkah bagaimana membuat form seperti itu mulai dari menyusun markup form, desain CSS, PHP, dan terakhir memanfaatkan metode AJAX jQuery untuk mengirimkan data pendaftaran hanya melalui backend, jadi tidak mempengaruhi halaman registrasi yang sedang dibuka.
5 – Elastic – Textareas grow
Sesuai namanya, plugin jQuery Elastic ini berfungsi untuk membuat ukuran form textarea menjadi “elastis” (dapat meluas sesuai banyaknya teks yang ditulis). Plugin ini terinspirasi dari auto-growing textarea yang terdapat pada Facebook. Silakan dicoba di Unwrongest.
6 – Facebook Autosuggestion
Autosuggestion merupakan salah satu fitur pencarian Facebook yang sangat membantu untuk mencari profil teman berdasarkan namanya. Srinivas Tamada dari 9Lessons memberikan skrip gratis beserta tutorialnya bagaimana cara mengimplementasikan auto-suggestion ini dengan menggunakan AJAX, jQuery, dan PHP.
7 – Facebook Searchengine
Fungsinya sama dengan Facebook Autosuggestion ↑, tetapi yang ini menggunakan autocomplete library.
8 – TextboxList
Texboxlist berfungsi mengubah input teks di dalam texbox menjadi sebuah list yang bisa dihapus dengan mudah hanya dengan klik mouse.
TextboxList asli berbasis MooTools, tapi ada juga yang menggunakan Prototype buatan InteRiders. Cek demonya di Devthought untuk TextboxList MooTools dan InteRiders untuk TextboxList Prototype.
9 – Tipsy
Tipsy sebenarnya cuma tooltips biasa—sama seperti tooltips lain yang menggunakan JavaScript. Tipsy didesain mirip dengan tooltips Facebook pada photo/image tagger—walaupun tidak menutup kemungkinan menggunakan tooltips lain atau bahkan hanya mengandalkan CSS tanpa JavaScript.
10 – Facebook Bottomless Pagination
Sistem halaman Facebook sangat menarik karena setiap arsip lama tidak dibuka di halaman lain, melainkan ditambahkan di halaman yang sedang dibuka, jadi seolah-olah bisa dibuka sepanjang-panjangnya tanpa batas. David Parker menulis plugin untuk membuat pagination system seperti itu.
Selamat mencoba! 
Related Posts ↓
Blog ini cuma blog komersil yang dipakai oleh fanari buat nyari duit. Siapa fanari?? Calon "pengangguran" yang (mencoba) sukses dalam bisnis online :). 
{21 Comments so far ↓}