網站前端_EasyUI.基礎入門.0009.使用EasyUI Layout組件的最佳姿式?
1. 基礎佈局javascript
<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>
2. 全屏佈局css
<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>
3. 流式佈局html
<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>
4. 自適應高度佈局java
<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>點擊上面按鈕添加一行內容</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">
// 中間最後一行添加一行內容
function add(that){
$('#l').layout('panel', 'center').append('<p>點擊上面按鈕添加一行內容</p>');
resetHeight();
};
// 刪除中間最後的一行的內容
function remove(that){
$('#l').layout('panel', 'center').find('p:last').remove();
resetHeight();
};
// 重置整個layout的高度
function resetHeight(){
// 獲取中間的panel Jquery對象
var cpanel = $('#l').layout('panel', 'center');
// 獲取當前cpanel的高度
var cpanelOldHeight = cpanel.outerHeight();
// 設置中間的panel對象的高度爲自適應
cpanel.panel('resize', {height: 'auto'});
// 從新獲取cpanel的高度
var cpanelNewHeight = cpanel.outerHeight();
// 重置layout的寬度,減小兩次之差便可
var layoutheight = $('#l').height() - (cpanelOldHeight-cpanelNewHeight);
$('#l').layout('resize', {height: layoutheight});
};
</script>
5. 嵌套佈局jquery
<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>
6. 沒有摺疊按鈕的佈局json
<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>招聘運維開發工程師</p>
<ul>
<li>投簡歷至: xmdevops@vip.qq.com</li>
</ul>
</div>
<div data-options="region:'center',width:'30%'">
</div>
</div>
<style type="text/css">
.layoutPadding {
padding: 10px;
}
</style>
7. 複雜佈局app
<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>物聯網開發公司</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>
8. 添加和移除佈局運維
<div id="lo" class="easyui-layout" data-options="width:500,height:250">
<div data-options="region:'north',height:100,bodyCls:'padding10'">
<fieldset>
<legend>操做區</legend>
<div style="width:30%;text-align:left;float:left;">
<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 style="width:70;text-align:right;float:right;">
<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>
相關文章
- 1. 網站前端_EasyUI.基礎入門.0007.使用EasyUI Tabs組件的最佳姿式?
- 2. 網站前端_EasyUI.基礎入門.0008.帶你玩轉jQuery EasyUI Layout組件?
- 3. 使用EasyUI Accordion組件的最佳姿勢
- 4. GitHub網站使用的基礎入門
- 5. EasyUI入門（Accordion，Layout）
- 6. 前端基礎入門
- 7. JavaWeb前端基礎入門
- 8. 前端零基礎入門
- 9. EasyUI經常使用組件（基礎）
- 10. 前端基礎入門的幾個網站
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • netwox網絡工具集入門教程 - TCP/IP教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
