首页 / JAVASCRIPT / JavaScript tab选项卡插件实例代码

JavaScript tab选项卡插件实例代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript tab选项卡插件实例代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8748字，纯文字阅读大概需要13分钟。

内容图文

今天，先从最简单的开始，将已有的一个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选项卡插件实例代码，希望对大家有所帮助！

内容总结

以上是互联网集市为您收集整理的JavaScript tab选项卡插件实例代码全部内容，希望文章能够帮你解决JavaScript tab选项卡插件实例代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/353798.html

来源：【匿名】

【上一篇】JavaScript中的时间处理小结【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript tab选项卡插件实例代码】教程文章相关的互联网学习教程文章

javascript 仿面向对象编程实例代码(私有，公共变量。。。)【代码】

1//定义一个javascript类 2function JsClass(privateParam,publicParam){//构造函数 3var priMember = privateParam; //私有变量 4this.pubMember = publicParam; //公共变量 5//定义私有方法 6function priMethod(){7return "priMethod()";8 }9//定义特权方法，特权方法可以访问所有成员10this.privilegedMethod = function(){ 11var str = "这是特权方法，我调用了\n"; 12 str += " 私有变量：" + priMember +"\n"; 1...

JS获取月的最后一天与JS得到一个月份最大天数的实例代码_javascript技巧

标题页 function getLastDay(year,month) { var new_year = year; //取当前的年份 var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定） if(month>12) //如果当前大于12月，则年份转到下一年 { new_month -=12; //月份减 new_year++; //年份增 } var newnew_date = new Date(new_year,new_month,1); //取当年当月中的第一天 return (new Date(new_date.getTime...

Vue+Express实现登录注销功能的实例代码【图】

对Vue全家桶有基本的认知.用有node环境了解express一丶业务分析 1.什么情况下进行权限验证? 访问敏感接口前端向后端敏感接口发送ajax后端进行session验证,并返回信息前端axios拦截返回信息,根据返回信息进行操作进行页面切换页面切换,触发vue-router的路由守卫路由守卫根据跳转地址进行验证,如需权限,则发送ajax至后端验证接口后端验证接口进行session验证,返回信息前端根据后端返回信息进行操作2.前后端进行了怎么的交互? 登录注...

jQuery 过滤not()与filter()实例代码

第一种写法: 代码如下:$(function(){ $("li").not(":even").css("color","red"); $("li").filter(":odd").css("color","red"); }) 第二种写法：代码如下:$(function(){ $("li").filter(function(index) { return index%2 == 0; }).css("color","red"); $("li").not(function(index) { return index%2 !== 0; }).css("color","red"); }) 这两种写法，都可以达到一样的效果，not与filter是相反的过滤！ jQuery过滤选择器:not()方...

带有定位当前位置的百度地图前端web api实例代码

废话不多说，直接给大家贴代码了，具体代码如下所示，关键代码如下： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> html { height:100%; } body { height:100%; margin:0px; padding:0px; } #container { height:50%; } </style>...

nodeJS实现路由功能实例代码【图】

前面的话本文将使用NodeJS实现较复杂应用的路由功能结构项目结构如下代码如下功能【router.js】 // 加载所需模块 var http = require(http); var url = require(url); var fs = require(fs);var host = 127.0.0.1; var port = 8080;http.createServer(function(req,res){var pathname = url.parse(req.url).pathname;console.log(Request for + pathname + received.);function showPaper(path,status){var content = fs.read...

jQuery完成表单验证的实例代码(纯代码)

废话不多说了，直接给大家贴代码了，具体代码如下所示：<!doctype html><head><meta charset=utf-8" /><title>表单验证</title><link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" /><script src="jquery/jquery.js" type="text/javascript"></script><script>$(document).ready(function() {$("form :input.required").each(function() {var $required=$("<strong class=...

基于vue实现swipe轮播组件实例代码【图】

项目背景图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如Swiper。但是当项目中的图片轮播只需要一个很简单的轮播样式，比如这样的我们引用这样一个110k的大插件，就大材小用了。再安利一下，swiper2.x和swiper3.x对移动和PC端支持情况如下图当当当当~~~我们今天的主角登场了，thebird/Swipe，这个插件完成了图片轮播需要的基本功能，只有14.2k,真真的轻量级啊。还有，还有翻译一下，就是俺们全支持，不管你是PC端...

jssplit的用法和定义jssplit分割字符串成数组的实例代码_基础知识

关于js split的用法其它也不多说什么，下面直接举例给大家看看代码如下: 输出 } </ script> 输出结果就是 2 2 3 5 6 6 js split就是将一字符串以特定的字符分割成多个字符串,大家应当一看就懂了吧。下面是有关js split的定义和用法，官方参考。定义和用法 split() 方法用于把一个字符串分割成字符串数组。语法 stringObject.split(separator,howmany) 参数描述 separator 必需。字符串或正则表达式，从该参数指定的地方分割...

Ext 表单布局实例代码

代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = 'under'; //第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有： var tdate = new Ext.form.DateField({ fieldLabel: '日期', emptyText: '请选择日期', format: 'Y-m-d', disabledDays: [0, 7] }); var txt = new Ext...

vue做网页开场视频的实例代码【图】

本demo背景是一个视频，文字是打印机效果，按钮在文字打完才会显示，点击按钮背景向上收起，同时显示默认首页组件（如是初建vue项目列表，则为helloWorld.vue的组件内容）公司电脑没有gif动图尽情谅解文末会附上demo地址，如需看效果，可前往下载本人一直很喜欢网页开场有一段视频或动画，个人认为网页的开场动画起到引导浏览作用，相当于网页的一个开始，一个好的开始往往就成功了一半，对于浏览网站的用户来说，也就吸引了极大...

jQuery表单序列化实例代码实例分享

本文主要介绍了jQuery 表单序列化实例代码,需要的朋友可以参考下，希望大家能更好掌握jQuery 表单序列化知识。废话不多说了，直接给大家贴代码了，具体代码如下所述：$(function(){$(#send).click(function(){$.ajax({type: "GET",url: "test.json",data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象dataType: "json",success: function(data){// code... }});}); }); $(function(){$(#send...

微信小程序弹窗自定义实例代码

微信小程序弹窗首先wxml代码： <view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view> <view bindtap="clickArea">点击此处</view>　　注：hidden属性用于切换比较频繁的地方。 wxss代码设置弹窗样式: .myToast{width:240rpx;height:130rpx;line-height: 130rpx;margin:80rpx 35%;border-radius:20rpx;background-color: rgb(114,113,113);color:rgb(255,255,255);font-size: 36rpx;text-align: center;position: ...

Vue组件中prop属性使用说明实例代码详解

Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component(blog-post, {// 在 JavaScript 中是 camelCase 的props: [postTitle],template: <h3>{{ postTitle }}</h3> })  <blog-post pos...

jquery实现文字由下到上循环滚动的实例代码_jquery

有如下代码：代码如下:第1个li元素第2个li元素第3个li元素第4个li元素第5个li元素第6个li元素第7个li元素第8个li元素但是页面只显示前5个li(相关css不做赘述)，想要循环显示li里面的内容就是在制定的时间将ul向上移动li的高度，于此同时将第一个li加到ul中li的末尾。　　代码如下：代码如下:function autoScroll(obj, ul_bz){$(obj).find(ul_bz).animate({marginTop : "-25px"},500,function(){$(this).css({marginTop : "0px"})...

首页 / JAVASCRIPT / JavaScript tab选项卡插件实例代码

JavaScript tab选项卡插件实例代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript tab选项卡插件实例代码】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

TAB - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程