蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 38|回复: 0

JavaScript组件开发完整示例

[复制链接]

1923

主题

1

好友

1591

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 6 天前 |显示全部楼层
    JavaScript组件开发完整示例
    本文实例讲述了JavaScript组件开发的技巧。分享给大家供大家参考,具体如下:
    使用JavaScript,按照面向对象的思想来构建组件。
    现以构建一个TAB组件为例。
    从功能上讲,组件包括可视部分和逻辑控制部分;从代码结构上讲,组件包括代码部分和资源部分(样式、图片等)。
    组件的特点:高内聚,低耦合(不与其他代码逻辑交叉,可以继承,包含);封装性(隐藏私有方法和变量);可重用性(可反复多次使用,用来组装更复杂的应用)。


    lt;htmlgt;
    lt;headgt;
    lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"gt;
    lt;titlegt;JS 组件lt;/titlegt;
    lt;stylegt;
    TabControl{
    position:absolute;
    }
    TabControl tab-head{
    height:22px;width:100%;
    /* border-left: solid 0px e0e0e0;border-right: solid 0px e0e0e0;border-top: solid 0px e0e0e0;border-bottom: solid 1px e0e0e0; */
    position:absolute;
    z-index:9;
    }
    TabControl ul{
    position:absolute;
    top:2px;
    padding:0px;
    margin:0px;
    z-index:10;
    }
    TabControl li{
    list-style:none; /* 将默认的列表符号去掉 */
    padding-left:10px; padding-right:10px;
    margin:0;
    float:left;
    border: solid 1px e0e0e0;
    background-color:ffffff;
    height:20px;
    cursor:default;
    }
    TabControl liselected{
    border-bottom: solid 1px ffffff;border-top: solid 1px ff0000;
    z-index:10;
    }
    TabControl liunselected{
    border-bottom: solid 1px e0e0e0;border-top: solid 1px e0e0e0;
    z-index:10;
    }
    TabControl pageSelected{
    position:absolute;
    display:block;
    border: solid 1px e0e0e0;
    width:100%;height:100%;
    z-index:1;
    top:23px;
    }
    TabControl pageUnSelected{
    display:none;
    border: solid 1px e0e0e0;
    width:100%;height:100%;
    z-index:1;
    top:23px;
    }
    lt;/stylegt;
    lt;/headgt;
    lt;bodygt;
    lt;script lang="javascript"gt;
    var TabControl = function(width, height){
      var me = this;
      //TAB控件容器,头,列表
      var cbody,tabHead, ul;
      //最后选中的TAB页
      var lastSelectedPage = 0;
      //TAB页管理容器
      var pages = [];
      /**
       * 初始化函数
       * param{tabCount}, 创建tab页的个数
       */
      meinit = function(tabCount){
       //创建TAB容器
       cbody = documentcreateElement("DIV");
       cbodyclassName = "TabControl";
       cbodystylewidth = width || "400px";
       cbodystyleheight = height || "300px";
       //创建TAB控件头
       tabHead= documentcreateElement("DIV");
       tabHeadclassName = "tab-head";
       cbodyappendChild(tabHead);
       //创建TAB头
       ul = documentcreateElement("UL");
       tabHeadappendChild(ul);
       //根据参数初始化TAB页,缺省创建2个TAB页
       var tc = tabCount || 2;
       for(var i=0;ilt;tc;i++){
        meinsertPage(i,"tabPage" + i)
       }
       //缺省选中第一页
       meselectPage(0);
      }
      /**
       * 插入TAB页
       * param{idx},插入位置
       * param{title},TAB页标题
       *
       */
      meinsertPage = function(idx,title){
       if(parseInt(idx)gt;=0){
         var li = documentcreateElement("LI");
         liclassName = "unselected";
         liinnerText = title;
         var chd = ulchildNodes[idx];
         ulinsertBefore(li);
         lionclick = function(){
          meselectPage(getSelectedIndex(li));
         }
         //创建page
         var page = documentcreateElement("DIV");
         pageclassName = "pageUnSelected";
         pagespush(page);
         cbodyappendChild(page);
        }
      }
      /*
       * 内部函数
       * 根据选中的对象,获取对应的TAB页索引
       */
      function getSelectedIndex(li){
       var chd = ulchildNodes;
       for(var i=0;ilt;chdlength;i++){
        if(chd[i] == li){
         return i;
        }
       }
      }
      /**
       * 选中某页
       * param{idx},选中页的索引
       */
      meselectPage = function(idx){
       if(parseInt(idx)gt;=0){
        var lis = ulchildNodes;
        alert(lastSelectedPage + ',' + idx);
        lis[lastSelectedPage]className = "unselected";
        lis[idx]className = "selected";
    /*
        for(var i=0;ilt;lislength;i++){
         if( i== idx){
          lis[i]className = "selected";
         } else{
          alert('B:'+ i + ',' + lis[idx]innerText);
          lis[i]className = "unselected";
         }
        }
    */
        //隐藏无需显示的TAB页,显示选中的TAB页
        pages[lastSelectedPage]className = "pageUnSelected";
        pages[idx]className = "pageSelected";
        lastSelectedPage = idx;
       }
      }
      //在函数尾部调用初始化函数执行初始化
      meinit();
      //最后返回DOM对象
      return cbody;
    }
    var tabControl = new TabControl();
    documentbodyappendChild(tabControl);
    lt;/scriptgt;
    lt;/bodygt;
    lt;/htmlgt;



    最终效果如图:

    希望本文所述对大家JavaScript程序设计有所帮助。
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-19 07:43

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部