Cara Membuat Tabs View Dengan jQuery UI

jQuery UI singkatan dari jQuery User Interface yang merupakan sekumpulan pustaka yang dapat memudahkan dalam pembuatan antarmuka aplikasi web. Hal-hal yang sudah tersedia di jQuery UI diantaranya ada banyak tetapi disini saya akan membahas bagaimana cara membuat sebuah tabs view dengan menggunakan jQuery UI. Contoh struktur HTML dalam membuat sebuah tabs view sebagai berikut

Tabs ini merupakan fitur untuk menampilkan beberapa content dan dikelompokkan ke dalam tab-tab dimana tujuannya untuk menampilkan atau berpindah dari konten satu ke konten lainnya. Jika sudah teman teman bisa berikan fungsi tabs() seperti ini

Terdapat nilai opsinya dan teman teman pilih salah satu opsi saja.

Penjelasan code diatas : Tabs bisa juga dibuka saat kita berikan efek mouseover dengan menambahkan event : "mouseover" yang artinya jika tab itu disentuh atau didekati. Collapsible maksudnya semua konten dapat ditutup. Coba teman teman klik dua kali pada salah satu tab. Tabs juga bisa diurutkan atau dipindah-pindah dengan cara men-drag tabsnya. contohnya sebagai berikut

caranya cukup mudah coba teman teman tambahkan fungsi sortable() sebagai berikut

Oke sekian dulu untuk materi kali ini. Saya telah banyak membahas tentang bagaimana kita buat sebuah efek efek yang keren dengan bantuan jQuery UI. Semoga Bermanfaat