JavaScript tab选项卡插件实例代码
更新时间：2016年2月26日 10:04 点击：1843
今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。
原生函数写法
将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面
我们先来看看最原始的使用函数写法的代码：
tab.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>jquery_hjb_tab插件demo</title>
<link rel="stylesheet" href="h.css"/>
</head>
<body>
<div id="tab">
<div class="tabs">
<ul>
<li><a href="#">tab1</a></li>
<li><a href="#">tab2</a></li>
<li><a href="#">tab3</a></li>
<li><a href="#">tab4</a></li>
</ul>
</div>
<div class="tabCons">
<section>内容一</section>
<section>内容二</section>
<section>内容三</section>
<section>内容四</section>
</div>
</div>
<script>
window.onload = h_tab('tab');
function h_tab(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
</script>
h.css
@charset "utf-8";
/*
//author:hjb2722404
//description:
//date:2016/2/18
*/
.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
.tabs ul li a.cur { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
上面两份代码为基本代码，之后我们后一步步在这份代码的基础上进行改进。
原生插件写法
好，现在，我们就来将这个方法改写成挂载在window对象下的插件：
tab.html
……
// 下面是第一次改动
<script type="text/javascript" src="h_tabs.js"></script>
<script>
H_tab("tab");
</script>
</body>
</html>
h_tabs.js
window.H_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};
但是，我们发现这样的写法虽然很简单，但也有问题：window作为一个全局对象，如果我们把自己的方法都挂载到它下面作为插件使用的话，插件一多，就容易产生命名空间冲突，另一方面，使用原生js虽然可以减少对外部的依赖，但代码量相对还是很大，写法比较繁琐。
jquery写法
我们尝试引入jquery库，将此插件改写为jquery插件。
jquery插件有三种形式：类级别的形式，对象级别的形式，jquery UI组件的形式
jquery 类级别插件写法–单个方法
我们先来看类级别插件的形式。
第一种类级别插件的形式，直接把该方法挂载到jquery的根空间下，作为一个工具方法：
tab.html
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
</script>
</body>
</html>
h_tabs.js
$.h_tab = function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
};
jquery类级别插件写法-多个方法
如果你想要将多个方法绑定到jquery根空间上面，那么像下面这样写：
tab.html
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$.h_tab('tab');
$.h_hello('hjb');
</script>
</body>
</html>
h_tabs.js
$.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName("a");
var oCons = document.getElementById(tabId).getElementsByTagName("section");
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
},
h_hello :function(name){
console.log("hello,",name);
}
});
虽然使用$.extend()工具方法将自己的功能函数直接挂载到jquery根命名空间下，简单，省事儿，但很不幸的是，这样的方式不能利用jquery强大的sizzle引擎，即你选择到的DOM元素无法运用这个方法。
所以我们要用到对象级别的插件开发方式。
jquery对象级别插件写法
对象级别的插件开发方式是利用$.fn.extend()方法将自己的方法绑定到jquery原型上去，这样所有jquery对象队可以应用该方法来执行相应操作了
代码如下：
tab.html
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
//对象级别的插件引用方法，注意和上面类级别插件的写法上的区分
$('#tab').h_tab('tab');
</script>
</body>
</html>
h_tabs.js
(function($){
$.fn.extend({
h_tab:function(tabId){
var oLinks = document.getElementById(tabId).getElementsByTagName('a');
var oCons = document.getElementById(tabId).getElementsByTagName('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);
这里，我们利用一个闭包封装了插件，避免了命名空间污染
在这里，还有一些问题，就是我们的方法必须传参数才可以运行，这就导致调用的时候我们使用$(‘#tab')选择了id为tab的div，然后在插件里我们又根据传入的ID获取了一遍该元素。
既然我们已经使用了jquery的选择器，那么我们就可以引入this来解决重复获取元素的冗余问题。
jquery对象级别插件写法-引入this
tab.html
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab();
</script>
</body>
</html>
h_tabs.js
(function($){
$.fn.extend({
h_tab:function(){
//在这里引入this
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
this.className="cur";
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);
这里需要注意的是，我们调用该插件的元素对象是(′tab′)，则此时直接使用this.find()就等价于(‘tab').find()，而不是$(this).find()，注意使用代入法来区分这两种写法的差别。
作为一款插件，它应该是可以被开发者控制的，所以还应该提供给使用者一些配置接口。
jquery对象级别插件写法-加入配置项
tab.html
……
<ul>
<!--对照文章开始的代码， 注意这里的改动 -->
<li><a href="#" class="current">tab1</a></li>
<li><a href="#">tab2</a></li>
……
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="h_tabs.js"></script>
<script>
$('#tab').h_tab({
//使得当前选项卡标签的样式名称可自定义的配置
curName:'current'
});
</script>
</body>
</html>
我们这里把一开始的”当前选项卡标签样式类名称“由”cur“改为了”current“，并将其作为配置项传入插件
h.css
.tabs ul { width: 100%; list-style-type: none;}
.tabs ul li { width: 48%; display: inline-block; margin: 0; padding: 0;}
.tabs ul li a {border-bottom: 3px solid #cccccc; width: 100%; height: 100%; display: block; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442}
/*注意下面一行与之前的样式代码的对比变化之处*/
.tabs ul li a.current { border-bottom: 3px solid #f26123;}
.tabCons section { display: none;}
.tabCons section:nth-child(1) { display: block;}
我们在样式表中做出了相应的改动。
h_tabs.js
(function($){
$.fn.extend({
//给方法传入一个对象作为参数
h_tab:function(opts){
//定义默认的配置
var defaults ={
curName : 'cur'
};
//将传入的参数覆盖默认参数中的默认项，最终合并到一个新的参数对象上
var Opt = $.extend({},defaults,opts);
var oLinks = this.find('a');
var oCons = this.find('section');
for(var i = 0; i<oLinks.length; i++){
oLinks[i].index = i;
oLinks[i].onclick = function () {
for(var j =0; j<oLinks.length; j++){
oLinks[j].className="";
oCons[j].style.display = "none";
}
//在这里使用配置项的值
this.className = Opt['curName'];
oCons[this.index].style.display ="block";
}
}
}
});
})(jQuery);
在这里我们使用了jquery的$.extend()方法的合并对象的功能，使用用户传入的配置项覆盖默认配置项并最终合并到一个新的配置项供后面的程序使用。
以上所述是小编给大家介绍的JavaScript tab选项卡插件实例代码，希望对大家有所帮助！
相关文章
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式，可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash（哈希），hmac（密钥哈希），cipher...2014-06-07
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 1.什么是异步编程？ 异步编程是指由于异步I/O等因素，无法同步获得执行结果时， 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例： for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23
- 这篇文章主要介绍了JS中split()用法（将字符串按指定符号分割成数组）的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记，内容很详细，感兴趣的小伙伴们可以参考一下...2016-05-20