Detailed description of the layout of the mymsn dynamic resize page framework

Microsoft's mymsn provides a personal portal for free Resize and drag & drop. Although such a portal is easy to see, such operations as SharePoint and dotnetnuke are well implemented. We also know that it is easy to drag an HTML element on a web page. However, if the entire page is absolutely positioned, it is still very difficult to manage, so let's see how mymsn works?

Should everyone have played mymsn? Http://my.msn.com/, register a passpostaccount number.

The overall structure of mymsn is a tab by channel, which is generated and processed on the server side, not the focus of our research. Its appearance is as follows:

The layout structure of each independent tab is the focus of our research. A tabpage is a <Table> In mymsn and is divided into n columns. The result is as follows:

In addition, mymsn supports the width of any resize column. The effect is as follows:

Well, we can see that the mymsn page layout is two <tr> in the outermost <Table>, and the <tr> In the first line is used as the column header, in the second line, <tr> place the specific content. In the second row, each <TD> in <tr> is a iner containing content. In the figure, each block similar to the Windows window is also a <Table> block, they are placed in their container (<TD>) sequentially, and all la s are completed by default. What does it mean? That is to say, no position, top, left, or other styles are used to force the layout effect.

There seems to be nothing special about this. As long as a webpage is made, this layout can be made. Yes, but there is still a problem with the support for mymsn in this layout. A very sexy function provided by mymsn allows users to customize on the Interface freely! Including reszie and drag & drop. What is the problem? We know that when IE parses HTML and draws a graph, it is drawn from every leaf node in the HTML tree. In this order of drawing, the appearance of all elements can be displayed without being hidden. As long as a web page has been made, it must have been opened by tables. Is this the case? This is because IE traverses the DHTML tree based on the root to output the results. Of course, this is not a unique rule of IE. all browsers use this policy to output images.

In this way, we can increase the width of the container at will, but to reduce the width of the container, we need to look at the layout strategy of its internal elements. If the internal elements of the iner can be folded and their width is in percent units, reducing the width of the container forces the internal elements to narrow at the same time (and the height will increase at the same time ). On the contrary, it is impossible to arbitrarily change the container width to constrain its content.

Since mymsn uses tables for layout, how does it handle the content width in each room during resize? Let's take a look (the third one). When we resize the width of the first column between the first column and the second column, we can see that the room runs out of the container, view Room "add content "! Mymsn originally did this. When the user mousedown the resizer, use JavaScript to change the location of the room in the affected container to "absolute ", then, calculate the location of each room on the page and locate each room. When you drag the resizer, update the width of each room in the affected iner in onmousemove. Room "welcome" & "add content" shows different appearances, which is caused by the IE output graphics policy I mentioned earlier, that is to say, even if we set the "add content" room width to 1, it will be so wide.

To ensure the layout policy of table nesting, when the user stops the resize action and triggers the onmosueup event on the resizer, use the script to set all the room position attributes in the room iner back to "static", so that they are subject to the default layout flow of IE. The advantage is that you can always save the clear layout relationships of the page and rely on the default layout of IE. Without any potential confusion, you can also dynamically add column or room. At the same time, mymsn also needs to transmit user-defined settings back to the server for storage, which also requires a clear layout structure. For Drag & drop, this structure is more required, for all absolute positioning, It is very troublesome to record the status of elements whose position attribute is "absolute" when the page is full. All mymsn scriptsCode2700 on the line. In this layout structure, the complete support for Resize and drag & Drop requires only about 600 lines of code (the remaining 2000 lines of code are there, I don't know what planes Microsoft is launching ).

An element layout diagram of the mymsn page is attached at the end (slightly simpler than the actual one, but fully supports its existing functions ):
// the entire Black Box, and each blue or green box is a

element.