kendoui布局

最新推荐文章于 2023-07-12 10:35:12 发布

goblin250

最新推荐文章于 2023-07-12 10:35:12 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/howareyoutodayyhz/article/details/8831400

版权

不了了之同时被 3 个专栏收录

81 篇文章 0 订阅

订阅专栏

html5

11 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

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>

显示的页面效果：

goblin250

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kendoui布局

kendoui学习资料--布局使用kendo.ui.Splitter将一个页面，水平方向上分为(左右)，竖直方向上分为(上中下)。jsp页面代码如下: kendoui布局 html,body{ padding:0; margin:0; height:100%; fo
复制链接

扫一扫