javascript面向對象系列第四篇——選項卡的實現 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　面向對象的應用并非只是讀幾本書那么容易，需要有大量的工程實踐做基礎才能真正理解并學會使用它。本文將用面向對象的技術來制作一個簡單的選項卡

圖示說明

　　由圖示結果看到，這是一個非常簡單的選項卡。三個控制按鈕利用點擊事件分別控制三張不同的選項卡。選項卡用文字和背景顏色區分，控制按鈕用輪廓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權威指南》中的面向對象部分寫得過于生澀和追求完整，很多例子都過于龐大，實在是難以消化，故借鑒較少。也由于我才疏學淺，看不懂其中奧妙，可能再經過一段時間學習才能品出其中味道

　　最難的部分終于啃完

文章列表