JQuery UI Layout(sample)
<!DOCTYPE html>
<HTML>
<HEAD>
<META charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=10" >
<TITLE>Layout (1)</TITLE>
<!--
<script src="js/jquery/jquery-1.12.4.min.js"></script>
-->
<script src="js/jquery/jquery-2.2.4.min.js"></script>
<script src="js/jquery/ui/jquery-ui-1.12.1.min.js"></script>
<script src="js/jquery/ui/jquery.layout-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// body layout
$('body').layout(layoutOptions);
// mainContent layout
$('#mainContent').layout(layoutMainOptions);
initGrid();
$('#d1').resizable().draggable();
});
function initGrid(){
// ヘッダをリサイズ化
$('.pth').resizable();
// グリッドからresizeイベントを伝播させない。
$('#plmgrid1234').on('resize', function(e){
console.log(' #plmgrid1234: catch resize event.');
e.stopPropagation();
$('#mainContent .ui-layout-center').trigger('gridresize');
});
// グリッドの直接の親ペインでgridresizeイベントを捉える
$('#mainContent .ui-layout-center').on('gridresize', function(e){
console.log(' -- #mainContent .ui-layout-center: gridresize');
});
}
</script>
<script type="text/javascript">
var layoutOptions = {
east : {
initHidden : true
}
};
var layoutMainOptions = {
east : {
initHidden : true
},
west : {
initHidden : true
},
south : {
initHidden : true
}
};
var onResizeFunc = function(name, elem, state, opt, layout){
console.log('-- onresize() '+name + ' opt.paneSelector:'+opt.paneSelector);
if(funcList[name].gridresize){
// $('#mainContent '+opt.paneSelector).trigger('gridresize');
$(opt.paneSelector).trigger('gridresize');
}
if(typeof funcList[name].resized === 'function'){
(funcList[name].resized)();
}
}
// layoutMainOptions.onresize_end = onResizeFunc;
layoutMainOptions.center = {};
layoutMainOptions.center.onresize_end = onResizeFunc;
layoutMainOptions.north = {};
layoutMainOptions.north.onresize_end = onResizeFunc;
layoutOptions.west = {};
layoutOptions.west.onresize_end = onResizeFunc;
var funcList = {};
function setLayoutResizeCallback(opt){
for( var i in opt ){
funcList[i] = opt[i];
}
}
</script>
<script type="text/javascript">
setLayoutResizeCallback({
center : {
resized : function(){ console.log(' **** resize CENTER '); },
gridresize : true
},
north : {
resized : function(){ console.log(' **** resize NORTH '); },
gridresize : true
},
west : {
resized : function(){ console.log(' **** resize WEST '); },
gridresize : true
}
});
</script>
<link type="text/css" rel="stylesheet" href="css/jquery/ui/layout-default-1.4.0.css">
<link type="text/css" rel="stylesheet" href="css/jquery/ui/jquery-ui.css">
<style type="text/css">
#mainContent {
padding: 0px 0px 0px 0px;
}
#d1 {
border: solid black 5px;
width: 50px;
height:50px;
}
.ptbl {
display:table;
}
.prw {
display:table-row;
}
.pth {
display:table-cell;
background-color: #6666FF;
text-align: center;
font-weight: bold;
border: solid black 1px;
width: 150px;
}
.ptd {
display:table-cell;
border: solid black 1px;
}
</style>
</HEAD>
<BODY>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
<div class="ui-layout-center" id="mainContent">
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
<div class="ui-layout-center" id="central">
Center
<div id="P001_C001">
<div id="plmgrid1234">
<div class="ptbl">
<div class="prw">
<div class="pth">艦種</div>
<div class="pth">艦名</div>
<div class="pth">排水量</div>
</div>
<div class="prw">
<div class="ptd">DDH</div>
<div class="ptd">Hyuga</div>
<div class="ptd">181</div>
</div>
<div class="prw">
<div class="ptd">DDH</div>
<div class="ptd">Ise</div>
<div class="ptd">182</div>
</div>
<div class="prw">
<div class="ptd">DDH</div>
<div class="ptd">Izumo</div>
<div class="ptd">183</div>
</div>
<div class="prw">
<div class="ptd">DDH</div>
<div class="ptd">Kaga</div>
<div class="ptd">184</div>
</div>
</div>
</div>
</div>
</div>
</div>
</BODY>
</HTML>