Cara Membuat Form Input Interaktif Dengan Jquery Part 2

Hallo teman-teman, apa kabar semuanya. Tentu nya sehat selalu dan bahagia ya bagi lebih semangat pada belajar seputar blog, berjumpa kembali dengan saya di panduan Source Code Aplikasi. Di artikel kemarin kita telah belajar mengenai Cara Membuat Form Input Interaktif Dengan Jquery Part 1 dimana kita mempunyai sebuah form input dengan 3 tampilan yaitu Create your account, Social Profiles, Personal Details. Kali ini kita akan melanjutkan Cara Membuat Form Input Interaktif Dengan Jquery Part 2, dan kita akan memberikan manfaat Jquery nya agar form yang kita bikin lebih interaktif. Berikut ini ialah demo gambar yang akan kita berikan manfaat Jquery nya

Nah langkah berikutnya kita akan mengaktifkan button next dan previous dengan Jquery, pertama-tama unduh terlebih dahulu jquery-1.9.1.min.js dan jquery.easing.min.js atau dapat unduh di link ini bagi kita panggil dan berikan manfaat nya di html nya. Apabila telah di unduh, simpan di pada folder js kemudian di html nya kita panggil di pada tag head nya seperti gambar di bawah ini

Berikutnya kita akan implementasikan Cara Membuat Form Input Interaktif Dengan Jquery Part 2 dengan menambahkan manfaat Jquery nya, teman-teman copy script di bawah ini

<script type=text/javascript>
   //jQuery time
   var current_fs, next_fs, previous_fs; //fieldsets
   var left, opacity, scale; //fieldset properties which we will animate
   var animating; //flag to prevent quick multi-click glitches
    
   $(.next).click(function(){
    if(animating) return false;
    animating = true;
     
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
     
    //activate next step on progressbar using the index of next_fs
    $(#progressbar li).eq($(fieldset).index(next_fs)).addClass(active);
     
    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
     step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in now
      //1. scale current_fs down to 80%
      scale = 1 - (1 - now) * 0.2;
      //2. bring next_fs from the right(50%)
      left = (now * 50)+%;
      //3. increase opacity of next_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'transform': 'scale('+scale+')'});
      next_fs.css({'left': left, 'opacity': opacity});
     }, 
     duration: 800, 
     complete: function(){
      current_fs.hide();
      animating = false;
     }, 
     //this comes from the modifikasi easing plugin
     easing: 'easeInOutBack'
    });
   });
   $(.previous).click(function(){
    if(animating) return false;
    animating = true;
     
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
     
    //de-activate current step on progressbar
    $(#progressbar li).eq($(fieldset).index(current_fs)).removeClass(active);
     
    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
     step: function(now, mx) {
      //as the opacity of current_fs reduces to 0 - stored in now
      //1. scale previous_fs from 80% to 100%
      scale = 0.8 + (1 - now) * 0.2;
      //2. take current_fs to the right(50%) - from 0%
      left = ((1-now) * 50)+%;
      //3. increase opacity of previous_fs to 1 as it moves in
      opacity = 1 - now;
      current_fs.css({'left': left});
      previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
     }, 
     duration: 800, 
     complete: function(){
      current_fs.hide();
      animating = false;
     }, 
     //this comes from the modifikasi easing plugin
     easing: 'easeInOutBack'
    });
   });
    
   $(.submit).click(function(){
    return false;
   })
</script>

Dan pastekan di pada file html nya, sekiranya telah save dan refresh di browsernya. Kemudian klik tombol next hingga ke tampilan yang terakhir dan akan ada tombol submit, karenanya seluruh tombol telah berhasil di berikan manfaat Jquery nya dan form input terlihat lebih menarik. Bagi teman-teman yang kini belum ada script html dan css nya kalian dapat lihat panduan sebelumnya Cara Membuat Form Input Interaktif Dengan Jquery Part 1.

Bagus, mungkin demikianlah dulu di artikel kali ini mengenai Cara Membuat Form Input Interaktif Dengan Jquery Part 2, kita berjumpa lagi di panduan berikutnya. Semoga bermanfaat dan dapat menjadi refrensi bagi teman-teman.

Hingga Jumpa dan Terima Kasih.

 

 

Sumber https://kursuswebsite.org