標籤：style http io color ar os 使用 java sp
經常用到上下左右，中間填充滿這樣的布局，在java swing中有BorderLayout，HTML中通常使用CSS來實現布局，但要實現border layout這樣的效果有些麻煩，很多第三方實現，比如easyui, extjs，功能過於強大，我只是想要一個簡單的布局而已，於是自己寫了個jquery布局外掛程式，支援嵌套布局以及小功能，方便團隊使用，項目地址：https://github.com/samsha/layout.border
簡介簡單的布局效果，實現上下左右，中間充滿的布局
依賴需要用到jquery
樣本 首先引入jquery.js和layout.border.js<script src="../lib/jquery.js"></script> <script src="../src/layout.border.js"></script>然後按下面的格式組織html
<body class="layout"> <header data-options="region:‘north‘, height: ‘50‘"> Header </header> <div data-options="region:‘center‘"> Center </div> <footer data-options="region:‘south‘, height: ‘40‘"> footer </footer> </body>完整樣本：
<!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: ‘50‘"> Header </header> <div data-options="region:‘center‘"> Center </div> <footer data-options="region:‘south‘, height: ‘40‘"> footer </footer></body></html>運行效果 嵌套樣本
<!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: ‘50‘"> Header </header> <div class="layout layout--h" data-options="region:‘center‘"> <div data-options="region:‘north‘, height: ‘45‘">north</div> <div data-options="region:‘center‘">center</div> <div data-options="region:‘west‘, width: ‘15%‘, min-width: 100, max-width: ‘250‘">West</div> <div data-options="region:‘east‘, width: ‘20%‘, min-width: 100, max-width: ‘300‘">East</div> </div> <footer data-options="region:‘south‘, height: ‘30‘" class="footer"> footer </footer> <script src="../lib/jquery.js"></script> <script src="../src/layout.border.js"></script> </body></html>運行效果
HTML架構布局 - layout.border
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
