easyUI--layout

来源：互联网发布：h5小黄人接金币源码编辑：程序博客网时间：2024/05/21 04:26

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>

0 0