javascript控件开发之工具栏控件

在前几篇的基础上，本篇将开发工具栏控件，工具栏控件一般包括三部份，

1、toolBar控件，简单说就是工具栏容器，

2、toolButton控件，即工具栏上的按钮控件，该按钮控件包括图标和文字两部份，

3、则是分隔符控件，一般分隔符控件也是在toolButton控件基础上引申出来的，

为了简单易学，我们这里直接用上一篇的控件作为toolBar控件使用，也就是我们这次编写出来的toolButton控件直按放一Panel控件上，

首先在component\ui\文件夹下添加控件文件，com.ui.toolButton.js 如下，

定义com.ui.toolButton控件类，继承com.ui.panel控件。

/**
 * 按钮控件类.
 * 创建: QZZ
 * 日期: 2014-04-06
 */
(function(undefined) {

 nameSpace("com.ui");

 com.ui.toolButton = Extend(com.ui.panel, {
    /**
     * 创建函数.
     */
    create:function(){
        this.base();
        this.className = "com.ui.toolButton";
        this.logInfo("create");
    }，
    /**
    * 渲染函数.
    */
    render:function() {

    }
 });
})();

渲染函数如下，把渲染方式默认为“alLeft”，添加一个type属性,用于区别split控件或button控件，分别进行渲染。

1. split控件，则直接创建一个div,设置样式，然后宽度设置为8px;

2. button控件 则创建一个table，分三层次， 第一层用于设置高度，第二层用于放图标，第三层次用于放文字，图标与文字都通过配置方式获得。

  /**
   * 渲染函数.
   */
  render:function(){
      this.base();
      this.setAlign("alLeft");
      if(this.option.type === "split") {
         this.setWidth(8);
         this.setStyle(this.win, "toolButtonSplitStyle");
         var splitDiv = this.createElement("div");
         this.setStyle(splitDiv,"toolSplitStyle");
         this.win.appendChild(splitDiv);
      } else {
         //初始化caption
         this.caption = this.win.innerHTML;
         if(this.option.icon != null) {
             this.tabIcon = this.createElement("table");
             this.setStyle(this.tabIcon, "toolIconTabStyle");
             this.topCol = this.tabIcon.insertRow(0).insertCell(0);
             this.topCol.style.height = "1px";
             var col = this.tabIcon.insertRow(1).insertCell(0)
             col.innerHTML = '<img src="'+this.option.icon
                +'" style="width: 18px; height: 18px;"></img>';
             this.setStyle(col, "toolIconTdStyle");
             col = this.tabIcon.insertRow(2).insertCell(0);
             col.innerHTML = this.caption;
             this.setStyle(col, "toolIconTdStyle");
             this.win.innerHTML = "";
             this.win.appendChild(this.tabIcon);
         }
         this.setStyle(this.win, "toolButtonCommonStyle");
      }
  },

函数中用到几个画边框的样式，把他们都添加到com.comStyle.css文件中，如下：

.toolButtonSplitStyle {
    border-top:0px solid #EEEEEE;
 border-left:0px solid #EEEEEE;
 border-right:0px solid #555555;
 border-bottom:0px solid #555555;
 padding-left:4px;
 position:relative;
}

.toolSplitStyle {
    border-top:0px solid #EEEEEE;
 border-left:0px solid #EEEEEE;
 border-right:1px solid #EEEEEE;
 border-bottom:0px solid #555555;
 height:40px;
 top:10px;
 width:1px;
 background-color:#555555;
 margin:auto;
 position:relative;
}

.toolIconTabStyle{
    margin:auto;
 top:10px;
}

.toolIconTdStyle {
    text-align:center;
 height:16px;
}

.toolButtonCommonStyle {
    border-top:0px solid #EEEEEE;
 border-left:0px solid #EEEEEE;
 border-right:0px solid #555555;
 border-bottom:0px solid #555555;
 position:relative;
 text-align:center;
 cursor:pointer;
}

.toolButtonOverStyle {
    border-top:1px solid #EEEEEE;
 border-left:1px solid #EEEEEE;
 border-right:1px solid #555555;
 border-bottom:1px solid #555555;
 position:relative;
 text-align:center;
 cursor:pointer;
}

.toolButtonDownStyle {
    border-top:1px solid #555555;
 border-left:1px solid #555555;
 border-right:1px solid #EEEEEE;
 border-bottom:1px solid #EEEEEE;
 position:relative;
 text-align:center;
 cursor:pointer;
}

下面继续添加按钮的相关鼠标事件、大小变化事件（doResize）和修改文字内容方法，

思路类似前前一篇的按钮控件，

  //设置显示属性
  setCaption:function(caption) {
      this.caption = caption;
      if(this.tabIcon != null) {
          this.tabIcon.rows[1].cells[0].innerHTML = '<img src="'+this.option.icon+'" style="width: 18px; height: 18px;"></img>';
          this.tabIcon.rows[2].cells[0].innerHTML = this.caption;
      } else {
          this.win.innerHTML = this.imgStr + this.caption;
      }
  },
  /**
   * 大小重置函数.
   */
  _doResize:function(el) {
      this.base(el);
      if(this.option.icon == null) {
          this.win.style.lineHeight = this.option.height + "px";
      }
  },
  /**
   * 鼠标划过事件.
   * ev 事件对象
   */
  doMouseOver:function(ev) {
       if(this.option.type === "split") {
           return;
       }
       this.setStyle(this.win, "toolButtonOverStyle");
       this.hasSelect = true;
       this.focus = true;
       this.mouseOver = true;
  },
  /**
   * 鼠标划出事件.
   * ev 事件对象
   */
  doMouseOut:function(ev) {
      if(this.option.type === "split") {
          return;
      }
      this.setStyle(this.win, "toolButtonCommonStyle");
      this.hasSelect = false;
      this.focus = false;
      this.mouseOver = false;
  },
  /**
   * 鼠标按下事件.
   * ev 事件对象
   */
  doMouseDown:function(ev) {
      if(this.option.type === "split") {
          return;
      }
      this.setStyle(this.win, "toolButtonDownStyle");
      this.topCol.style.height = "2px";
  },
  /**
   * 鼠标弹起事件.
   * ev 事件对象
   */
  doMouseUp:function(ev) {
      if(this.option.type === "split") {
          return;
      }
      if(this.mouseOver) {
          this.setStyle(this.win, "toolButtonOverStyle");
          this.topCol.style.height = "1px";
          if(typeof this.onClick == "function") {
             //执行onclick事件
              this.onClick(ev);
          }
      }
  }

到此，控件已编写完成，下面我们用它来编写例子，如test.html文件，

<!DOCTYPE html>
  <head><title>test</title>
    <script src="../script/common/init.js" type="text/javascript"></script>
  </head>
  <body code="controllor/test.js" scroll="no" style="overflow:hidden">
    <div id='test6' code='com.ui.panel' option='{"align":"alTop","height":"60","width":"200","borderWidth":1,"padding":1}'>
     <div id='test8' code='com.ui.toolButton' option='{"height":"60","width":"60","icon":"image/test3.ico"}'>确定</div>
  <div id='test9' code='com.ui.toolButton' option='{"height":"60","width":"60","icon":"image/test2.ico"}'>取消</div>
  <div id='test10' code='com.ui.toolButton' option='{"height":"60","width":"60","type":"split"}'></div>
  <div id='test11' code='com.ui.toolButton' option='{"height":"60","width":"60","icon":"image/test1.ico"}'>退出</div>
 </div>
 <div id='test1' code='com.ui.panel' option='{"align":"alTop","height":"40","width":"200","borderWidth":1,"padding":1}'></div>
 <div id='test4' code='com.ui.panel' option='{"align":"alBottom","height":"50","width":"200","borderWidth":1,"padding":1}'>
  <div id='test2' code='com.ui.button' option='{"height":"25","width":"100","top":"12","right":"116"}'></div>
     <div id='test3' code='com.ui.button' option='{"height":"25","width":"100","top":"12","right":"8"}'></div>
 </div>
 <div id='test7' code='com.ui.panel' option='{"align":"alLeft","height":"100","width":"200","borderWidth":1,"padding":1}'></div>
 <div id='test5' code='com.ui.panel' option='{"align":"alClient","height":"100","width":"200","borderWidth":1,"padding":1}'></div>

  </body>
</html>

其中test.html文件目录下添加image文件夹，并把图标放在文件夹下面，

效果如上图，

可直接下载附件查看源码。

请关注下一篇， javascript控件开发之流动条控件

javascript控件开发之工具栏控件,布布扣,bubuko.com