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

原创 2015年11月17日 18:00:50
<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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

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

new title

带有上下翻页跳转的DataGrid控件

  • 2008年11月04日 16:56
  • 28KB
  • 下载

html之动态添加控件实现轮播

最近做一个轮播功能 上图用红框标的就是要实现的轮播功能, 先是写静态页面 轮播图片数量可自行增减 --> 20元生日福袋优惠券 20元端午福袋优惠券- 10元...
  • iOSbird
  • iOSbird
  • 2017年06月12日 09:23
  • 381

Html/javascript动态添加/删除input控件到地址定位置

Html/javascript动态添加/删除input控件到地址定位置 发布 另存 成果基本信息修改: 成果名:成果位置: ...
  • dusea
  • dusea
  • 2015年09月01日 11:18
  • 1042

html 页面控件动态添加和删除

1.dynamicAddRemover.js /** * dynamicAddRemover.js * @author: Zhongy * @version: 0.0.3 */ ...

在ASP.NET中动态加载内容 用户控件和模板(转http://www.da8848.cn/article/jiaocheng/NET/3838.html)

在ASP.NET中动态加载内容(用户组件和模板)要点:1. 使用Page.ParseControl2. 使用base.LoadControl第一部分:加载模板 下面是一个模板“...

在MFC中使用Tab Control控件实现分页显示和跳转

在MFC中使用Tab Control控件实现分页显示和跳转: 1、首先创建一个对话框应用程序。 2、在该对话框上添加Tab控件,然后利用类向导,给Tab控件添加一个Control成员变量m_tab...

webBrowser控件操作动态html

  • 2011年09月28日 13:07
  • 496KB
  • 下载

ASP.NET GridView控件实现分页跳转功能

最近刚刚接触ASP.NET开发,自己做一个小网站,用到了GridView控件的分页,但是触发不了IndexPageChanging事件,查找了很多资料,好不容易解决了,写一下我的使用心得; 注意:源码...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:普元日记--动态添加控件跳转页(shutcut.html)
举报原因:
原因补充:

(最多只允许输入30个字)