kendoui学习资料--布局
使用kendo.ui.Splitter将一个页面,水平方向上分为(左右),竖直方向上分为(上中下)。
jsp页面代码如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>kendoui布局</title>
<%@ include file="/kinc.jsp"%>
<style scoped>
html,body{
padding:0;
margin:0;
height:100%;
font:75% 'Lucida Sans Unicode','Lucida Grande',arial,helvetica,sans-serif;
background:#e2e2e2 url("${ctx}/libs/kendoui.web.2013.1.319/shared/styles/flowers-left.png") no-repeat fixed 0 400px;
}
#vertical {
height: 99%;
width: 99%;
margin: 0 auto;
}
</style>
<script>
$(document).ready(function() {
// 竖直方向
$('#vertical').kendoSplitter({
orientation: "vertical",
panes : [
{ collapsible: true, size: '50px'},
{ collapsible: false },
{ collapsible: true, size: '50px'}
]
});
// 水平方向
$("#horizontal").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "200px"},
{ collapsible: false}
]
});
});
</script>
</head>
<body>
<div id="vertical">
<div id="top-pane">
<div class="pane-content">
<p>头部</p>
</div>
</div>
<div id="middle-pane">
<div id="horizontal" style="padding:0px; margin: 0px; width: 100%;height: 100%;">
<div id="left-pane">
<div class="pane-content">
<div id="mainPanel">功能菜单</div>
</div>
</div>
<div id="right-pane">
<div class="pane-content">
<h3>主面板</h3>
</div>
</div>
</div>
</div>
<div id="bottom-pane">
<div class="pane-content">
<p>底部</p>
</div>
</div>
</div>
</body>
</html>