JqueryUI adalah plugin yang dapat membantu kalian untuk membuat sebuah fitur-fitur interaktif secara real-time. Artinya apabila melakukan sesuatu, perubahanya akan langsung terjadi pada saat itu juga tanpa mereload browser terlebih dahulu. Pada JqueryUI ini terdapat banyak fitur yang dapat kalian gunakan untuk menunjang kebutuhan website kalian. Seperti salah satu contoh fitur yang akan kita bahasa adalah Spinner.

Kali ini kita akan mencoba membuat spinner dengan JqueryUI. Spinner ini adalah suatu form text yang terdapat 2 buah tombol yang berfungsi untuk menambah dan mengurangi jumlah data. Jadi dengan adanya spinner ini, pengguna akan dimanja dengan tombol bantu pada form tersebut. Nilai yang diberikan pada spinner ini adalah data angka, tidak bisa berupa text. Lalu bagaimana kita membuatnya ?. Kalian bisa ikuti contoh code dibawah ini pada file kalian nanti.

spinner.html

Setelah kalian salin code diatas, simpan dengan nama sesuai kalian atau bisa juga spinner.html seperti contoh yang saya tuliskan diatas. Lalu kalian bisa lihat hasilnya lewat browser kalian.

Jika berhasil maka tampilanya akan seperti ini.

Kalian bisa coba gunakan tombol panah keatas untuk menambahkan nilainya. Dan tombol panah kebawah untuk mengurangi nilainya. Nilai yang ditampilkan bisa berupa bilangan negatif juga tidak ada batasnya. Kalian pun tetap bisa mengisi data pada form tersebut secara manual. Sehingga memberikan beberapa alternatif pengisian data untuk pengunjung.

Bagaimana form tersebut bisa muncul ?

Ini dikarenakan kita menginisialkan script dibawah ini dengan fitur spiner yang ada pada JqueryUI.

Input dengan ID spinner akan dipanggil oleh script ini.

Sehingga input tersebut beralih fungsi menjadi spinner sesuai ketentuan dari JqueryUI. Mudah bukan ?

Oke sekian pembahasan mengenai membuat spinner dengan JqueryUI. Semoga bermanfaat.