ASP. NET MVC build Project Background UI Framework-3, panel folding and unwinding

Catalogue

1. ASP. NET MVC build Project Background UI Framework-1, background main frame
2. ASP. NET MVC build Project Background UI Framework-2, menu effects
3. ASP. NET MVC build Project Background UI Framework-3, panel folding and unwinding

The previous section has added the menu effects, this section, we will add the folding and expanding functions of the Panel, as follows:

Ideas: I added a div in the right view to hold a picture in this Div, and to control the hide and display of the left view by clicking on the image. To be blunt, this is actually the Cols property of frameset in the index view of the main frame.

Start operation

1, modify the right view, add a div to the left, set the Float:left, inside a picture button, as the panel folding and expansion of the switch. Add a Juqery method that invokes the method Hideshowframein the parent frame's index view to modify the Cols property of frameset in the index view to control the display of the interface.

@{Layout=NULL;}<! DOCTYPE html>"ZH">"Content-type"Content="text/html; Charset=utf-8"/> <meta charset="Utf-8"/> <style type="Text/css">html, body {margin:0px; Font-family:arial, Sans-serif;/*font-size:62.5%;*/Font-size:12px; Height: -%;            padding:2px 4px 4px 0px;        Overflow:hidden; }    </style> <style type="Text/css">. sidebar {width:5px;        height:500px;                }. Sidebar. btn {width:5px;                height:39px; Background:url (/images/sidebar-on.gif); Margin-top:200px; }. Sidebar. btn:hover {background-position:0-39px; }. fleft {float: Left; }    </style> <script src="~/scripts/jquery-1.8.3.min.js"></script> <script type="Text/javascript">$ (function () {$ ("#divFolding"). Click (function () {self.parent.hideShowFrame ();}        );    }); </script>class="Sidebar Fleft"> <divclass="btn"Id="divfolding"></div> </div> <divclass="Rightcont">Hello,world</div></body>
2, modify the index view, add the following JS:
    // collapse the expand panel        function Hideshowframe () {            if (document.getElementById ("Middenfram"). cols = = "193,*") {                document.getElementById ("Middenfram"). cols = "0,*";            }             Else {                document.getElementById ("Middenfram"). cols = "193,*"            }        }
Let's look at the body part of the index view:
<Framesetrows= "104,*,30"cols="*"frameborder= "No"Border= "0"framespacing= "0">@* Top Hair 104px, bottom 30px, middle part adaptive *@<Framesrc= "Home/top"name= "Topframe"scrolling= "No"noresize= "Noresize"ID= "Topframe"title= "Topframe" />  <Framesetcols= "193,*"frameborder= "No"Border= "0"framespacing= "0"ID= "Middenfram">@* left 193px, right adaptive *@<Framesrc= "Home/left"name= "Leftframe"scrolling= "No"noresize= "Noresize"ID= "Leftframe"title= "Leftframe"/>    <Framesrc= "Home/right"name= "MainFrame"ID= "MainFrame"title= "MainFrame" />  </Frameset>  <Framesrc= "/content/bootom.html"name= "Topframe"scrolling= "No"noresize= "Noresize"ID= "Bootomframe"title= "Topframe" /></Frameset>
3, F5 Run, look at the effect.
JS and CSS used in the framework:cssjsimg source code 
ASP. NET MVC build Project Background UI Framework-3, panel folding and unwinding