layout


layout

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>1.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
    <!-- easyui的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/default/easyui.css">
    <!-- 小图标的样式 -->
    <link rel="stylesheet" type="text/css" href="../jslib/jquery-easyui-1.3.1/themes/icon.css">
   
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
 
 <script type="text/javascript">
  $(function(){
   
  });
  
  function getCenterPanel(){
   var centerPanel = $('#blayout').layout('panel','center');
   console.info(centerPanel);
   //panel组件有个options方法,该方法返回panel组件的所有配置信息
   alert(centerPanel.panel('options').title);
  }
 </script>
 
  </head>
 
  <body id="blayout" class="easyui-layout"> 
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">
     <input type="button" value="获取center面板" onclick="getCenterPanel();"/>
    </div> 
    <div data-options="region:'south',title:'South Title',split:true" 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> 
    <!-- href只加载1.html里面的body部分代码,其余的都不管 --> 
    <div data-options="region:'center',title:'center title',border:false,href:'1.html'" style="padding:5px;background:#eee;"></div> 
  </body> 

</html>