javascript面向对象系列第四篇——选项卡的实现
2016-08-14 17:03
501 查看
前面的话
面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它。本文将用面向对象的技术来制作一个简单的选项卡图示说明
由图示结果看到,这是一个非常简单的选项卡。三个控制按钮利用点击事件分别控制三张不同的选项卡。选项卡用文字和背景颜色区分,控制按钮用轮廓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权威指南》中的面向对象部分写得过于生涩和追求完整,很多例子都过于庞大,实在是难以消化,故借鉴较少。也由于我才疏学浅,看不懂其中奥妙,可能再经过一段时间学习才能品出其中味道最难的部分终于啃完
相关文章推荐
- javascript面向对象系列第三篇——实现继承的3种形式
- javascript面向对象系列第四篇——OOP中的常见概念
- [翻译]javascript学习笔记 (四)-面向对象的实现
- JavaScript面向对象之属性实现
- javascript面向对象的方式实现的弹出层效果代码
- JavaScript内核系列 第8章 面向对象的JavaScript(上)
- javascript之通用简单的table选项卡实现(二)
- 调试工具系列--javascript的追踪者(tracer)实现
- Javascript选项卡的实现
- JAVASCRIPT实现绚丽TAB选项卡
- javascript面向对象,实现namespace,class,继承,重载
- javascript 实现的美丽选项卡
- javascript实现表现、结构、行为分离的选项卡效果!
- 面向对象的JavaScript 五 ----- Javascript实现继承的方式(2)
- 面向对象的JavaScript 四 ----- Javascript实现继承的方式(1)
- javascript面向对象的方式实现的弹出层效果代码
- 用javascript实现的不错的一款网页选项卡
- JavaScript系列:面向对象 (好东西保存了)
- 浅谈javascript的面向对象(一)如何实现类
- javascript 通用简单的table选项卡实现