Jquery Mouse Event dan Data

di dalam jquery terdapat berbagai macam event untuk kondisi mouse saat suatu halaman HTML di tampilkan di layar, pada praktek ini akan dijelaskan setiap kondisi mouse yang terdeteksi dengan hubungannya dengan setiap objek (misalnya button), serta dikombinasikan dengan tag data sehingga pada praktek kali ini dapat ditampilkan suatu bentuk form yang lebih menarik

Jquery Event

  • Mouse Events

    • click = kalau suatu tombol di klik diatasnya
    • dblclick = double klik
    • mouseenter = digeser mulai masuk ke arah tombol
  • buat file html baru dan beri nama prak-5.html

    • lakukan copy paste kode berikut:
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Prak 5</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="prak-5.css">
  </head>
  <body> 
    <form action="#">
      <input type="button" value="click"       id="tombol-kesatu">
      <input type="button" value="dblclick"    id="tombol-kedua">
      <input type="button" value="mouseenter"  id="tombol-ketiga" >
      <input type="button" value="mouseover + leave"   id="tombol-keempat">
      <input type="button" value="mousedown + up"   id="tombol-kelima">
    </form>
    <form action="#">
      <div class="table-responsive">
      <table class="table table-bordered">
        <thead id="judul">
          <tr>
            <th>Nama Barang</th>
            <th>Gambar</th>
            <th>Harga</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="detil">
          <tr class="baris" data-nama="Golden Retriever" data-keterangan="anjing multiguna. Di antaranya, mereka dipekerjakan sebagai anjing pelacak narkoba, anjing penyelamat (Search and Rescue), anjing pemburu, dan anjing penuntun" data-harga="2000000">
            <td><input type="text" name="nb" class="form-control namaanjing"></td>
            <td>
              <img src="images/gambar1.jpg" alt="gambar 1" class="form-control gambar">
            </td>
            <td><input type="text" name="bb" class="form-control harga"></td>
            <td>
              <input type="button" value="lihat" class="btn btn-info tombol-gambar">
              <input type="button" value="nama" class="btn btn-info tombol-nama">
              <input type="button" value="keterangan" class="btn btn-info tombol-keterangan">
              <input type="button" value="harga" class="btn btn-info tombol-harga">
            </td>       
          </tr>
          <tr class="baris" data-nama="Shiba Inu" data-keterangan="Anjing Shiba Inu menjadi anjing favorit di Jepang. Anjing yang pintar menerobos semak-semak saat berburu ini memang berasal dari Jepang yang sudah ada sejak jaman kuno." data-harga="20000000">        
            <td><input type="text" name="nb" class="form-control namaanjing"></td>
            <td>
              <img src="images/gambar2.jpg" alt="gambar 2" class="form-control gambar">
            </td>
            <td><input type="text" name="bb" class="form-control harga"></td>
            <td>
              <input type="button" value="lihat" class="btn btn-info lihat-gambar">
              <input type="button" value="nama" class="btn btn-info tombol-nama">
              <input type="button" value="keterangan" class="btn btn-info tombol-keterangan">
              <input type="button" value="harga" class="btn btn-info tombol-harga">
            </td> 
          </tr>    
          <tr class="baris" data-nama="Siberian Husky" data-keterangan="Anjing ras ini tidak ganas, bahkan terlalu baik dan manja terhadap manusia. Ras ini sekilas mirip serigala" data-harga="3500000">
            <td><input type="text" name="nb" class="form-control namaanjing"></td>
            <td>
              <img src="images/gambar3.jpg" alt="gambar 3" class="form-control gambar">
            </td>
            <td><input type="text" name="bb" class="form-control harga"></td>
            <td>
              <input type="button" value="lihat" class="btn btn-info lihat-gambar">
              <input type="button" value="nama" class="btn btn-info tombol-nama">
              <input type="button" value="keterangan" class="btn btn-info tombol-keterangan">
              <input type="button" value="harga" class="btn btn-info tombol-harga">
            </td> 
          </tr>
          <tr class="baris ">
            <td colspan="2">
              <input type="button" value="Total-all" class="btn btn-success total-semua">
            </td>
            <td><input type="text" name="tb" class="form-control" id="total-all"></td>
            <td></td> 
          </tr>
          <tr class="baris">
            <td colspan=4>
              <input type="text" name="keterangan" id="keterangan" class="form-control"></td>
            <td>
            </td> 
          </tr>        
      </table>    
    </form>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/tether.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="prak-5.js"></script>
  </body>
  </html>
  • buat file html baru dan beri nama prak-5.css
    • lakukan copy paste kode berikut:
  .gambar {
    display: none;
  }
  .namaanjing {
    display: none;
  }
  • buat file html baru dan beri nama prak-5.js
    • lakukan copy paste kode berikut:
  $(document).ready(function(){
    $("#tombol-kesatu").on('click', function() {
      $(".gambar").first().slideDown();
    });
    $("#tombol-kedua").on('dblclick', function() {
      $(".gambar").first().slideDown();
    });
    $("#tombol-ketiga").on('mouseenter', function() {
      $(".gambar").first().slideDown();
    });
    $("#tombol-keempat").on('mouseover', function() {
      $(".gambar").first().slideDown();
    });
    $("#tombol-keempat").on('mouseleave', function() {
      $(".gambar").first().slideUp();
    });    
    $("#tombol-kelima").on('mousedown', function() {
      $(".gambar").first().slideDown();
    });
    $("#tombol-kelima").on('mouseup', function() {
      $(".gambar").first().slideUp();
    });
    $(".tombol-gambar").on('click', function() {
      $(this).closest("tr").find(".gambar").slideToggle();
    });
    $(".tombol-nama").on('click', function() {
      var nama = $(this).closest(".baris").data('nama')
      $(this).closest(".baris").find(".namaanjing").val(nama);
      $(this).closest(".baris").find(".namaanjing").slideToggle();
    });
     alert("Jquery 5 ready");
  });
  • cara kerja pada html diatas
    • saat pertama kali dipanggil semua gambar disembunyikan dari file css dengan perintah display: none;
    • selanjutnya dimonitor oleh setiap event yang terdapat di program javascript
    • apabila terjadi event yang berhubungan, maka program di dalam function akan dijalankan

Tugas Siswa

  • soal 1: buat program untuk menampilkan harga setiap anjing yang dijual, apa bila di klik pada tombol harga
  • soal 2: buat program untuk menampilkan keterangan di bagian kotak dengan id keterangan, jadi bila di klik di tombol keterangan baris 1 misalnya akan menampilkan data keterangan anjing golden retriever yang data ketikannya diambil dari tag data yang ada pada baris, dan ditampilkan pada bagian kotak paling bawah yang memiliki id=keterangan
  • soal 3: buat program untuk menampilkan total harga bila di klik tombol total all