Loading Awesome Website

 

Blog 5 Plugin Form JQuery dan Javascipt Yang Wajib Dicoba

February 12, 2018by IDprogrammer0

Anda dapat menambahkan beberapa fitur yang mengagumkan ke dalam web Anda. Mulai dari ikon khusus hingga fitur validasi dimungkinkan hanya dengan beberapa plugin.

Salah satu fitur terbaru yang pernah saya lihat adalah animasi label floating. Ini terjadi saat pengguna mengeklik di dalam kolom masukan, dan placeholder (atau label, atau keduanya!)  Pengguna bisa memasukkan teks mereka tanpa dihalangi label.

Jika Anda ingin menambahkan ini ke web Anda, maka Anda telah datang ke tempat yang tepat. Saya telah mencantumkan 5 pilihan teratas untuk plugin label floating terbaik semuanya gratis, semua terbuka, dan semuanya dibuat untuk perancang web.

  • FloatingLabel.js

Pertama adalah plugin JS klasik : floatingLabel.js. Ini dibuat sekecil mungkin dengan ukuran saat ini dengan ukuran sekitar 1KB.

Ini adalah plugin kecil yang sangat bagus karena bekerja pada teks placeholder secara default. Jadi placeholder Anda akan secara otomatis dikonversi menjadi label mengambang di atas field begitu pengguna memasukkan beberapa teks.

Belum lagi Anda bisa melampirkan ini itu ke input teks atau teks, atau keduanya. Plugin berjalan hanya dengan satu fungsi panggilan, jadi sangat mudah untuk setup dan gaya defaultnya indah.

  • JQuery Floating Labels

Berikut adalah versi yang sedikit berbeda dari plugin sebelumnya namun dengan tampilan yang sangat mirip. jQuery Floating Labels menawarkan fungsionalitas yang sama yang didukung oleh jQuery dan dimaksudkan untuk bekerja sama dengan pengembang jQuery.

Catatan yang satu ini sedikit lebih besar, dan file JS / CSS berukuran sedikit lebih banyak. Belum lagi ini membutuhkan perpustakaan jQuery sebagai ketergantungan. Tapi Anda bisa mengatur ini dengan banyak pilihan kustom.

Anda dapat mengambil salinan dari GitHub jika Anda ingin mencobanya.

  • Floatlabel

Floatlabel bisa berjalan di jQuery namun tidak memiliki animasi mewah atau efek mencolok.

Sebagai gantinya, floatlabel hanyalah plugin masukan bentuk dasar untuk menangani pergeseran antara teks placeholder dan label masukan. All-in-semua itu plugin yang cukup sederhana tapi juga salah satu yang terbaik yang pernah saya temukan jika Anda hanya menginginkan solusi bersih.

Demo itu memang cukup basic. Namun jika Anda ingin tahu lebih lanjut Anda bisa menemukan semua dokumen dan rincian lebih lanjut di GitHub.

  • superLabel

superlabel! Plugin jQuery ini lahir dari ide asli label terapung yang keluar dari iOS pada awal hadirnya aplikasi smartphone.

Sayangnya superLabel tidak memiliki demo live secara online. Tapi memang ada demo di folder sumber yang sangat mudah digali. Ini memiliki file script utama dan demo beserta readme.

Lihatlah halaman GitHub dan download salinannya untuk dilihat sendiri. Hanya perlu satu menit untuk memeriksanya, dan jika Anda tidak menyukai apa yang Anda lihat ada banyak alternatif.

  • Floating Form Labels

Berikut adalah plugin yang cukup sederhana dengan nama yang cukup sederhana. Floating Form Labels adalah skrip bertenaga jQuery lainnya dan mengikuti gaya seperti banyak plugin lainnya dalam daftar ini.

Namun, ada basis kode unik dengan penyiapan yang sangat sederhana. Anda pada dasarnya hanya memanggil fungsi pada bidang masukan Anda dan membiarkannya bekerja. Tetapkan & lupakan saja.

Lihatlah contoh demo CodePen untuk melihat apa yang saya bicarakan.

Anda mungkin tidak menyukai gaya label yang sebenarnya, namun Anda dapat mengubahnya dengan cukup cepat. Manfaat yang paling signifikan untuk plugin label mengambang ini adalah kesederhanaan penyiapan dan JavaScript satu baris agar bisa berjalan.

Leave a Reply

Your email address will not be published. Required fields are marked *