javascript面向对象系列第四篇——选项卡的实现

前面的话

　　面向对象的应用并非只是读几本书那么容易，需要有大量的工程实践做基础才能真正理解并学会使用它。本文将用面向对象的技术来制作一个简单的选项卡

 

图示说明

 　　由图示结果看到，这是一个非常简单的选项卡。三个控制按钮利用点击事件分别控制三张不同的选项卡。选项卡用文字和背景颜色区分，控制按钮用轮廓outline区分

 

HTML代码

　　【1】使用行间样式来引入CSS的扩展性不高，需要根据实际情况谨慎使用

　　【2】在a标签中使用javascript:;来阻止默认的页面跳转行为

　　【3】给最外层div元素设置id属性便于外层元素获取，为选项卡和控制按钮使用不同的标签ul和nav，便于内层元素获取

<div class="box" id="box">
    <ul class="list">
        <li class="in_active" style="background-color: lightgreen">第一张选项卡</li>
        <li class="in" style="background-color: lightblue">第二张选项卡</li>
        <li class="in" style="background-color: pink">第三张选项卡</li>
    </ul>
    <nav class="conList">
        <a class="con_active" href="javascript:;">第一个控制按钮</a>
        <a class="con" href="javascript:;">第二个控制按钮</a>
        <a class="con" href="javascript:;">第三个控制按钮</a>
    </nav>    
</div>

 

CSS代码 

　　【1】为body、ul和a标签进行默认样式重置

　　【2】为当前选项卡设置in_active类名，设置display:block

　　【3】为当前控制按钮设置con_active类名，设置outline: 1px solid black

body{margin: 0;}
ul{
    margin:0;
    padding: 0;
    list-style: none;
}
a{
    color: inherit;
    text-decoration: none;
}
.box{
    width: 500px;
    text-align: center;
}
/*in为选项卡普通状态，默认不显示*/
.in,.in_active{
    display: none;
    height: 100px;
    font-size: 50px;
    line-height: 100px;
}
/*in_active为选项卡选中状态，选中后显示*/
.in_active{
    display: block;
}
.conList{
    text-align: center;
    line-height: 30px;
}
/*con为按钮普通状态，默认无轮廓*/
.con,.con_active{
    outline:0;
}
/*con_active为按钮选中状态，选中后有1px的黑色轮廓*/
.con_active{
    outline: 1px solid black;    
}        

 

javascript代码

　　使用最常用的组合模式来创建对象，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性，并且向构造函数传递选项卡对象参数

　　【1】关于元素获取、变量设置和事件绑定都在构造函数中实现，作为实例属性

　　【2】定义一个切换方法switch，进行选项卡和控制按钮的同时切换，作为原型方法

　　【3】把获取到的选项卡对象oBox作为参数传递到构造函数中

//构造函数
function Tab(obj){
    /*元素获取*/
    //获取选项卡展示部分
    this.oList = obj.getElementsByTagName('ul')[0];
    this.aIn = this.oList.getElementsByTagName('li');
    //获取选项卡控制部分
    this.oConList = obj.getElementsByTagName('nav')[0];
    this.aCon = this.oConList.getElementsByTagName('a');
    /*变量设置*/
    //选项卡张数
    this.count = this.aIn.length;
    //当前第几张
    this.cur = 0;
    var _this = this;
    for(var i = 0; i < this.count; i++){
        //设置索引
        this.aCon[i].index = i;
        //给按钮添加事件
        this.aCon[i].onclick = function(){
            _this.cur = this.index;
            _this.switch();
        }
    }
}
//原型方法
Tab.prototype.switch = function(){
    //去掉所有
    for(var i = 0; i < this.count; i++){
        this.aIn[i].className = 'in';
        this.aCon[i].className = 'con';
    }
    //显示当前
    this.aIn[this.cur].className = 'in_active';
    this.aCon[this.cur].className = 'con_active';    
}
//获取选项卡元素
var oBox = document.getElementById('box');
//构造选项卡对象
var tab1 = new Tab(oBox);

 

最后

　　这是面向对象系列的最后一篇了，本系列的博文主要参照《javascript高级程序设计》和《javascript面向对象精要》。个人感觉《javascript权威指南》中的面向对象部分写得过于生涩和追求完整，很多例子都过于庞大，实在是难以消化，故借鉴较少。也由于我才疏学浅，看不懂其中奥妙，可能再经过一段时间学习才能品出其中味道

　　最难的部分终于啃完