Dialog Konfirmasi dengan jQuery

Repost dari artikel saya di PC Mild 01/2011

jQuery sangat memudahkan proses pembuatan tampilan website yang interaktif. Berkat kemampuannya yang telah dikemas secara kompak, programmer web bisa memanfaatkannya tanpa harus mengerti bagaimana proses yang terjadi.

Salah satu contoh penggunaannya adalah membuat dialog konfirmasi dalam halaman web. Walaupun sebenarnya cukup dengan menggunakan fungsi prompt() pada javacript, namun tampilannya kurang menarik dan bergantung dari browser yang dipakai. Dalam artikel ini akan dijelaskan trik membuat dialog konfirmasi dengan jQuery.

Sebelum melanjutkan, alangkah baiknya apa yang Anda buat nantinya bisa dikonfigurasi sefleksibel mungkin dan dapat dipakai kembali. Karena itu pembuatan dialog ini juga secara tidak langsung akan membuat suatu library baru yang bisa digunakan dalam kasus lainnya.

  1. Langkah pertama, buatlah struktur file seperti berikut ini. Tujuan pemisahan file menjadi beberapa bagian adalah seperti penjelasan sebelumnya, yaitu agar nantinya bisa dengan mudah digunakan kembali.

    Struktur folder kerja

  2. Setelah itu, persiapkan halaman percobaan untuk dialog konfirmasi ini pada file index.php. Pastikan semua file script dan css yang diperlukan sudah dideklarasikan dalam file. Pastikan juga bahwa Anda telah meletakkan file library jQuery dalam kerangka kerja. Contoh tampilan paling mudah adalah membuat beberapa item untuk percobaan, dengan tombol delete yang nantinya akan memunculkan konfirmasi. Jangan lupa untuk menentukan class apa yang dipakai untuk pemanggil dialog konfirmasi tersebut.
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Demo Dialog Konfirmasi jQuery</title>
        <!-- untuk style -->
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" type="text/css" href="confirm/confirm.css" />
      </head>
      <body>
        <!-- halaman website -->
        <div id="page">
          <div class="item">
            <a href="http://mimicreative.net">
              <img src="images/mimi.png" alt="Mimi Creative" /></a>
            <div class="delete">Delete</div>
          </div>
          <!-- divs lainnya -->
        </div>
        <!-- jQuery dan javascript buatan sendiri -->
        <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="confirm/confirm.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>
    
      </body>
    </html>
    
  3. Siapkan css untuk halaman tersebut dalam file style.css. Sederhana saja seperti pada source code di CD, namun Anda nantinya dapat mengembangkan dengan cara Anda sendiri jika sudah berhasil.

    Tampilan contoh web

  4. Berikutnya adalah menyiapkan struktur untuk dialog konfirmasi. Bagian terpenting dari dialog tersebut adalah mask atau elemen yang berfungsi untuk menutup seluruh halaman website yang akan mencegah event selain pada dialog konfirmasi. Setelah itu, di dalamnya baru diletakkan struktur kotak dialog, seperti pada contoh berikut.
    <div id="confirmMask">
      <div id="confirmBox">
        <h1>Judul konfirmasi</h1>
        <p>Isi konfirmasi yang akan ditampilkan</p>
        <div id="confirmButtons">
          <a class="button green" href="#">Yes<span></span></a>
          <a class="button gray" href="#">No<span></span></a>
        </div>
      </div>
    </div>
    
  5. Struktur tersebut hanya menjadi pedoman saja, tidak akan dipakai mentah-mentah. Berikutnya adalah menyiapkan style css untuk dialog tersebut. Idenya adalah dialog harus selalu berada di tengah layar dan tidak akan berpindah meskipun halaman di-scroll ke bawah. Beberapa trik positioning css menjadi kunci, yaitu position fixed dan sedikit bantuan javascript untuk menghitung titik posisinya nanti. Untuk memperindah tampilan font, dibuat pula font-face baru yang merupakan fasilitas CSS3. Pembuatan button juga dengan sedikit trik memakai button sprite. Buatlah style tersebut dalam file confirm.css.
    /* membuat font face sendiri */
    @font-face {
      font-family: 'Cuprum';
      font-style: normal;
      font-weight: normal;
      src: local('Cuprum'), url('Cuprum.ttf') format('truetype');
    }
    
    #confirmMask{ width:100%; height:100%; position:fixed; top:0; left:0; }
    
      #confirmBox{ background:url('body_bg.jpg') repeat-x left bottom #e5e5e5; }
    
      /* CSS lainnya (ada pada CD) */
    
  6. Langkah selanjutnya adalah membuat plugin jQuery untuk dialog konfirmasi tersebut. Plugin harus dibuat sedemikian rupa agar fleksibel dengan konfigurasi, konten, dan action yang bisa diubah bergantung pemanggilnya. Perhatikan pula bahwa pembuatan struktur dialog dan peletakan posisi dilakukan pada file ini. Buat kodenya dalam file confirm.js.
    (function($){
      $.confirm = function(params){
    
        if($('#confirmMask').length){
          // jika sudah ada dialog konfirmasi yang tampil
          return false;
        }
    
        var buttonHTML = '';
        $.each(params.buttons,function(name,obj){
          // membuat struktur html untuk tombol
          buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';
          // jika action tidak didefinisikan
          if(!obj.action){
            obj.action = function(){};
          }
        });
        // membuat struktur dialog markup
        var markup = [
        '<div id="confirmMask">',
        '<div id="confirmBox">',
        '<h1>',params.title,'</h1>',
        '<p>',params.message,'</p>',
        '<div id="confirmButtons">',
        buttonHTML,
        '</div></div></div>'
        ].join('');
        // menyematkan dialog pada body
        $(markup).hide().appendTo('body').fadeIn();
        // meletakkan di tengah
        var top = ($(window).height() - $("#confirmBox").height())/2;
        var left = ($(window).width() - $("#confirmBox").width())/2;
        $("#confirmBox").css("top", top + "px").css("left", left + "px");
        // untuk perubahan ukuran jendela
        $(window).resize(function() {
          var top = ($(window).height() - $("#confirmBox").height())/2;
          var left = ($(window).width() - $("#confirmBox").width())/2;
          $("#confirmBox").css("top", top + "px").css("left", left + "px");
        });
        // memberikan event ke button
        var buttons = $('#confirmBox .button'), i = 0;
        $.each(params.buttons,function(name,obj){
          buttons.eq(i++).click(function(){
            // memanggil action dari object
            obj.action();
            $.confirm.hide();
            return false;
          });
        });
      }
      // fungsi untuk menghilangkan dialog
      $.confirm.hide = function(){
        $('#confirmMask').fadeOut(function(){
          $(this).remove();
        });
      }
    })(jQuery);
    
  7. Seluruh komponen library buatan sendiri telah selesai. Berikutnya adalah membuat javascript untuk memanggil fungsi dialog konfirmasi tersebut. Dalam contoh ini, class delete akan menjadi trigger untuk memunculkan dialog konfirmasi, yang nantinya jika ditekan tombol Yes, akan menghapus item yang ada di atasnya. Buat kode ini dalam file script.js.
    $(document).ready(function(){
      // memberikan event klik
      $('.item .delete').click(function(){
    
        var elem = $(this).closest('.item');
    
        $.confirm({ // beserta parameter
          'title'   : 'Konfirmasi Hapus',
          'message'	: 'Apakah Anda yakin akan menghapus elemen ini?',
          'buttons'	: {
            'Yes'	: {
              'class'	: 'green',
              'action': function(){
                elem.slideUp();
              }
            },
            'No'	: {
              'class'	: 'gray',
              'action': function(){}
            }
          }
        });
      });
    });
    
  8. Selesai sudah proses pembuatan library dialog konfirmasi. Dengan source code reusable ini, Anda bisa memakainya dalam berbagai program lain dengan sangat mudah. Jalankan contoh program tersebut, cek apakah telah berjalan dengan baik.

    Hasil pembuatan dialog konfirmasi

Selamat mencoba.

Download source code keseluruhan.Artikel ini telah dipublikasikan di media cetak tabloid PC Mild edisi 01 tahun 2011 lalu. Sumber: TutorialZine.com

3 Comments

Leave a Comment.