本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能。

一般封装好的选项卡程序,只需要一个div元素即可。其它元素都是通过json数据来生成,所以封装好的选项卡实例,调用非常方便。先创建一个div元素,如下所示:

<div class="tab_box" class="tabContainer"></div>

本教程不过多解释面向对象的前世今生,直接通过实例说明具体的做法。先准备好需要的json数据,等下就可以直接在实例中生成选项卡。数据代码如下所示:

var oData = [
{
label:'html',
content:'HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。'
},
{
label:'css',
content:'层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。'
},
{
label:'javascript',
content:'JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。'
},
];

现在可以按照惯例来分析功能,按步骤来编写具体代码。

1. 创建构造函数
原生javascript实例对象,一般都是通过构造函数创建的。所以生成一个选项卡的实例对象之前,先创建一个构造函数,如下所示:

//创建选项卡构造函数,elem:DOM元素;data:生成选项卡的数据;option:选项卡对象相关选项属性
function TabClass(elem,data){ }

2. 在构造函数中设置属性、创建标签和内容元素,如下所示:

function TabClass(elem,data,option){
//设置数据
this.data = data;
//设置选项卡包裹
this.wrap = elem;
//创建标签包裹
this.labelBox = document.createElement('ul');
//设置标签包裹class
this.labelBox.className = 'label_box';
//创建内容包裹
this.contentBox = document.createElement('div');
//设置内容包裹class
this.contentBox.className = 'content_box';
}

3. 在构造函数中设置默认选项属性,如切换标签的事件,默认显示第几个标签等。如下所示:

function TabClass(elem,data,option=null){

  /*...*/

  //设置默认属性
this.options = {
//默认切换标签是点击事件
event:'click',
//默认当前标签显示第一个
index:0
}
//修改选项属性
if(option instanceof Object){
for(let k in option){
this.options[k] = option[k];
}
}
}

4. 在构造函数的原型上创建creatDataElem方法。
在creatDataElem方法中,通过json数据生成标签和内容元素,并把所有元素放到包裹元素中。如下所示:

TabClass.prototype.creatDataElem = function(){
//声明标签html代码字符串变量
var sLabel = '';
//声明内容html代码字符串变量
var sContent = '';
//通过循环数据,生成标签和内容元素
this.data.forEach((e,i)=>{
//判断选项中默认当前标签和显示内容
if(i==this.options.index){
sLabel += '<li class="active" data-index="' + i + '">' + e.label + '</li>';
sContent += '<div class="content" style="display:block">' + e.content + '</div>';
}else{
//通过数据中的label属性生成标签,data-index属性是当前标签的索引,用于切换标签
sLabel += '<li data-index="' + i + '">' + e.label + '</li>';
//通过数据中的content属性生成内容
sContent += '<div class="content">' + e.content + '</div>';
}
});
//把标签和内容分别放到包裹元素中
this.labelBox.innerHTML = sLabel;
this.contentBox.innerHTML = sContent;
//把标签和内容放到外包元素中
this.wrap.appendChild(this.labelBox);
this.wrap.appendChild(this.contentBox);
}

5. 在构造函数的原型上创建init方法,用于初始化选项卡实例对象。
在init方法中,调用creatDataElem方法生成DOM元素;给标签包裹元素绑定事件,用于切换标签等。如下所示:

TabClass.prototype.init = function(){
//声明_self变量,用于在事件函数中指向实例对象
var _self = this;
//调用creatDataElem方法生成DOM元素
this.creatDataElem();
//在标签上绑定事件
this.labelBox.addEventListener(this.options.event,function(event){
//获取点击的DOM元素
var eTarget = event.target;
//判断当前点击的不是当前标签
if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'active'){
//修改当前标签
_self.options.index = eTarget.dataset.index;
//重新生成DOM元素
_self.creatDataElem();
}
});
}

6. 在TabClass构造函数中调用this.init进行初始化,如下所示:

function TabClass(elem,data,option){

  /* ...  */

  /* ...  */

  //初始化实例对象
this.init();
}

现在可以获取外包元素,并生成选项卡实例,代码如下:

var eContainer = document.getElementById('tabContainer');
new TabClass(eContainer,oData);

可以根据个人喜好编写样式实现选项卡布局,具体效果如下所示:

封装成对象之后,使用起来就非常方便,如果想要默认显示第二个标签,并绑定mouseover事件,可以添加选项,如下调用:

var eContainer = document.getElementById('tabContainer');
new TabClass(eContainer,oData,{index:1,event:'mouseover'});

原生js使用面向对象的方法开发选项卡实例教程的更多相关文章

  1. [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

    jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...

  2. 原生js拖拽功能制作滑动条实例教程

    拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能.滑动条的核心功能也就是使用js拖拽滑块来修改位置.一个完整的滑动条包括 滑动条.滑动痕迹.滑块.文本 等元素,先把html代码写出来,如下所示: ...

  3. js面向对象+一般方法的选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  5. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  6. 原生js格式化json的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 类似jQuery的原生JS封装的ajax方法

    一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装 真正的核心就是这段代码: var xhr = ne ...

  8. 原生js替换jQuery各种方法-中文版

    原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...

  9. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

随机推荐

  1. JAVA递归算法及经典递归例子 对于这个汉诺塔问题

    前言:递归(recursion):递归满足2个条件 1)有反复执行的过程(调用自身) 2)有跳出反复执行过程的条件(递归出口) 第一题:汉诺塔 对于这个汉诺塔问题,在写递归时,我们只需要确定两个条件: ...

  2. easyui中设置开始日期只能选择比结束日期小的日期,js代码获取日期的值

    $("#start_date").datebox({ onSelect: function (beginDate) { $('#end_date').datebox().dateb ...

  3. 【目标检测】基于传统算法的目标检测方法总结概述 Viola-Jones | HOG+SVM | DPM | NMS

    "目标检测"是当前计算机视觉和机器学习领域的研究热点.从Viola-Jones Detector.DPM等冷兵器时代的智慧到当今RCNN.YOLO等深度学习土壤孕育下的GPU暴力美 ...

  4. Java学习日报8.3

    package car;class Person{ private String name; private int age; private Car car; public Person(Strin ...

  5. C#设计模式——建造者模式(Builder Pattern)

    1.建造者模式简介 1.1>.定义 建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 1.2>.使用频率  中低 1.3>.原型模式应用 ...

  6. Mapreduce实例--去重

    数据去重"主要是为了掌握和利用并行化思想来对数据进行有意义的筛选.统计大数据集上的数据种类个数.从网站日志中计算访问地等这些看似庞杂的任务都会涉及数据去重. 数据去重的最终目标是让原始数据中 ...

  7. 柔性分布式事务关于异步解决方案MQ版

    上述思想本质是 二阶段提交变体 1,2是prepare阶段 4是commit阶段 存在问题 MQ提供半消息支持 生产者提供消息回查功能 发送方多次半消息到MQSERVER  消费方会多次消费消息 生产 ...

  8. TurtleBot3 Waffle (tx2版华夫)(6)

    重要提示:请在配网通信成功后进行操作,配网后再次开机需要重新验证通信: 重要提示:[Remote PC]代表PC端.[TurtelBot]代表树莓派端: 操作步骤如下: 1)[Remote PC] 启 ...

  9. 【排序】题解_P1093奖学金

    题目描述 奖学金 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金.期末,每个学生都有3门课的成绩:语文.数学.英语.先按总分从高到低排序,如果两个同学总分相同,再按语文 ...

  10. LeetCode105 从前序和中序序列构造二叉树

    题目描述: 根据一棵树的前序遍历与中序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 前序遍历 preorder = [3,9,20,15,7] 中序遍历 inorder = [9 ...