Using jQuery and PHP to implement a function switch effect _ jquery-js tutorial

This article describes how to use jQuery, PHP, and MySQL to enable and disable the Security Guard firewall. This function can be applied to the product function enabling and disabling, for more information, see

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:

The Code 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.

The Code is as follows:

Class = "ad_on" title = "click to close" Class = "ad_off" title = "click to enable" >

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.

The Code is as follows:

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

The Code is as follows:

$ (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:

The Code is as follows:

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! ';
}