kityminder
Version:
144 lines (130 loc) • 4.01 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>FUI</title>
<link rel="stylesheet" type="text/css" href="../theme/default/fui.all.css">
<style>
.test1 {
background: red;
}
.test2 {
background: blue;
}
.test3 {
background: green;
}
.test4 {
background: cyan;
}
.test5 {
background: #000;
opacity: 0.3;
}
body>button {
margin: 100px;
}
body>.div {
border: 5px solid #c3c3c3;
display: inline-block;
width: 200px;
height: 200px;
margin: 100px;
}
</style>
<script src="../dev-lib/jhtmls.min.js"></script>
<script src="../dev-lib/jquery-1.11.1.js"></script>
<script src="../dev-lib/dev-define.js"></script>
<script>
inc.config({
base: '../src'
});
</script>
<script src="../dev-lib/exports.js"></script>
<script src="../dev-lib/dev-start.js"></script>
<script>
window.onload = function () {
var panels = FUI.Creator.parse( [ {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test1',
layout: 'left'
}, {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test2',
layout: 'top'
}, {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test3',
layout: 'right'
}, {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test4',
layout: 'bottom'
}, {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test5',
resize: 'none',
layout: 'left-top'
}, {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test5',
resize: 'none',
layout: 'left-bottom'
}, {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test5',
resize: 'none',
layout: 'right-top'
}, {
clazz: 'PPanel',
width: 50,
height: 50,
className: 'test5',
resize: 'none',
layout: 'right-bottom'
} ] );
panels[ 0 ].positionTo( document.getElementById( "test1" ) )
panels[ 0 ].show();
panels[ 1 ].positionTo( document.getElementById( "test2" ) )
panels[ 1 ].show();
panels[ 2 ].positionTo( document.getElementById( "test3" ) )
panels[ 2 ].show();
panels[ 3 ].positionTo( document.getElementById( "test4" ) )
panels[ 3 ].show();
panels[ 4 ].positionTo( document.getElementById( "div1" ) )
panels[ 4 ].show();
panels[ 5 ].positionTo( document.getElementById( "div2" ) )
panels[ 5 ].show();
panels[ 6 ].positionTo( document.getElementById( "div3" ) )
panels[ 6 ].show();
panels[ 7 ].positionTo( document.getElementById( "div4" ) )
panels[ 7 ].show();
};
</script>
</head>
<body>
<h1>Positioning Panel 示例</h1>
<button id="test1">left</button>
<button id="test2">top</button>
<button id="test3">right</button>
<button id="test4">bottom</button>
<div id="div1" class="div">left-top</div>
<div id="div2" class="div">left-bottom</div>
<div id="div3" class="div">right-top</div>
<div id="div4" class="div">right-bottom</div>
</body>
</html>