1 概述
需求：
- 把上下两个模块固定如第三张图所示效果，只有中间两个饼图能自由上下滑动；
- 把下面的tab固定好之后，也要把它调整得充满左右两边的空白处，效果如第三张图所示。现在这个效果我是用电子表格的自适应来做的，我已经使它尽量充满两边了，可是在移动端展示时还是会显示不充满。
...
- 准备基础 HTML 模板（下载： demos.html ）
2.修改以layout开头的布局元素的样式
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" valign="top" style="background-image:url(img/1.png);background-repeat:no-repeat;"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0" valign="top" > <tr id = 'paramPanelTr'> <td width="100%" colspan="2" align="center" bofid='paramPanel'></td> </tr> </table></td> </tr> <tr height="100%"> <td> <div class="_viewdiv" id='_viewdiv_' style="width: 100%; height: 100%; left: 0px; top: 0px; overflow: auto;"> <table width="100%" height="100%" cellspacing="0" cellpadding="0" valign="top" > <tr height="100%"> <td width=100% valign="top" bofid="layout0" class="layout_0"></td> <td width=100% valign="top" bofid="layout1" class="layout_1"></td> <td width=100% valign="top" bofid="layout2" class="layout_2 |
...
"></td>
</tr>
</table>
</div></td>
</tr>
</table>
<script type="text/javascript">
var domutils = jsloader.resolve("freequery.lang.domutils");
var isMobile = domutils.isMobile();
if(isMobile == true){
$(".layout_0").css({
"width":"100%",
"height": "54px",
"position":"fixed",
"left":0,
"top": 0,
"z-index":2,
"background":"#FFFFFF"
});
$(".layout_1").css({
"width":"100%",
"height":"auto",
"position":"absolute",
"left":0,
"top": "54px",
"z-index":1
});
$(".layout_2").css({
"width":"100%",
"height":"51px",
"position":"fixed",
"left":0,
"bottom": "-5px",
"z-index":2,
"background":"#0E63AF"
});
}
</script>
|
