布局组件layout

最新推荐文章于 2024-04-09 15:55:17 发布

weixin_30586257

最新推荐文章于 2024-04-09 15:55:17 发布

阅读量156

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/m01qiuping/p/6502236.html

版权

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
<script type="text/javascript">
    $(function(){
        //返回指定面板
        console.log($("#box").layout("panel","north"));
        //设置指定面板折叠
        $("#box").layout("collapse","north");
        //设置指定面板展开
        $("#box").layout("expand","north");
        //重新调整布局和大小
        $(document).click(function(){
            $("#box").layout().css("display",'none');
            //alert();
            //$("#box").layout().css("display",'block');
            $("#box").layout("resize");
        });
        //删除指定面板
        $("#box").layout("remove","north");
        //添加新面板
        $("#box").layout("add",{});
    });
</script>
</head>
<body>
<div id="box" class="easyui-layout"
style="width:600px;height:400px;">
<div data-options="region:'north',title:'North Title',split:true"
style="height:100px;">北</div>
<!--
region : 面板的位置
title : 布局面板的标题
split ：用户可以通过分割面板改变面板的大小
iconCls ： 一个包含图标的css类的ID
href: 读取远程数据的url
collapsible : 定义是否显示可折叠按钮
minWidth
minHeight
maxWidth
maxHeight
-->
<div data-options="region:'south',title:'South Title',split:true,collapsible: false"
style="height:100px;">南方</div>
<div data-options="region:'east',title:'East',split:true"
style="width:100px;">东方</div>
<div data-options="region:'west',title:'West',split:true"
style="width:100px;">西方</div>
<div data-options="region:'center',title:'center title'"
style="padding:5px;background:#eee;">中部</div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/m01qiuping/p/6502236.html

weixin_30586257

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
布局组件layout

<!DOCTYPE html><html><head><title>jQuery Easy UI</title><meta charset="UTF-8" /><script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery...
复制链接

扫一扫