<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hide header and footer - jQuery EasyUI Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=2">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body bgcolor="violet">
<div id="idPanelMainFooter" style="padding:5px;">
<table style="width:100%">
<tr>
<td align="right">
<a class="easyui-linkbutton" data-options="plain:true,disabled:true">| nice looking label |</a>
</td>
</tr>
</table>
</div>
<div id="idPanelMain" class="easyui-panel" title="" data-options="border:true,fit:true,footer:'#idPanelMainFooter'" style="width:100%;height:100%;">
<header id="idPanelMainHead">
<span style="display:inline-block;"><b>
<a id="idTestJs" class="easyui-linkbutton" onclick="doTestFake()" data-options="plain:true,disabled:false" style="display:inline-block;width:100%;">Header title</a>
</b></span>
<span style="float:right;">
<a class="easyui-linkbutton" onclick="doLogoutFake()" data-options="iconCls:'icon-lock',plain:false" style="width:150px;">Logout</a>
</span>
</header>
<div class="easyui-tabs" data-options="fit:true">
<div title="Show / Hide stuff">
<p>
Pagination on
<select id="p-pos" class="easyui-combobox" data-options="editable:false,value:'top',onChange:changeP" onchange="changeP()">
<option>bottom</option>
<option>top</option>
<option>both</option>
</select> Style
<select id="p-style" class="easyui-combobox" data-options="editable:false,value:'links',onChange:changeP" onchange="changeP()">
<option>manual</option>
<option>links</option>
</select>
</p>
<table class="table-flat" style="width:auto;">
<tr>
<td><span><b>Hide header and footer: </b></span></td>
<td>
<input class="easyui-switchbutton" data-options="disabled:false,checked:false,onText:'YES',offText:'NO',onChange:onChangeHeaderFooter">
</td>
<td> </td>
</tr>
</table>
</div>
<div title="Datagrid here" style="padding:2px">
<table id="tt" class="easyui-datagrid" data-options="fit:true,url:'fake.php',title:'Load Data',iconCls:'icon-save',rownumbers:true,pagination:true">
<thead>
<tr>
<th field="field1" width="auto">field1</th>
<th field="field2" width="140" align="center" hidden="true">field2</th>
<th field="field3" width="110" align="center">field3</th>
<th field="field4" width="140">field4</th>
<th field="field5" width="70" align="right">field5</th>
<th field="field6" width="70" align="center">field6</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script type="text/javascript">
function changeP() {
console.log('function changeP()');
var dg = $('#tt');
dg.datagrid('loadData', []);
dg.datagrid({
pagePosition: $('#p-pos').val()
});
dg.datagrid('getPager').pagination({
layout: ['list', 'sep', 'first', 'prev', 'sep', $('#p-style').val(), 'sep', 'next', 'last', 'sep', 'refresh', 'info']
});
}
function onChangeHeaderFooter(checked) {
console.log('onChangeHeaderFooter(' + checked + ')');
var x = document.getElementById("idPanelMainHead");
var y = document.getElementById("idPanelMainFooter");
if (checked) {
x.style.display = "none";
y.style.display = "none";
} else {
x.style.display = "block";
y.style.display = "block";
}
$('#idPanelMain').panel('resize', {
width: 100,
height: 100
});
setTimeout(function() {
$('#idPanelMain').panel('expand');
}, 200);
}
</script>
</body>
</html>
This is going to run mainly on PCs, so,
the example of my code is at
http://code.reloado.com/inexay3/edit#html,livebut I'd like to use it in a phone browser's too, so,
a more realistic preview is at
http://code.reloado.com/eyakex3/edit#previewSince on the phone the "real estate" is small, I'll need to hide some parts, in this case, the nice header and footer, takes up a lot of space that I can use to view the datagrid.
I've tried everything that I can think of to no avail, and I can't get the panel to reclaim the space of the header and footer.
Thanks
