目录

容器（Div）

功能说明

容器布局支持三种方式VBOX、HBOX、RELATIVE，通过设置不同布局及相关的样式来达到任意风格手机界面的展示效果，使用BOX布局架构可以更容易更方便的适配不同分辨率不同屏幕尺寸的手机。

HTML5

属性列表

支持公共属性
参见公共属性说明

事件列表

实例

1、容器支持边框线和圆角设置

把自由布局容器拖入到页面，设置容器的边宽宽度和颜色及边角半径。

<div id="viewPage0">
    <div id="panel0">
    <label id="label0">和</label>
    </div>
    <div id="panel1">
    <label id="label1">和</label>
    </div>
    <div id="panel2">
    <label id="label2">和</label>
    </div>
</div>

 #New_window7 {
halign: center;
height: fill;
layout: vbox;
width: fill;
valign: TOP;
}
 #viewPage0 {
halign: center;
height: fill;
layout: vbox;
background: #0080ff;
width: fill;
valign: TOP;
}
 #panel0 {
border-bottom-width: 3;
halign: CENTER;
border-radius: 60;
width: 120;
border-bottom-color: #ff00ff;
border-top-width: 1;
border-left-color: #008080;
border-top-color: #ff00ff;
height: 120;
border-right-color: #ff0080;
layout: hbox;
border-right-width: 2;
valign: center;
border-left-width: 3;
}
 #label0 {
halign: center;
height: wrap;
widthWrap: 23.0;
color: #ffffff;
heightWrap: 31.0;
font-size: 22;
width: wrap;
font-family: default;
valign: center;
}
 #panel1 {
border-bottom-width: 5;
halign: CENTER;
border-radius: 20;
width: 120.0;
border-bottom-color: #800040;
border-top-width: 8;
border-left-color: #8080ff;
border-top-color: #000000;
height: 200;
border-right-color: #ff0000;
layout: hbox;
border-right-width: 7;
margin-top: 15;
valign: center;
border-left-width: 5;
}
 #label1 {
halign: center;
height: wrap;
widthWrap: 23.0;
color: #ffffff;
heightWrap: 31.0;
font-size: 22;
width: wrap;
font-family: default;
valign: center;
}
 #panel2 {
border-top-color: #8080ff;
border-left-color: #ff80c0;
halign: CENTER;
height: 60.0;
layout: hbox;
width: 120.0;
margin-top: 15;
valign: center;
border-left-width: 10;
border-top-width: 10;
}
 #label2 {
halign: center;
height: wrap;
widthWrap: 23.0;
color: #ffffff;
heightWrap: 31.0;
font-size: 22;
width: wrap;
font-family: default;
valign: center;
}

2、容器上滑、下滑、左滑、右滑、双击事件

如何对控件增加事件
选中容器控件，点下图的增加在弹出窗口选择相应的事件。

Handler:中写入动作，如this.ondoubletap()，记得一定要写上括号；
Demo演示上划、下滑、左滑、右滑、双击事件让容器变化颜色

function com$requirements$SignalController$ondouble(sender, args) {
    $alert("双击变蓝色");
    $id("panel0").set("background", "#0080ff");
}
function onswipeup(sender, args) {
    $alert("上滑变了绿色");
    $id("panel0").set("background", "#00ff40");
}
function down(sender, args) {
    $alert("下滑变了紫色");
    $id("panel0").set("background", "#8080ff");
}
function left(sender, args) {
    $alert("左滑变黄色");
    $id("panel0").set("background", "#ffff00");
}
function com$requirements$SignalController$right(sender, args) {
    $alert("右滑变黑色");
    $id("panel0").set("background", "#000000");
}