PHP Web site uses JavaScript and iframe simple to achieve partial refresh effect

This article is mainly to record their own winter vacation homework PHP website to implement the loading interface of the article, running effect as shown. The main record of the Php+html+apache development site 3 features: (easy to read later and other people to learn)
1. How to implement a simple page layout
2. How to use JSP for hiding and displaying effects
3. Partial dynamic update of page content via IFRAME

I. Operation effect
Run Apache to access the local page http://localhost:8080/CourseStudy/index.php, the effect is as follows: (lamp/wamp config PHP website)

It can be found that the interface layout is mainly composed of 3 parts, the top head, the center left menu bar and the middle right display interface, click on the left menu bar will be implemented by JavaScript to hide the zoom function, and click on the different menu bar to display the different interface on the right. As shown in the following:





two. Introduction to the Implementation method 1. Interface LayoutThe main use of the interface layout is the include loading PHP file implementation, using DIV and table implementation layout, where the index.php file code is as follows:

<?phpinclude ("head.php");? ><BR/><!--Layout Central--><div id= "Middle" ><!--layout middle Right otherwise it always appears on the left. --><div id= "Index_right" ><iframe height= "100%" width= "100%" border= "0" frameborder= "0" src= "main_ right.php "Name=" Rightframe "id=" Rightframe "title=" Rightframe "></iframe></div><!--layout Central left-- <div id= "Index_left" ><?phpinclude (' main_left.php ');? ></div></div>

mainly through the head.php layout of the interface of the head, main_right.php implementation of the loading interface of the middle right part, main_left.php loading interface of the middle left menu bar, and <iframe> later implementation of local loading will be described.


Where the head.php code, as shown, is the html+css simple layout:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
2.JavaScript Implements hidden zoom function
Main_left.php uses the table layout and calls the script function to implement this function, where the core code is as follows:
<script language=javascript>function Expand (EL) {childobj = document.getElementById ("child" + el); if ( ChildObj.style.display = = ' None ') {childObj.style.display = ' block ';} Else{childobj.style.display = ' None ';} return;} </SCRIPT>
where the first menu call code is called through Onclick=expend (1), and the submenu display initial value is None, then the initial value of the function is called block. 
<!--first option--><table cellspacing=0 cellpadding=0 width=150 border=0>    <tr height=30>    <TD Style= "padding-left:20px; font-size:15px "Background=images/menu_bt.jpg><a       class=menuparent Onclick=expand (1)       href=" Javascript:void (0); " > Course Home </A></TD></TR>  <tr height=4>    <td></td></tr></table ><table id=child1 style= "Display:none" cellspacing=0 cellpadding=0 width=150 border=0>  <TR height=20 >    <td align=middle width=30></td>    <td><a href= "main_right_yk1.php"     target= "Rightframe" > Home Introduction </A></TD></TR>  <tr height=4>    <td colspan=2></td></tr></table><!--second option--

3.Iframe for local loading effect
 Create an inline frame (inline frame) with another document through an IFRAME and implement the local load function, which is to display different content on the right side of the menu on the left, and the layout of the entire interface does not change.
The <iframe></frame> layout is first used in the index.php layout, while the SRC references the loaded PHP. The code is as follows:
<!--layout Central right--><div id= "index_right" ><iframe height= "100%" width= "100%" border= "0" frameborder= "0" src= "main_right.php" name= "Rightframe" id= "Rightframe" title= "Rightframe" ></iframe></div>
In the above code where src= "" is added to the page to be embedded, name= "" To embed traget in the page.
Then add the following submenu:
<a href= "main_right_yk2-2.php" target= "Rightframe" > Teacher Team </A>
The href adds the PHP interface to be loaded, and the target adds the name in the frame.
The second column of the "Course Summary" code is as follows: (for reference: Baidu Library)
<table id=child2 style= "Display:none" cellspacing=0 cellpadding=0 width=150 border=0> <TR height=20> < TD align=middle width=30></td> <TD><A HR ef= "main_right_yk2-1.php" Class=menuchild target= "Rightframe" > Course Introduction </A></TD></TR> <tr    height=20> <td align=middle width=30></TD> <td><a href= "main_right_yk2-2.php" target= "Rightframe" > Faculty team </A></TD></TR> <tr Hei    ght=20> <td align=middle width=30></TD> <td><a href= "main_right_yk2-3.php" target= "rightframe" > Teaching conditions </A></TD></TR> <tr Height=4> &LT;TD colspan=2></td></tr></table>
Finally, let's talk about the following issues to be solved:
1.iframe layout, the refresh always reloads the index.php interface, and the current display disappears;
2.php how to log in via post+session and form access MySQL database;
3. How to implement Web page index.php display different content when index.php/xxxx loading some content.
hope the article is helpful to you, the day after tomorrow will be New Year! Wishing myself and everyone in advance the new year is fast. 
The following address is the part of the interface code: HTTP://PAN.BAIDU.COM/S/1740CU
(By:eastmount 2015-2-16 6 o'clock in the morning http://blog.csdn.net/eastmount/)

PHP Web site uses JavaScript and iframe simple to achieve partial refresh effect