PHP implementation of the site top function of the complete front-end code _php tips

Many Web sites support top and step functionality to show users ' satisfaction with the current page content. Below we give the site to use the top, step function of the full foreground implementation code, in order to facilitate the user reference.

The complete front-end code includes HTML, CSS, JS parts of the code. Use the following front-end code, plus a simple implementation of the background code, you can achieve a complete top step function.

Front-End HTML code:

Number of <div id= "vote" data_id= "article unique key" > <span id= "Dig" class= "vote-btn"
  ><span class= "Vote-num" > Top </span></span>
  <span id= "bury" class= "vote-btn" ><span class= "Vote-num" > Step number </span ></span>
</div>

Front-end CSS code:

#vote {/
  * margin:0 auto; */
  text-align:center;
}

. vote-btn {
  margin:0 20px;
  Display:inline-block;
  width:60px;
  height:54px;
  Cursor:pointer;
}

#dig {
  Background:url ("Http://www.jb51.net/static/image/dig.gif");
}

#bury {
  Background:url ("Http://www.jb51.net/static/image/bury.gif");

vote-num {
  display:inline-block;
  font-size:14px;
  margin-top:32px;
  Color:white;
}

Front-end JS code, here The code is based on jquery implementation:

$ ("#vote. Vote-btn"). Bind ("click", Function () {
    var me = $ (this);
    var id = me.parent (). attr ("data_id");
    var type = this.id;
    $.post ("Request Address", {' type ': type, ' ID ': id}, function (data) {
      data = $.trim (data);
      if (data = = ' success ') {   //If the vote is successful
        $num = Me.find (". Vote-num");
        $num. HTML (parseint ($num. HTML ()) + 1); Vote +1
        //Unbind Click event, and restore mouse pointer style
        $ ("#vote. Vote-btn"). Unbind ("click"). CSS ("cursor", "Auto");
        if (type = = ' bury ') {
          alert ("You voted no, please leave a message in the comments so that we can correct it!");          
        }
      else if (data = = ' Done ') {  //If you have already voted
        //Unbind the Click event and restore the mouse pointer
        style $ ("#vote. Vote-btn"). Unbind ("click"). CSS (" Cursor "," Auto ");
        Alert ("You've already voted, you can't vote again!");
      } else{   //voting failed
        alert ("The vote did not succeed because of a system or network problem, it is recommended that you vote again later!");}
    })
  ;

You can change the JS code according to the needs of the backstage.

The general implementation of the background code is: based on the cookie or database data to determine whether the user has voted, if the previous vote, then return to the done; If the voting is successful, return to success; If the vote fails, return an error or other error message.

The above mentioned is the entire content of this article, I hope you can enjoy.