PHP implementation of Web site top-Stepping Function example

Many websites support top-and-down features to help display user satisfaction feedback about the content of the current page. This article mainly introduces the complete front-end code of PHP to implement the top-stepping function of the relevant data. We hope to help you.

Below we give the site to use the top, stepping function of the full front implementation code, in order to facilitate user reference.

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

Front-end HTML code:

<p id= "Vote" data_id= "article unique key" >  <span id= "Dig" class= "vote-btn" ><span class= "Vote-num" > Top number of times </span></span>  <span id= "bury" class= "vote-btn" ><span class= "Vote-num" > Stepping </span ></span></p>

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.php.cn/static/image/dig.gif");} #bury {  Background:url ("Http://www.php.cn/static/image/bury.gif");}. vote-num {  display:inline-block;  font-size:14px;  margin-top:32px;  Color:white;}

Front-end JS code, where the code is based on the 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 succeeds        $num = Me.find (". Vote-num");        $num. HTML (parseint ($num. HTML ()) + 1); Vote +1        //Unbind the Click event and restore the mouse pointer style        $ ("#vote. Vote-btn"). Unbind ("click"). CSS ("cursor", "Auto");        if (type = = ' bury ') {          alert ("You voted against, please leave a comment in the comments to let us know, so that we can correct it!");}      else if (data = = ' Done ') {  //If you have already voted        //unbound 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{   //Poll failed        alert ("Due to system or network issues, the poll did not succeed, it is recommended that you re-vote later!");}    );  });

You can change the JS code according to the requirements of the background.

The approximate implementation of the background code is to determine whether the user has already voted based on the cookie or database data, and if it has already been voted, returns done, or success if the voting is successful; returns error or other error message if the vote fails.

Related recommendations:

PHP uses ODBC to connect to an instance of a database

Example of PHP conversion UBB code

PHP Fun Test program Example