Youtube like rating script jquery php

    Rating: ★★★★☆
    View: 220
    Download: 178
    Từ khóa:

     

     Lets start with html, and dont forget to enable quirks mode, which will trigger strict mode in almost all browsers. This script now only supports firefox and google chrome. In all IE version its not working, I am not sure but i thing its PNG issue, there are few solution for fixing PNG issue, I dont want to waste time on it. I didnt tried to make it work in IE, I have left that on you 

    I didnt implemented ip / user based rating so one user can either like it or dislike it. Here you can click like or dislike any number of times. You can make it so with few if else statements.

    HTML MARKUP

    
    
    
     
       Youtube Thumbs Up Script 
      
      
      
      
     
     
        

    CSS MARKUP

    .container{
        margin: 10% 30%;;
        padding:2px;
        font-family: verdana;
        font-size: 12px;
    }
    #button-container-like{
        background: -moz-linear-gradient(bottom, #dadada, #fff);
        background: -webkit-gradient(linear, center bottom, center top, from(#dadada), to(#fff));      
        border: 1px solid #CCCCCC;
        border-radius: 3px 0px 0px 3px;
        color: #000000;
        cursor: pointer;
        height:2.4em;
        width : 70px;
        font-family: verdana;
        font-size: 12px;
        line-height: 2em;
        float:left;
    }
    #button-container-unlike{
        background: -moz-linear-gradient(bottom, #dadada, #fff);
        background: -webkit-gradient(linear, center bottom, center top, from(#dadada), to(#fff));      
        border: 1px solid #CCCCCC;
        border-left: none;
        border-radius: 0px 3px 3px 0px;
        color: #000000;
        cursor: pointer;
        height: 2.4em;
        width : 35px;
        font-family: verdana;
        font-size: 12px;
        line-height: 2em;
        float:left;
    }
    .thumbs-up{
        background : url("images/icons.png") no-repeat scroll 2px -255px transparent;
        position: relative;
        height: 20px;
        display:block;
        width: 20px;
        clear: right;
        float: left;
    }
    .thumbs-down{
        background : url("images/icons.png") no-repeat scroll -63px -50px transparent;
        position: relative;
        height: 20px;
        display:block;
        width: 20px;
        clear: right;
        float: left;
        margin-right: 4px;
    }
    .tup-hover{
        background : url("images/icons.png") no-repeat scroll -37px -138px transparent;
    }
    .tdown-hover{
        background : url("images/icons.png") no-repeat scroll -36px -255px transparent;
    }
    .stats{
        border-radius: 5px;
        border : 1px solid #838383;
        display: block;
        clear:left;
        margin-top: 30px;
        display: none;
        height: auto;
        padding: 5px;
        width: 500px;
    }
    .stat-details .close{
        background : url("images/icons.png") no-repeat scroll 0px -132px transparent;
        float: right;
        height: 17px;
        width: 17px;
        margin:0px;
        padding:0px;
    }
    .stat-details table{
        font-size: 12px;
    }
    #small{
        font-size: 10px;
        color : #949494;
    }
    .bar{
        height:10px;
        display:inline-block;
    }
    .green{
        background: #64F141;
        border: 1px solid #148507;
    }
    .red{
        background: #FF4F4F;
        border: 1px solid #D50202;
    }
    .stat-option{
        display:block;
        line-height:20px;
        margin-top:5px;
        padding-top:3px;
    }
    .close{
        cursor: pointer;
    }
    

    JAVA SCRIPT MARKUP:

    $("button").hover(
        function(){
            if($(this).val() == "1")  
                $(this).find(".thumbs-up").addClass("tup-hover");
            else
                $(this).find(".thumbs-down").addClass("tdown-hover");
        },
        function(){
            if($(this).val() == "1") {
                $(this).find(".thumbs-up").removeClass("tup-hover");
                $(this).find(".thumbs-up").addClass("thumbs-up");
            }else{
                $(this).find(".thumbs-down").removeClass("tdown-hover");
                $(this).find(".thumbs-down").addClass("thumbs-down");
            }  
        }
    );
     
    $(".close").live("click",function(){
        $(".stats").slideUp("fast");
    });
     
    $(".option").click(function(){
         var option = $(this).val();
         var item   = $("#item").val();
          
         $(".stats").slideDown("fast").html("Loading....");
         $.ajax({
           type: "POST",
           url: "ajax_server.php",
           data: "option="+option+"&item="+item,
           success: function(responce){
                var json = jQuery.parseJSON(responce);
                var total = parseInt(json.likes) + parseInt(json.dislikes);
                 
                option = (option == "1") ? "Liked" : "Disliked" ;
                var likes    = (parseInt(json.likes) * 100 ) / total;
                var dislikes = (parseInt(json.dislikes) * 100 ) / total;
     
                $(".stats").html('
    You '+option+' this item. Thanks for the feedback !

    Rating for this item ('+total+' total)
    '+json.likes+'
    '+json.dislikes+'
    '); } }); });

    PHP MARKUP

    1. ajax_server.php to store and fetch record

    
    

    Simple database table structure

    CREATE TABLE IF NOT EXISTS `likes` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `item-id` int(11) NOT NULL,
      `likes` int(11) NOT NULL,
      `dislikes` int(11) NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
    

     

    loading Đang tải...

    template được ưa chuộng