For example, the following iplaysoft in this section of the site.
You can also first look at what I do a little
| The code is as follows | Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <body> <div id= "Ajaxload" > </body> |
|
Click each tab to convert to see the different information content. Here to see how it is achieved, in fact, simply need two files on it, One is to show you that it can be HTML or PHP Dynamic Web page format (as a framework for the following index.html), and the other must be a CGI format file, because it is used to get triggers and make the information change?
First, you introduce the jquery framework
| The code is as follows | Copy Code |
<script language= "javascript" type= "Text/javascript" src= "Js/jquery.min.js" ></script> |
|
Then in that index page put a div as a container, for the selection of containers you can do according to their own needs, nor is it necessary to do with Div, and give it an ID number as a hook. Then write the script directly.
| The code is as follows | Copy Code |
<div id= "Ajaxload" > |
|
Let's take a look at what we can load on the test page and write a hello or something on the test page.
Sure enough this method is can drop, then we further expand, to achieve our function. Let's refer to the template above to make it, of course, we can play their own imagination to achieve other effects. Ajaxload the layout of this div is probably as follows, of course, because the entire div content is from the test page, so put the following frame on the test page.
| The code is as follows | Copy Code |
<div id= "Hello" > |
|
And then write the PHP code to implement the Hello Div to extract the database information, nav that for the number of pages (PHP code here will not put out, more, mainly to achieve reading database information, as well as according to the page pagination display data). For pagination features write it yourself here, Paperen I have written so far.
| code is as follows | copy code |
| $each =5;//Define the number of data per page |
Then use a For loop to display the number of pages, because you already know the total number of pages $pagenum.
| The code is as follows | Copy Code |
| <ul class= "NAV" > <?php for ($i =1; $i <= $pagenum; $i + +) { ?> <li><a href= "javascript:void (0);" ></a></li> <?php } ?> </ul> <div class= "C" ></div> |
|
Then write a CSS to beautify the page. The effect is as follows.?
The last step, the realization of the interactive function, is that we click on the orange dot, the information above will change, but also the point of comparison, I do not know what the children see here there is no idea, Paperen I think I'll see if I can get the elements of the test page on this index page and receive its action, I'm <li><a href= "javascript:void (0);" ></a></li> plus a Click event
Just test and see if it's okay.
Sure enough, Xi hee this is good to do. Then in this hyperlink click event with a function to handle, in the index page plus some script.
| The code is as follows | Copy Code |
<li><a href= "javascript:void (0);" onclick= "NextPage (<?= $i?>)" ></a></li> |
|
Note that the Load event is a POST method for sending data, which is why you use $_post to receive page variables on the test page.
The
really is a great front-desk effect, we can go back to try, in fact, see so many of the simplest is $ ("#ajaxload"). Load ("test.php", {' page ':p age}); it can be solved, compared to post,get feel more convenient ah.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
