HTML Frame Layout-Layout.border

Often used up and down, filled with the middle of such a layout, in Java Swing borderlayout,html often use CSS to achieve layout, but to achieve border layout such a effect is a bit troublesome, many third-party implementations, such as Easyui, ExtJS, the function is too powerful, I just want a simple layout, so I wrote a jquery layout plug-in, support nested layout and small function, convenient for team use, project address: Https://github.com/samsha/layout.border

Brief introduction

Simple layout effect, implementation up and down, middle filled layout

Depend on

Need to use jquery

ExampleFirst introduce Jquery.js and layout.border.js

<script src=".. /lib/jquery.js "></script><script src=". /src/layout.border.js "></script>

Then organize the HTML in the following format

<bodyclass="Layout">        <headerdata-options="region : ' North ', Height: '>            header        </header>        <div  Data-options="region: ' Center '">            Center        </Div>        <  Footerdata-options="region: ' South ', Height: ' + '">            footer        </  Footer>    </body>

Complete Example:

<!doctype html><HTML><Head> <Meta CharSet="Utf-8"> <title>border Layout demo</title><style>  Div, header, footer {  Border: solid 1px  #888;  text-align: Center;  } </style> <script src=".. /lib/jquery.js "></script> <script src=".. /src/layout.border.js "></script></Head><Body class="Layout"> <Header data-options="region: ' North ', Height: '"> Header </Header> <Div data-options="region: ' Center '"> Center </Div> <Footer data-options="region: ' South ', Height: ' + '"> Footer </Footer></Body></HTML>

Run effect

Nested samples

<!doctype html><HTML class="No-js"><Head> <Meta CharSet="Utf-8"> <title>border Layout demo</title><style>  Div, header, footer {  Border: solid 1px  #888;  text-align: Center;  } </style></Head><Body class="Layout"> <Header data-options="region: ' North ', Height: '"> Header </Header> <Div class="Layout layout--h" data-options="region: ' Center '"> <Div data-options="region: ' North ', Height: '">north</Div> <Div data-options="region: ' Center '">center</Div> <Div data-options="region: ' West ', Width: ' 15% ', min-width:100, Max-width: '">west</Div> <Div data-options="region: ' East ', Width: ' 20% ', min-width:100, Max-width: '">east</Div> </Div> <Footer data-options="region: ' South ', Height: '" class="Footer"> Footer </Footer><script src=".. /lib/jquery.js "></script> <script src=".. /src/layout.border.js "></script></Body></HTML>

Run effect

HTML Frame Layout-Layout.border