AppCan基础——主窗口 & 辅窗口机制_appcan 浮动窗口 position:fixed-CSDN博客

1、主窗口 & 辅窗口机制

常用的手机应用(App)设计界面，都分为top，content，bottom三块区域，但是在android2.1以下，ios4以下版本的webkit存在如下问题：

不支持div滚动条

Css样式的{position:fixed}属性不支持

Iframe在任何情况下都全屏显示

因此，WidgetOne平台扩展Window布局，将一个Window分割为top，main，bottom三个frame，其示意图如下：

如此分割的window由3部分组成：主Frame -Normal和两个兄弟Frame –Top、Bottom。在UI层次上Normal，Top，Bottom是平级的，都分别在window上占据一块不同的区域。在数据结构上，Top和Bottom是平级的，都属于Normal的子Frame即SlibingFrame。Top和Bottom不能单独存在于屏幕，它们的加载必须由Normal来驱动。
每个Frame都有一个type属性，用于标识此frame的类型(Normal、Top、Bottom)详情请见常量表的Window Types。每open一个新的window时都会初始化一个Normal，Normal初始化时占据整个window。每个window都有一个name属性，用于识别window，name由操作者open此window时传入。应用初始化的时候会初始化一个根window，此window的name为"root"，不可更改，其他open出来的window也不能命名为"root"，根window不能被close。
Window下的每个Frame在完成网页加载及渲染时会通过window.uexOnload函数发出finish消息。
Window下的一个Frame即为一个View，SlibingFrame Top和SlibingFrame Bottom即为主Frame的两个子View。子View不能单独存在于设备屏幕。Window初始化的时候会初始化主Frame但不会初始化子View，子View必须由主Frame通过OpenSlibing函数（详见uexWindow API 文档）加载到屏幕。
OpenSlibing函数执行过程中，子View在完成网页加载及渲染时会通过window.uexOnload函数发出finish消息。在show到屏幕上之后会通过window.uexOnshow函数发出show消息。
子View可被它本身所在window的主Frame关闭，详见uexWindow API 文档中CloseSlibing函数。一个window不能关闭另一个window的子View。
那么，怎么抒写这种主窗口+子view的html代码呢？
利用IDE框架搭建页面，页面默认引入<script src="js/zy_control.js"></script>，只需调用zy_control.js中的方法function zy_fix(header,footer,run,cb)，就可实现主窗口+子view的机制。在html页面中，如是写代码即可：

<script>
　　zy_fix("header","footer",0,function(){
　　　　//dosomething
　　});
</script>

其中：
"header"：为需要拆分为top的子view的div的id值
"footer"：为需要拆分为bottom的子view的div的id值。
"run"为在多page情况下，需要保证其它page同样具有主窗口+子view的机制，这里默认为0。
"cb"：作用是执行一内部方法，由于在IDE模拟器中和symbian并不需要如此拆分窗口（因为IDE模拟器和symbian支持fix属性），因此，通过判断是否是IDE模拟器和symbian版本，直接去执行其它操作。
注：如果主窗口的div需要带滚动条，那么必须写css属性overflow:scroll;
另外，在主窗口+子view机制中，其实top和bottom也是一个window，那么直接把id为header的div的outHTML代码赋给一个window，这过程并没有把css赋给此window，因此，还需要给此window引入样式。一般的做法就是把样式文件单独写在css文件中，单独构建一个head.html文件，用来加载css样式文件。在UI框架中已提供了head.html文件，其代码如下：

<!DOCTYPE html>
<html class="ui-mobile landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
　　<head>
　　　　<title></title>
　　　　<meta charset="utf-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
　　　　<link rel="stylesheet" href="css/ui-base.css">
　　　　<link rel="stylesheet" href="css/ui-apple.css">
　　　　<script src="js/zy_anim.js"></script>
　　　　<script src="js/zy_control.js"></script>
　　</head>
　　<body class="ui-mobile-viewport">