Cara Membuat Form Input Rating dengan JQuery

Hallo sobat program, bertemu lagi dengan saya Rizal dan masih tetap di laman Source Code Aplikasi ini yang betul-betul kita cintai. Di kesempatan kali ini saya akan memberikan sebuah tips mengenai Cara Merancang Form Input Rating dengan JQuery.

Sesungguhnya pada merancang rating kita pun dapat hanya menggunakan CSS saja namun nantinya akan banyak property-property css. dan bagi meminimalisir itu segala karenanya disini kita merancang ratingnya dengan menggunakan JQuery, yang nantinya akan lebih singkat dan gampang bagi dimengerti.

Oke sebelum kita mulai langkah pertama-tama teman-teman terlebih dahulu ketik kode pluging rating.js nya seperti di contoh dibawah ini :

(function($){

     
    $.fn.rating = function(options) {
        var self = this;
      
var settings = $.extend({
// These are the defaults.
color: #556b2f,
max_stars : 5 ,
clearSelected : function()
{
           $('.plugin-rating i').each(function(){
        $(this).addClass('fa-star-o').removeClass('fa-star');
        });
},
setRating : function()
     {
            if(self.val())
            {
                var position = parseInt(self.val())-1;
                //alert(position);
            for(var i=0;i<=position;i++)
        {
        $(`.plugin-rating i:eq(${i})`).addClass('fa-star').removeClass('fa-star-o');
        }
        }   
     }

}, options );



     var ratingHtml =`<div class=plugin-rating rating>
   <i class=fa fa-star-o aria-hidden=true></i>
   <i class=fa fa-star-o aria-hidden=true></i>
<i class=fa fa-star-o aria-hidden=true></i>
<i class=fa fa-star-o aria-hidden=true></i>
<i class=fa fa-star-o aria-hidden=true></i>

</div>`;
        
        

        self.filter('input').each(function(){
            $(self).after(ratingHtml);
            $(self).hide();
        });
        
        settings.setRating(); 

        $(document).on('click','.plugin-rating i',function(){
        var position = $(.plugin-rating i).index(this);
        //set rating       
                  
        self.val(position+1); 
        settings.setRating();    
        
        });

        $(document).on('mouseenter','.plugin-rating i',function(){
        var position = $(.plugin-rating i).index(this);
        //first clear all selected stars
        settings.clearSelected();


        for(var i=0;i<=position;i++)
        {
        $(`.plugin-rating i:eq(${i})`).addClass('fa-star').removeClass('fa-star-o');
        }        
        
        });

        $(document).on('mouseout','.plugin-rating i',function(){
        settings.clearSelected();
        settings.setRating();
        });
        //this.append('asdf');
        return self;
    };
}(jQuery));

(function( $ ) {
 
    $.fn.showLinkLocation = function() {
 
        this.filter( a ).each(function() {
            var link = $( this );
            link.append(  ( + link.attr( href ) + ) );
        });
 
        return this;
 
    };
 
}( jQuery ));

Seandainya telah simpan, lalu langkah berikutnya teman-teman tambahkan library jquery, bootstrap, dan fontawesome nya seperti di contoh dibawah ini :

Seandainya telah dengan library nya, langkah berikutnya teman-teman ketik HTML nya seperti di contoh dibawah ini :

Lalu tambahkan kode JQuery bagi menjalankan pluging rating.js nya, contohnya seperti dibawah ini :

Seandainya telah segala kode diatas, hal yang mesti diperhatikan disini saya menggunakan library bootstrap serta fontawesomenya online jadi teman-teman mesti terkoneksi dengan internet. Oke kalau telah silahkan coba seketika saja dijalankan dibrowser yang teman-teman gunakan. Seandainya benar karenanya hasilnya akan menjadi seperti di contoh dibawah ini :

Kurang lebihnya seperti seperti itulah contoh Cara Merancang Form Input Rating dengan JQuery. betul-betul gampang ya teman-teman kita hanya tinggal mengunduh plugin JQuerynya saja lalu gunakan manfaat rating di jquery.

Jadi seperti inilah contoh sederhana pembahasan kita kali ini mengenai Cara Merancang Form Input Rating dengan JQuery semoga dapat betul-betul bermanfaat bikin teman-teman dan hingga bertemu dipembahasan berikutnya.

Terimakasih

Sumber : www.jqueryscript.net

Sumber https://kursuswebsite.org