JQuery + css + PHP implements 360 security guard sliding switch

This article describes how to use jQuery, PHP, and MySQL to enable or disable the 360 security guard firewall. This function can be applied to the product function.

In order to better demonstrate this example, we need a data table to record the required function description and enabling 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 data entries into the pro table.

Index. php

We will display a list of related functions on the page, use PHP to read data tables, and display them in the form of a list.

<? Php
Require_once ('connect. Php'); // connect to the database
$ 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 to close" <? Php} else {?> Class = "ad_off" title = "click to enable" <? Php }?>> </Span>
<H3> <? Php echo $ row ['title'];?> </H3>
</Div>
<P> <? Php echo $ row ['description'];?> </P>
</Div>
<? Php }?>

Connect to the database and output the product function list cyclically.

CSS

In order to render a better page appearance, we use CSS to beautify the page, so that the page is more user-friendly. With CSS, we only need to use an image to identify the switch button.

. 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}

CSS code. I don't want to elaborate on it. I am prompted that we use an image and then use background-position to locate the image. This is the method used by most websites. I will not mention the benefits.

JQuery

By clicking the switch button, we promptly request the background to change the switch status of the corresponding function. This process is a typical Ajax application. By clicking the switch button, the front-end sends a post request to PHP in the background, receives the request in the background, queries the database, and returns the result to the front-end. The front-end jQuery changes the button status based on the result returned by the background.

$ (Function (){
// Hover the mouse over the color
$ (". 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 enable ");
} Else {
Alert (data );
            }  
});
});
// Enable
$ (". 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 to close ");
} Else {
Alert (data );
            }  
});
});
});

Note: in the code, the function of changing the color of the mouse to the function list is first implemented (see demo for details), and then the switch button is clicked to switch to the background action. php sends an Ajax request. The submitted parameters are the id and type of the corresponding function, which is used in the background to identify which function and type of the request (enabled and disabled ). As a matter of fact, we can see that after the Ajax request returns a successful result, the switch button dynamically changes the style to realize the function of changing the switch status.

Action. php

The background action. php receives a front-end request, executes an SQL statement based on the parameter, updates the status of the corresponding function, and returns the result to the front-end. 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 {// enabled
$ 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! ';
}

Conclusion: Through this article, you can master the application of ajax in WEB development and quickly apply it to your project. We will continue to provide more practical applications for developers and devote ourselves to the application of WEB front-end technologies.