你的位置:首页 > Java教程

[Java教程]javascript面向对象系列第四篇——选项卡的实现


前面的话

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

 

图示说明

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

 

HTML代码

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

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

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

<div id="box">  <ul >    <li >第一张选项卡</li>    <li >第二张选项卡</li>    <li >第三张选项卡</li>  </ul>  <nav >    <a href="javascript:;">第一个控制按钮</a>    <a href="javascript:;">第二个控制按钮</a>    <a 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权威指南》中的面向对象部分写得过于生涩和追求完整,很多例子都过于庞大,实在是难以消化,故借鉴较少。也由于我才疏学浅,看不懂其中奥妙,可能再经过一段时间学习才能品出其中味道

  最难的部分终于啃完