easyUI--layout
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>