jQuery-EasyUI學習（二）layout佈局
阿新 • • 發佈：2018-12-22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Layout（佈局）</title> <meta http-equiv="keywords" content="培訓,IT培訓,華南地區培訓"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 引入css檔案，不限順序 --> <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"></link> <link rel="stylesheet" href="../themes/icon.css" type="text/css"></link> <!-- 引入js檔案，有順序限制 --> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.easyui.min.js"></script> <!-- 所有的css檔案和的有的js檔案位置不限 --> </head> <body> <!-- 佈局 --> <div id="layoutID" style="width:700px;height:500px" class="easyui-layout" data-options="fit:true"> <!--data-options="fit:true" 表示該標籤和父標籤一樣大--> <!-- 區域面板--北邊 --> <div data-options="region:'north',title:'北邊',split:true,border:true,iconCls:'icon-remove'" style="height:100px;"></div> <!-- region:'north', 表示這是北方的區域 title:'北邊', 該面板名稱 split:true, 是否可以用滑鼠拖動該面板 border:true, 是否顯示邊界 iconCls:'icon-remove', 圖示樣式 --> <!-- 區域面板--南邊 --> <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> <!-- 區域面板--中間 --> <div data-options="region:'center',title:'中間',href:'/js-day05/images/mm.html'" style="padding:5px;background:#eee;"></div> </div> </body> </html>
可以用如下js對上述面板進行控制
<script type="text/javascript"> //easyui呼叫方法的語法如下：$('selector').元件名('method',parameter); //瀏覽器載入jsp頁面時觸發 $(function(){ //將北邊摺疊 $('#layoutID').layout('collapse','north'); //休息3秒 window.setTimeout(function(){ //將南邊摺疊 $("#layoutID").layout("collapse","south"); //將北邊展開 $('#layoutID').layout('expand','north'); window.setTimeout(function(){ //將南邊展開 $("#layoutID").layout("expand","south"); },3000); },3000); }); </script>