First, JQuery easy UI (fits screen resolution size) layouts (layout)
1, the first application is the jquery-easyui-1.4 version (different version, compatibility is different)
2, to achieve the layout of the entire page (Layout:north,south,west,east, center)
3. First, the entire page layout adapts to the screen resolution size
4, then the content area to layout, but also to adapt to the screen resolution size
5, part of the code:
1 <Body>2 <Divclass= "Easyui-layout"Fit= "true">3 <Divdata-options= "region: ' North '"style= "height:50px">4 <H3>5Title position</H3>6 </Div>7 <Divdata-options= "region: ' South ', Split:true"style= "height:50px;">8 <H3>9Bottom position</H3>Ten </Div> One <Divdata-options= "region: ' East ', Split:true"title= "East"style= "width:200px;"> A <H3> -Populating content</H3> - </Div> the <Divdata-options= "region: ' West ', Split:true"title= "West"style= "width:200px;"> - <H3> -Navigation Menu Location</H3> - </Div> + <Divdata-options= "Region: ' Center '"> - <%--Note: You must set the property fit="true"--%> + <DivID= "Tabs"class= "Easyui-tabs"Fit= "true"> A <DivID= "Home"title= "Welcome"style= "padding:3px; overflow:hidden;"> at <%--Middle Content layout adapts to screen resolution size note setting properties fit="true"--%> - <Divclass= "Easyui-layout"Fit= "true"> - <%--if the left and right layouts must be set to a width of--%> - <DivID= "P"data-options= "region: ' West ', title: ' Left position ', Collapsible:false"style= "width:25%; - padding:0px; "> - <%--if the contents of the content also to adapt to the screen resolution size need to set width="100%"Height="100%"--%> in <DivID= "Departlist"> - <h4> toPopulating content</h4> + </Div> - </Div> the <Divdata-options= "Region: ' Center ', title: ' Right position '"> * <DivID= "Departaddr"> $ <h4>Panax NotoginsengPopulating content</h4> - </Div> the </Div> + </Div> A </Div> the <Divtitle= "Test"style= "padding:10px"> + The Test work. - </Div> $ <Divtitle= "Help"data-options= "Iconcls: ' Icon-help ', closable:true"style= "padding:10px"> $ The Help content. - </Div> - </Div> the </Div> - </Div>Wuyi </Body>
6, the operation effect is as follows:
JQuery Easy UI (fit to screen resolution size) layouts (layout)