关闭

普元日记---动态添加的控件(index.html)

175人阅读 评论(0) 收藏 举报
分类:
       <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="HBox_1" layout="HBox" height="120" width="100%"  >
       
   <div id="HBox_1_1" layout="VBox" width="120" vAlign="middle" height="120" hAlign="center">
   <div id="HBox_1_1_imgDiv" width="100%" vAlign="middle" hAlign="center" >
      <img src="/HomeIcon/rar.png" width="40" height="40"></img>
   </div>
   <div id="HBox_1_1_labelDiv" width="100%" vAlign="middle" hAlign="center"  >
       <input type="label" value="通知公告" marginTop="10"/>
   </div>
</div>


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

<div id="HBox_2_2" layout="VBox" width="120" vAlign="middle" height="120" hAlign="center">
   <div id="HBox_2_2_imgDiv" width="100%" vAlign="middle" hAlign="center" >
      <img src="/HomeIcon/rar.png" width="40" height="40"></img>
   </div>
   <div id="HBox_2_2_labelDiv" width="100%" vAlign="middle" hAlign="center"  >
       <input type="label" value="删除" marginTop="10"/>
   </div>
</div>
 
               </div>
        --> 


<!-- *******************中间白线****************** -->
<div id="line1"  width="100%" height="1"  backgroundColor="#ECEEF0" >
</div>
     


</div>
   <!-- ************工作项视图end********** -->
    
</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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:38596次
    • 积分:1645
    • 等级:
    • 排名:千里之外
    • 原创:122篇
    • 转载:14篇
    • 译文:8篇
    • 评论:2条