Using jQuery and PHP to achieve a similar 360 function switch effect

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201402/20140212092218.jpg? 201411292724 ">

In order to better demonstrate this example, we need a data table to record the required function description and open status. The table structure is as follows:

CREATE TABLE `pro` (  
  `id` int(11) NOT NULL auto_increment,  
  `title` varchar(50) NOT NULL,  
  `description` varchar(200) NOT NULL,  
  `status` tinyint(1) NOT NULL default '0',  
  PRIMARY KEY  (`id`)  
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

You can insert several pieces of data into the pro table.

index.php

We will display a list of related functions on the page, read the data table using PHP, and present it as a list.

<?php   
   require_once('connect.php'); //Connect to database & NBSP;  
   $query=mysql_query("select * from pro order by id asc");   
   while ($row=mysql_fetch_array($query)) {   
   ?>   
   <div class="list">   
     <div class="fun_title">   
        <span rel="<?php echo $row['id'];?>" <?php if($row['status']==1){ ?>   
class="ad_on" title=" Click on close "<?php }else{?>class="ad_off" title=" Click to open "<?php }?>></span>   
        <h3><?php echo $row['title']; ?></h3>   
     </div>   
     <p><?php echo $row['description'];?></p>   
   </div>   
 <?php } ?>

Connect to the database and loop out the list of product features.

CSS

In order to render a better page appearance, we use CSS to beautify the page and make the page more humanized. Using CSS, we only need a picture to identify the switch buttons.

< img border = 0 id = theimg onclick = window. The open this. (SRC) SRC = "/ / files.jb51.net/file_images/article/201402/20140212092309.jpg? 201411292743 ">

.list{padding:6px 4px; border-bottom:1px dotted #d3d3d3; position:relative}   
.fun_title{height:28px; line-height:28px}   
.fun_title span{width:82px; height:25px; background:url(switch.gif) no-repeat;    
cursor:pointer; position:absolute; right:6px; top:16px}   
.fun_title span.ad_on{background-position:0 -2px}   
.fun_title span.ad_off{background-position:0 -38px}   
.fun_title h3{font-size:14px; font-family:'microsoft yahei';}   
.list p{line-height:20px}   
.list p span{color:#f60}   
.cur_select{background:#ffc}

The CSS code, I don't want to go into details, but let me remind you that we use a picture, and then we use background-position to locate the picture, which is what most websites do, so I won't say anything about that.

jQuery

We click the switch button, timely request the background, change the corresponding function of the switch state. This process is a typical Ajax application. By clicking the switch button, the front end sends a post request to the background PHP, the background receives the request, queries the database, and returns the result to the front end. The front end jQuery changes the state of the button according to the result returned from the background.

$(function(){   
    //Sliding the mouse towards the color change & NBSP;  
    $(".list").hover(function(){   
        $(this).addClass("cur_select");   
    },function(){   
        $(this).removeClass("cur_select");   
    });   

    //Close    
    $(".ad_on").live("click",function(){   
        var add_on = $(this);   
        var status_id = $(this).attr("rel");   
        $.post("action.php",{status:status_id,type:1},function(data){   
            if(data==1){   
                add_on.removeClass("ad_on").addClass("ad_off").attr("title"," Click to open ");   
            }else{   
                alert(data);   
            }   
        });   
    });   
    //Open    
    $(".ad_off").live("click",function(){   
        var add_off = $(this);   
        var status_id = $(this).attr("rel");   
        $.post("action.php",{status:status_id,type:2},function(data){alert(data);     
            if(data==1){   
                add_off.removeClass("ad_off").addClass("ad_on").attr("title"," Click on close ");   
            }else{   
                alert(data);   
            }   
        });   
    });   
});

Note: in the code, we first realized the function of changing colors by mouse sliding to the function list (see the demo), and then we clicked the switch button to send an Ajax request to the background action.php. The parameters submitted are the id and type of the corresponding function, which is used to distinguish the function and the type of the request (open and close) in the background. In fact, if you're a little careful, you can see that the switch button dynamically changes its style after a successful return based on the Ajax request, enabling it to change its on-off state.

Action. PHP

The background action. PHP receives the request from the front end, executes the SQL statement according to the parameters, updates the status of the corresponding function, and returns the result to the front end after success, please see the code:

require_once('connect.php');   
$id = $_POST['status'];   
$type = $_POST['type'];   
if($type==1){ //Close    
    $sql = "update pro set status=0 where id=".$id;   
}else{ //Open    
    $sql = "update pro set status=1 where id=".$id;   
}   
$rs = mysql_query($sql);   
if($rs){   
    echo '1';   
}else{   
    echo ' The server is busy, please try again later! ';   
}