Horizontal Accordion Menggunakan Jquery

Salah satu contoh plugin untuk horizontal accordion adalah jquery Easy Accordion. Plugin easy accordion terdiri dari 2 file yaitu jquery.easyAccordion.min.js dan easyaccordion.css serta didukung oleh jquery.js.
Apabila kita ingin menggunakan efek slideshow pada horizontal accordion maka kita perlu menambahkan "slideinterval : 3000" maka slide akan berganti setiap 3 detik.

<!DOCTYPE html>
<html>
   <head>
 <title>jQuery Easy Accordion</title>
      <link href="easyAccordion.css" rel="stylesheet" />

   <script src="jquery.js"></script>
   <script src="jquery.easyAccordion.js"></script>
      <script type="text/javascript">
        $(document).ready(function() {
        $('#accordion-2').easyAccordion({
      autoStart: true,
  slideInterval:5000
        });
        });
      </script>
  </head>

Menampilkan data di tabel menggunakan class di jquery

Pada postingan kali ini kita akan mencoba untuk menampilkan data dalam bentuk tabel agar data tersebut lebih mudah untuk dibaca. Dalam jquery terdapat class yang dapat menseleksi mana baris yang termasuk bilangan genap ataupun ganjil.
Class tersebut yaitu :
1. :event -> mencari baris ganjil
2. :odd -> mencari baris genap

Contoh script seperti dibawah ini :

SlideToggle JQuery

Setelah kita mempelajari tentang hide show componen di jquery sekarang kita akan menggunakan efek slidetoggle. SlideToggle digunakan untuk menyembunyikan dan menampilkan suatu elemen seperti membuka dan menutup sesuatu. Efek slideToggle merupakan gabungan dari efek slideUp dan slideDown. 

Untuk contoh scripnya bisa di download disini

Setelah script tersebut di jalankan hasilnya akan seperti di bawah ini

Lalu Klik tulisan Notes yang akan menghasilkan tampilan seperti di bawah ini

Hide Show Komponen 2

Pada postingan sebelumnya kita bahas tentang menampilkan atau menghidden komponen dan pada postingan sebelumnya contoh yang digunakan yaitu gambar. Dan untuk kesempatan kali ini kita buat contoh menampilkan atau menghidden textfield dengan menggunakan event.

Contoh script bisa di download disini

Hide Show Komponen

Salah efek yang dimiliki JQuery yaitu menampilkan (show) dan menghidden gambar (hide). Efek ini bisa anda gunakan untuk memanipulasi (hide atau show) komponen baik gambar, textfield, table ataupun komponen yang lainnya. Dan untuk penggunaan event ini bisa kapan saja tergantung dari kebutuhan anda sendiri.

Untuk contoh scriptnya bisa anda download disini

Tampilan Jam Menggunakan JQuery

Setelah membaca sekilat tentang JQuery ternyata tampilan yang dihasilkannya sungguh menakjubkan. Sebagai contoh awal saya akan menampilkan jam digital maupun analog menggunakan JQuery.
Seperti halnya jam pada umumnya, tampilan jam menggunakan JQuery menampilkan waktu secara realtime dengan acuan waktu yang ada di komputer dimana aplikasi tersebut di jalankan.

Contoh Gambar Jam Digital

Contoh Gambar Jam Analog

Untuk contoh Coding jam analog bisa dilihat di bawah ini