首页 > 代码库 > javascript控件开发之工具栏控件

javascript控件开发之工具栏控件

2024-07-09 08:45:57   224人阅读

 在前几篇的基础上，本篇将开发工具栏控件，工具栏控件一般包括三部份，
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=http://www.mamicode.com/"'+this.option.icon>


函数中用到几个画边框的样式，把他们都添加到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=http://www.mamicode.com/"'+this.option.icon+'" style="width: 18px; height: 18px;">';>


到此，控件已编写完成，下面我们用它来编写例子，如test.html文件，
<!DOCTYPE html>  <head><title>test</title>    <script src=http://www.mamicode.com/"../script/common/init.js" type="text/javascript"></script>>


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

效果如上图，
可直接下载附件查看源码。
请关注下一篇， javascript控件开发之流动条控件


联系
我们