1 概述
需求:
- 把上下两个模块固定如第三张图所示效果,只有中间两个饼图能自由上下滑动;
- 把下面的tab固定好之后,也要把它调整得充满左右两边的空白处,效果如第三张图所示。现在这个效果我是用电子表格的自适应来做的,我已经使它尽量充满两边了,可是在移动端展示时还是会显示不充满。
...
- 制作移动端的POC页面,顶部显示部分固定在页面顶部,尾部菜单部分固定在页面底部,当上下滑动页面时,只有中间两个饼图仪表能自由滑动。
- 移动端展示时实现下面菜单部分左右充满。效果如图:
...
- 使用HTML模板布局:见https://history.wiki.smartbi.com.cn/pages/viewpage.action?pageId=21955317
- HTML实现顶部和尾部固定定位,中间内容部分绝对定位。
2 实现步骤
- 准备基础 HTML 模板(下载: demos.html )
...
代码块 | ||||||
---|---|---|---|---|---|---|
| ||||||
<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(); //添加设备判断,避免固定定位对PC端显示造成影响 if(isMobile){ $(".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> |
3.Android APP上查看效果