<div id="l" class="easyui-layout" data-options="width:500,height:250"> <div data-options="region:'north',title:'north',height:50"></div> <div data-options="region:'west',title:'west',width:100"></div> <div data-options="region:'east',title:'east',width:100"></div> <div data-options="region:'center',title:'center'"> <table id="dg" class="easyui-datagrid" data-options="fit:true,url:'/easyui/data.json',border:false,method:'get',singleSelect:true,fitColumns:true"> <thead> <tr> <th data-options="field:'name',width:'33%'">姓名</th> <th data-options="field:'age',width:'33%'">年齡</th> <th data-options="field:'sex',width:'34%',align:'right'">性別</th> </tr> </thead> </table> </div> </div>
<body class="easyui-layout" data-options="fit:true"> <div data-options="region:'center',title:'full screen'"></div> <!-- 說明: 加載jquery-easyui腳本文件 --> <script src="js/jquery-easyui/jquery.min.js"></script> <script src="js/jquery-easyui/jquery.easyui.min.js"></script> <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> </body> 或 <div id="l" class="easyui-layout"> <div data-options="region:'center',title:'full screen'"></div> </div> <!-- 說明: 加載jquery-easyui腳本文件 --> <script src="js/jquery-easyui/jquery.min.js"></script> <script src="js/jquery-easyui/jquery.easyui.min.js"></script> <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> width = $(document).width(); height = $(document).height(); $('#l').layout({ width: width, height: height, }); </script>
<div id="l" class="easyui-layout" data-options="width:500,height:250"> <div data-options="region:'west',title:'west',width:'30%',content:'30%',bodyCls:'layoutPadding'"></div> <div data-options="region:'center',title:'center',bodyCls:'layoutPadding'"></div> </div> <style type="text/css" scoped="scoped"> .layoutPadding { padding: 10px; } </style>
<div id="l" class="easyui-layout" data-options="width:500,height:250"> <div data-options="region:'north',height:50"> <a href="#" class="easyui-linkbutton" onclick="javascript:add(this);">添加</a> <a href="#" class="easyui-linkbutton" onclick="javascript:remove(this);">刪除</a> </div> <div data-options="region:'south',height:50">南</div> <div data-options="region:'west',width:100">西</div> <div data-options="region:'east',width:100">東</div> <div data-options="region:'center'"> <p>點(diǎn)擊上面按鈕添加一行內(nèi)容</p> </div> </div> <!-- 說明: 加載jquery-easyui腳本文件 --> <script src="js/jquery-easyui/jquery.min.js"></script> <script src="js/jquery-easyui/jquery.easyui.min.js"></script> <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> // 中間最后一行添加一行內(nèi)容 function add(that){ $('#l').layout('panel', 'center').append('<p>點(diǎn)擊上面按鈕添加一行內(nèi)容</p>'); resetHeight(); }; // 刪除中間最后的一行的內(nèi)容 function remove(that){ $('#l').layout('panel', 'center').find('p:last').remove(); resetHeight(); }; // 重置整個(gè)layout的高度 function resetHeight(){ // 獲取中間的panel Jquery對(duì)象 var cpanel = $('#l').layout('panel', 'center'); // 獲取當(dāng)前cpanel的高度 var cpanelOldHeight = cpanel.outerHeight(); // 設(shè)置中間的panel對(duì)象的高度為自適應(yīng) cpanel.panel('resize', {height: 'auto'}); // 重新獲取cpanel的高度 var cpanelNewHeight = cpanel.outerHeight(); // 重置layout的寬度,減少兩次之差即可 var layoutheight = $('#l').height() - (cpanelOldHeight-cpanelNewHeight); $('#l').layout('resize', {height: layoutheight}); }; </script>
<div id="l" class="easyui-layout" data-options="width:500,height:250"> <div data-options="region:'north',height:50"></div> <div data-options="region:'south',height:50"></div> <div data-options="region:'west',width:50"></div> <div data-options="region:'center'"> <div id="ll" class="easyui-layout" data-options="fit:true"> <div data-options="region:'west',width:100,split:true,border:false"></div> <div data-options="region:'center',border:false"></div> </div> </div> </div>
<div id="l" class="easyui-layout" data-options="width:500,height:250"> <div data-options="region:'north',height:50"></div> <div data-options="region:'south',height:50"></div> <div data-options="region:'west',width:'70%',collapsible:false,bodyCls:'layoutPadding',title:'recruitment notice:',iconCls:'icon-ok'"> <p>招聘運(yùn)維開發(fā)工程師</p> <ul> <li>投簡(jiǎn)歷至: xmdevops@vip.qq.com</li> </ul> </div> <div data-options="region:'center',width:'30%'"> </div> </div> <style type="text/css"> .layoutPadding { padding: 10px; } </style>
<div id="lo" class="easyui-layout" data-options="width:500,height:250"> <div data-options="region:'north',height:50"></div> <div data-options="region:'south',height:50"></div> <div data-options="title:'menu',region:'west',width:100"> <div id="ac" class="easyui-accordion" data-options="fit:true,border:false"> <div data-options="title:'accordion1',bodyCls:'padding10'">accordion1</div> <div data-options="title:'accordion2',bodyCls:'padding10'">accordion2</div> <div data-options="title:'accordion3',bodyCls:'padding10'">accordion3</div> </div> </div> <div data-options="region:'east',width:200"> <ul id="te" class="easyui-tree" data-options="fit:true,border:false"> <li> <span>1</span> <ul> <li>1-1</li> <li> <span>2</span> <ul> <li>2-1</li> <li> <span>3</span> <ul> <li>3-1</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <div data-options="region:'center',border:false"> <div id="tb" class="easyui-tabs" data-options="fit:true"> <div data-options="title:'About',bodyCls:'padding10'"> <p>物聯(lián)網(wǎng)開發(fā)公司</p> <ul> <li>成立于2008年.</li> </ul> </div> <div data-options="title:'Company',border:false"> <table id="dg" class="easyui-datagrid" data-options="url:'/easyui/data.json',method:'get',fit:true,singleSelect:true,fitColumns:true"> <thead> <th data-options="field:'name',width:'33%'">名字</th> <th data-options="field:'age',width:'33%'">年齡</th> <th data-options="field:'sex',width:'34%'">性別</th> </thead> </table> </div> </div> </div> <style type="text/css" scoped="scoped"> .padding10 { padding: 10px; }; </style>
<div id="lo" class="easyui-layout" data-options="width:500,height:250"> <div data-options="region:'north',height:100,bodyCls:'padding10'"> <fieldset> <legend>操作區(qū)</legend> <div > <span>region:</span> <select name="region" id="regionArea"> <option value="south">south</option> <option value="west">west</option> <option value="east">east</option> <option value="center">center</option> </select> </div> <div > <a href="#" class="easyui-linkbutton" onclick="javascript:add(this);">添加</a> <a href="#" class="easyui-linkbutton" onclick="javascript:remove(this);">刪除</a> </div> </fieldset> </div> <div data-options="region:'south',height:50"></div> <div data-options="region:'west',width:100"></div> <div data-options="region:'east',width:100"></div> <div data-options="region:'center'"></div> </div> <style type="text/css" scoped="scoped"> .padding10 { padding: 10px; } </style> <!-- 說明: 加載jquery-easyui腳本文件 --> <script src="js/jquery-easyui/jquery.min.js"></script> <script src="js/jquery-easyui/jquery.easyui.min.js"></script> <script src="js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> // 添加布局 function add(that){ var region = $('#regionArea').val(); var regionPanel = $('#lo').layout('panel', region); if(regionPanel.length) return; var options = {region: region}; if(['north', 'south'].indexOf(region)) options['height']=50; if(['west', 'east'].indexOf(region)) options['width'] = 100; $('#lo').layout('add', options); }; // 刪除布局 function remove(that){ var region = $('#regionArea').val(); var regionPanel = $('#lo').layout('panel', region); if(!regionPanel.length) return; $('#lo').layout('remove', region); }; </script>
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
文章名稱:如何使用EasyUILayout組件-創(chuàng)新互聯(lián)
網(wǎng)站地址:http://bm7419.com/article38/cedopp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、全網(wǎng)營(yíng)銷推廣、做網(wǎng)站、云服務(wù)器、電子商務(wù)、定制開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容