easyUI--layout

最新推荐文章于 2022-07-11 18:15:28 发布

Tate-Ling

最新推荐文章于 2022-07-11 18:15:28 发布

阅读量799

点赞数

文章标签： easyui layout

本文链接：https://blog.csdn.net/szzt_lingpeng/article/details/30978791

版权

未整理专栏收录该内容

5 篇文章 0 订阅

订阅专栏

a) 分为五块: “north, south, east, west, center”, 其中” center”面板是必须得要的, 其他几个可以不要. 如删除” center”面板会报错. 有可能是在easyui计算面板长或宽时取值不到而报错.

b) Href属性使用: layout面板只引用href指向页面的body里面的内容, 不包含head内容JS文件.如要执行, 也可把js放入body标签中.

尽量规范, 被包含的页面不要定义头和脚本, 只需要body

<divdata-options="region:'center',title:'centertitle',href:'login.html'"></div>

c) 调用easyUI内置的属性,方法,事件的方法:

// 事件的执行方法
      var text1 = $("#bodyPanel").layout("panel","center");
      console.info(text1);
     
      //方法的执行方法
      text1.panel("resize", {
        width : 1000,
        height : 1000
      });
     
      //属性的设置方法
      $("#bodyPanel").layout({
        fit : true
      });
     
      //属性的获取方法
      var title =text1.panel("options").title;
      console.info(title);

本人测试例子

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>jQuery EasyUI demo</title>

		<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/icon.css" type="text/css"></link>
		<link rel="stylesheet" href="../jquery-easyui-1.3.1/themes/default/easyui.css" type="text/css"></link>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
	</head>
	<script type="text/javascript">
	$(function() {

		// 事件的执行方法
		var text1 = $("#bodyPanel").layout("panel", "center");
		console.info(text1);

		// 方法的执行方法
		text1.panel("resize", {
			width : 1000,
			height : 1000
		});

		// 属性的设置方法
		$("#bodyPanel").layout({
			fit : true
		});

		// 属性的获取方法
		var title = text1.panel("options").title;
		console.info(title);
	});
</script>
	<body>
		<div id="bodyPanel" class="easyui-layout" style="height: 800px; width: 800px">
			<div data-options="region:'north',title:'North Title'" style="height: 100px;"></div>
			<div data-options="region:'south',title:'South Title'" style="height: 100px;"></div>
			<div data-options="region:'east',iconCls:'icon-reload',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',href:'login.html'"
				style="padding: 5px; background: #eee;"></div>
		</div>
	</body>
</html>

Tate-Ling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyUI--layout

a) 分为五块: “north, south, east, west, center”, 其中” center”面板是必须得要的, 其他几个可以不要. 如删除” center”面板会报错. 有可能是在easyui计算面板长或宽时取值不到而报错.b) Href属性使用: layout面板只引用href指向页面的body里面的内容, 不包含head内容JS文件.如要执行,
复制链接

扫一扫

专栏目录