Sibudi </>

Tag: jQuery

  • Pengenalan AJAX Menggunakan jQuery

    AJAX (Asynchronous JavaScript and XML) adalah sebuah teknik pemrograman yang memungkinkan kita melakukan pertukaran data antara client dengan server secara asynchronous, yang artinya komunikasi terjadi di belakang layar sehingga halaman web tidak harus dimuat ulang hanya untuk mengganti sebagian dari isinya.

    Sebelum era jQuery, pemrograman AJAX sangat sulit dilakukan, karena berhubungan dengan pengaksesan DOM menggunakan JavaScript. Terimakasih kepada jQuery, sehingga pemrograman menggunakan teknik AJAX bisa menjadi lebih mudah dan cepat.

    (more…)

  • Tab Sederhana dengan jQuery

    simple tab

    Keuntungan yang didapat dengan membuat sebuah navigasi tab dengan jQuery adalah halaman tidak perlu dimuat ulang hanya untuk berganti tab yang aktif. Kenapa hal itu bisa terjadi? Karena sebenarnya semua halaman yang ada di seluruh tab sudah dimuat sejak pertama kali kita membuka web. Teknik ini yang dipakai untuk bizcard saya. Berikut ini adalah kode jQuery yang digunakan.

    $(document).ready(function() {
  $('#tab1').fadeIn('slow');
  $('ul#nav li a').click(function() {
    $('ul#nav li a').removeClass('aktif');
    $(this).addClass("aktif");
    $('.tab_konten').hide();
    var aktif = $(this).attr('href');
    $(aktif).fadeIn('slow');
    return false;
  });
});
    (more…)

  • Mengubah Element Position secara Dinamis dengan jQuery

    jQuery fixed-element behavior
    Baru-baru ini situs jejaring sosial Facebook menambah sebuah widget kecil di sebelah kanan atas pada halaman Home masing-masing user, yang berisi aktifitas terbaru dari teman-teman kita. Uniknya, ketika saya menggulir halaman ke bawah, alih-alih menghilang dari layar monitor, widget tersebut malah menempel pada menu bar biru yang menjadi ciri khas Facebook.

    Meskipun beberapa orang menganggap fitur tersebut tidak penting, tapi efek yang dihasilkannya sangat keren. Sebenarnya saya pernah menggunakan efek seperti itu pada beberapa proyek dengan bantuan jQuery. Di bawah ini adalah kode yang saya gunakan untuk menghasilkan efek tersebut.

    (more…)