普元日记--动态添加控件跳转页（shutcut.html）

来源：互联网发布：java 读文件为字符串编辑：程序博客网时间：2024/05/20 23:32

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>new title</title>
</head>


<body>

<div layout="VBox" width="100%" height="100%">

<div id="testdiv" width="100%" height="50" hAlign="center" vAlign="middle" >
<input type="label" value="工作台" fontBold="true" fontSize="20"/>
</div>

<div width="100%" height="1" backgroundColor="#ECEEF0" >
</div>


<div id="bigPanel" layout="VBox" width="100%">



<div id="line1" width="100%" height="1" backgroundColor="#ECEEF0" >
</div>

</div>


</div>

</body>
<script>

/**
*页面载入事件
*创建4个水平布局父容器
*/
var line1,line2,line3,line4;
$M.page.addEvent("onLoad",function(){
HBox_1 = new $M.Panel();
HBox_1.setLayout("HBox");
HBox_1.setWidth(360);
HBox_1.setHeight(120);
bigPanel.add(HBox_1); //添加到父容器中

line1=new $M.Panel(); //分隔线
line1.setWidth(360);
line1.setHeight(1);
line1.setBackgroundColor("#ECEEF0");
line1.setVisibility(false);
bigPanel.add(line1);

HBox_2 = new $M.Panel();
HBox_2.setLayout("HBox");
HBox_2.setWidth(360);
HBox_2.setHeight(120);
bigPanel.add(HBox_2); //添加到父容器中

line2=new $M.Panel(); //分隔线
line2.setWidth(360);
line2.setHeight(1);
line2.setBackgroundColor("#ECEEF0");
line2.setVisibility(false);
bigPanel.add(line2);

HBox_3 = new $M.Panel();
HBox_3.setLayout("HBox");
HBox_3.setWidth(360);
HBox_3.setHeight(120);
bigPanel.add(HBox_3); //添加到父容器中

line3=new $M.Panel(); //分隔线
line3.setWidth(360);
line3.setHeight(1);
line3.setBackgroundColor("#ECEEF0");
line3.setVisibility(false);
bigPanel.add(line3);

HBox_4 = new $M.Panel();
HBox_4.setLayout("HBox");
HBox_4.setWidth(360);
HBox_4.setHeight(120);
bigPanel.add(HBox_4); //添加到父容器中

line4=new $M.Panel(); //分隔线
line4.setWidth(360);
line4.setHeight(1);
line4.setBackgroundColor("#ECEEF0");
line4.setVisibility(false);
bigPanel.add(line4);

initWorkBench();
alert("load");
});

testdiv.addEvent("onClick",function(){
//add(HBox_2,"/HomeIcon/rar.png","通知公告",true,1);
//$M.page.goTo('/shutcut.html',{String:'hello'},false);
});
/**
*接收回退到本页面时传来的参数
*/

$M.page.addEvent('onBack', function(data)
{
initWorkBench();
alert("bak");
});

/**
*动态添加控件
*grandfather:爷辈容器
*father:父容器
*control:本身控件
*pic:img图片路径
*text:label文本值
*divideLine:是否加分隔线
*number:在本行需要添加的控件个数
*/
function add( father, pic, text, divideLine, number)
{

var HBox=new $M.Panel();
HBox = new $M.Panel();
HBox.setLayout("VBox");
HBox.setWidth(120);
HBox.setHeight(120);
HBox.setVAlign("middle");
HBox.setHAlign("center")
father.add(HBox); //添加到父容器中
//存入图片的容器
var imgDiv=new $M.Panel();
imgDiv.setLayout("VBox");
imgDiv.setWidth(40);
imgDiv.setHeight(40);
imgDiv.setVAlign("middle");
imgDiv.setHAlign("center")
HBox.add(imgDiv); //添加到父容器中
//图片控件
var img=new $M.Image();
img.setBackgroundImage(pic);
img.setWidth(40);
img.setHeight(40);
imgDiv.add(img);
//文本控件容器
var labelDiv=new $M.Panel();
labelDiv.setLayout("VBox");
labelDiv.setWidth(100);
labelDiv.setHeight(40);
labelDiv.setVAlign("middle");
labelDiv.setHAlign("center");
HBox.add(labelDiv); //添加到父容器中
//文本控件
var label=new $M.Label();
label.setMarginTop(10);
label.setValue(text);
labelDiv.add(label); //添加到父容器中
if(divideLine) //需要添加分隔线
{
HBox_1_line1=new $M.Panel(); //第一条分隔线
HBox_1_line1.setWidth(1);
HBox_1_line1.setHeight(120);
HBox_1_line1.setBackgroundColor("#ECEEF0");
father.add(HBox_1_line1); //添加到父容器中

}

}
/**
*添加+号div
*father:父容器
*/
var addVbox;
function MorePic(father)
{
addVbox=new $M.Panel();
addVbox = new $M.Panel();
addVbox.setLayout("VBox");
addVbox.setWidth(120);
addVbox.setHeight(120);
addVbox.setVAlign("middle");
addVbox.setHAlign("center")
father.add(addVbox); //添加到父容器中
//存入图片的容器
var imgDiv=new $M.Panel();
imgDiv.setLayout("VBox");
imgDiv.setWidth(40);
imgDiv.setHeight(40);
imgDiv.setVAlign("middle");
imgDiv.setHAlign("center")
addVbox.add(imgDiv); //添加到父容器中
//图片控件
var img=new $M.Image();
img.setBackgroundImage("/HomeIcon/index_grid_add.png");
img.setWidth(40);
img.setHeight(40);
imgDiv.add(img);

templine=new $M.Panel(); //临时分隔线
templine.setWidth(1);
templine.setHeight(120);
templine.setBackgroundColor("#ECEEF0");
father.add(templine); //添加到父容器中
addVbox.addEvent("onClick",function()
{
$M.page.goTo('/shutcut.html',{},false);
//alert("click addvbox");
});

}

/**
*初始化主面板
*/
function initWorkBench()
{
/**
*先清空之前添加的
*/
HBox_1.removeAll();
HBox_2.removeAll();
HBox_3.removeAll();
HBox_4.removeAll();
var preference = new $M.Preferences();
preference.open('Function_List');
/**
*因为每个水平布局当中只添加了3个垂直布局，i,表示3个垂直布局的索引
*如果一行满3个了，就需要另起一行
*/
var i=0;
for(var row=0;row<=14;row++)
{
if(preference.get(row))
{
i++;
// alert(preference.get(row).text);
if(i<=3)
{
add(HBox_1,"/HomeIcon/rar.png",preference.get(row).text,true,1);
line1.setVisibility(true);
}
else if(i>=4&&i<=6)
{
line2.setVisibility(true);
add(HBox_2,"/HomeIcon/rar.png",preference.get(row).text,true,1);
}
else if(i>=7&&i<=9)
{
line3.setVisibility(true);
add(HBox_3,"/HomeIcon/rar.png",preference.get(row).text,true,1);
}
else if(i>=10&&i<12)
{
line4.setVisibility(true);
add(HBox_4,"/HomeIcon/rar.png",preference.get(row).text,true,1);
}

}

}
if(HBox_1.getChildren().length!=6)
{
MorePic(HBox_1);
line1.setVisibility(true);
line2.setVisibility(false);
line3.setVisibility(false);
line4.setVisibility(false);
}
else if(HBox_2.getChildren().length!=6)
{
MorePic(HBox_2);
line2.setVisibility(true);
line3.setVisibility(false);
line4.setVisibility(false);
}
else if(HBox_3.getChildren().length!=6)
{
MorePic(HBox_3);
line3.setVisibility(true);
line4.setVisibility(false);
}
else if(HBox_4.getChildren().length!=6)
{
MorePic(HBox_4);
line4.setVisibility(true);
}

}

</script>
</html>

0 0