Membuat Tombol dengan Progres Button

Progress bar telah menjadi sangat populer akhir-akhir ini, dan ada banyak plugin yang dapat membantu Anda menambahkannya ke situs Anda. Tapi bagaimana jika membuat sendiri? Masalahnya adalah bahwa ada banyak penerapannya sudah ada, jadi dalam tutorial ini, kita akan membuat kode dengan sesuatu yang berbeda yaitu tombol yang telah dibangun dalam progres meter.

Tombol tersebut akan menampilkan progres saat mengirimkan formulir atau memuat konten melalui AJAX. Tombol tersebut juga akan menggunakan gaya CSS3 dan transisi untuk membuat mudah untuk menyesuaikannya.

HTML

Pada bagian pertama dari tutorial ini, kita akan menulis markup HTML. Muncul dalam bentuk dokumen standar HTML5 yang mencakup dua sumber daya tambahan yang akan kita bahas nanti – stylesheet styles.css dan file JavaScript  script.js. Selain itu, kita masukkan library jQuery, dan font Raleway dari font web Google.

index.html

<html>
  <head>
    <title>Tutorial membuat tombol progress meter</title>
    <link href="http://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Progress Buttons</h1>
    <a id="submitButton" href="#" class="progress-button">Submit</a>
    <a id="actionButton" href="#" class="progress-button green" data-loading="Working.." data-finished="Finished!" data-type="background-bar">Action!</a>
    <a id="generateButton" href="#" class="progress-button red" data-loading="Generating.." data-finished="Download" data-type="background-vertical">Generate</a>
    <h1>Progress Control</h1>
    <a id="controlButton" href="#" class="progress-button">Start</a>
    <div class="control-area">
      <a class="command increment">Increment</a>
      <a class="command set-to-1">Set to 1%</a>
      <a class="command set-to-50">Set to 50%</a>
      <a class="command finish">Finish</a>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="/js/script.js"></script>
  </body>
</html>

Markup ini cukup sederhana. Tombol proses didefinisikan sebagai hyperlink biasa. Agar dapat dikenali oleh plugin dan berubah menjadi tombol dengan built-in progress bar, tombol tersebut harus memiliki kelas .progress-button. Tombol juga dapat dikonfigurasi dengan menetapkan tiga atribut data- *:

  • data-type menentukan jenis progress bar yang akan ditampilkan. Saat ini ada tiga jenis yang didukung : background-horizontal (the default), background-bar dan background-vertical.
  • data-loading menentukan teks yang ditampilkan sementara progress bar bergerak. Nilai defaultnya yaitu Loading..
  • data-finished menentukan teks yang diatur pada tombol ketika progress telah dilakukan. Nilai defaultnya Done!

buttons_progress_meters

Jika kita menghilangkan atributnyamaka yang digunakan adalah nilai default dari masing-masing atributnya.

JQuery

Dalam hal ini bagian dari tutorial, kita akan menulis kode JavaScript dan jQuery untuk membuat tombol tersebut berfungsi. Kode ini disusun sebagai 6 plugin jQuery yang terbagi dengan nama yang umum – progressInitialize, progressStart, progressIncrement, progressTimed, progressSet dan progressFinish.

js/script.js

$(document).ready(function(){
  $('.progress-button').progressInitialize();
  $('#submitButton').click(function(e){
    e.preventDefault();
    $(this).progressTimed(2);
  });
  $('#actionButton').click(function(e){
    e.preventDefault();
    $(this).progressTimed(2);
  });
  $('#generateButton').one('click', function(e){
    e.preventDefault();
    var button = $(this);
    button.progressTimed(3, function(){
      button.click(function(){
        alert('Showing how a callback works!');
      });
    });
  });
  var controlButton = $('#controlButton');
  controlButton.click(function(e){
    e.preventDefault();

    controlButton.progressStart();
  });
  $('.command.increment').click(function(){
    controlButton.progressIncrement();
  });
  $('.command.set-to-1').click(function(){
    controlButton.progressSet(1);
  });
  $('.command.set-to-50').click(function(){
    controlButton.progressSet(50);
  });
  $('.command.finish').click(function(){
    controlButton.progressFinish();
  });
});
(function($){

  
  $.fn.progressInitialize = function(){
    return this.each(function(){
      var button = $(this),
        progress = 0;
      var options = $.extend({
        type:'background-horizontal',
        loading: 'Loading..',
        finished: 'Done!'
      }, button.data());
      button.attr({'data-loading': options.loading, 'data-finished': options.finished});
      var bar = $('<span class="tz-bar ' + options.type + '">').appendTo(button);
      button.on('progress', function(e, val, absolute, finish){
        if(!button.hasClass('in-progress')){
          bar.show();
          progress = 0;
          button.removeClass('finished').addClass('in-progress')
        }
        if(absolute){
          progress = val;
        }
        else{
          progress += val;
        }
        if(progress >= 100){
          progress = 100;
        }
        if(finish){
          button.removeClass('in-progress').addClass('finished');
          bar.delay(500).fadeOut(function(){
            button.trigger('progress-finish');
            setProgress(0);
          });
        }
        setProgress(progress);
      });
      function setProgress(percentage){
        bar.filter('.background-horizontal,.background-bar').width(percentage+'%');
        bar.filter('.background-vertical').height(percentage+'%');
      }
    });
  };
  $.fn.progressStart = function(){
    var button = this.first(),
      last_progress = new Date().getTime();
    if(button.hasClass('in-progress')){
      return this;
    }
    button.on('progress', function(){
      last_progress = new Date().getTime();
    });
    var interval = window.setInterval(function(){

      if( new Date().getTime() > 2000+last_progress){
        button.progressIncrement(5);
      }
    }, 500);
    button.on('progress-finish',function(){
      window.clearInterval(interval);
    });
    return button.progressIncrement(10);
  };
  $.fn.progressFinish = function(){
    return this.first().progressSet(100);
  };
  $.fn.progressIncrement = function(val){
    val = val || 10;
    var button = this.first();
    button.trigger('progress',[val])
    return this;
  };
  $.fn.progressSet = function(val){
    val = val || 10;
    var finish = false;
    if(val >= 100){
      finish = true;
    }
    return this.first().trigger('progress',[val, true, finish]);
  };
  $.fn.progressTimed = function(seconds, cb){
    var button = this.first(),
      bar = button.find('.tz-bar');
    if(button.is('.in-progress')){
      return this;
    }
    bar.css('transition', seconds+'s linear');
    button.progressSet(99);
    window.setTimeout(function(){
      bar.css('transition','');
      button.progressFinish();
      if($.isFunction(cb)){
        cb();
      }
    }, seconds*1000);
  };
})(jQuery);

progressInitialize menyiapkan untuk event progress kustom bahwa fungsi lain menyebut kapan meter perlu diperbarui. Berkat event khusus, kita dapat memiliki fungsi yang sama sekali independen seperti progressStart, yang mengelola waktu dan merumuskannya – progresInitialize  tidak perlu mengetahui progressStart.

Hal penting lainnya adalah bahwa kita sedang mengatur dua kelas khusus pada tombol   – .in-progress sedangkan progres bergerak dan .finished ketika sudah siap. Kelas tersebut digunakan untuk memperbarui teks tombol seperti yang akan terlihat di bagian berikutnya.

CSS

Kami menyebutkan bahwa kami setting dua kelas CSS pada tombol – .in-progress dan .finished. Tapi bagaimana menambahkan satu kelas ini untuk mengubah teks tombol? Sederhana  kita menggunakan trik CSS yang melibatkan CSS3 operator attr , yang bila dikombinasikan dengan content, dapat mengatur teks dari :before atau :after elemen pseudo  dengan atribut dari elemen. Ini akan menjadi lebih jelas setelah Anda melihatnya sendiri (baris 33-38):

css/style.css

.progress-button{
  display: inline-block;
  font-size:24px;
  color:#fff !important;
  text-decoration: none !important;
  padding:14px 60px;
  line-height:1;
  overflow: hidden;
  position:relative;
  box-shadow:0 1px 1px #ccc;
  border-radius:2px;
  background-color: #51b7e6;
  background-image:-webkit-linear-gradient(top, #51b7e6, #4dafdd);
  background-image:-moz-linear-gradient(top, #51b7e6, #4dafdd);
  background-image:linear-gradient(top, #51b7e6, #4dafdd);
}
.progress-button.in-progress,
.progress-button.finished{
  color:transparent !important;
}
.progress-button.in-progress:after,
.progress-button.finished:after{
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  padding-top: inherit;
  color: #fff !important;
  left: 0;
}
.progress-button.in-progress:after{
  content:attr(data-loading);
}
.progress-button.finished:after{
  content:attr(data-finished);
}
.progress-button .tz-bar{
  background-color:#e667c0;
  height:3px;
  bottom:0;
  left:0;
  width:0;
  position:absolute;
  z-index:1;
  border-radius:0 0 2px 2px;
  -webkit-transition: width 0.5s, height 0.5s;
  -moz-transition: width 0.5s, height 0.5s;
  transition: width 0.5s, height 0.5s;
}
.progress-button .tz-bar.background-horizontal{
  height:100%;
  border-radius:2px;
}
.progress-button .tz-bar.background-vertical{
  height:0;
  top:0;
  width:100%;
  border-radius:2px;
}

Sisa dari kode style tombol dan built-in progress meter. Dalam styles.css kami juga menyertakan dua tema tambahan warna dan beberapa aturan lain yang tidak diberikan di sini, tapi Anda dapat mengembangkan sendiri dengan cara yang sama.

Comments

comments