位置: 编程技术 - 正文
JavaScript tab选项卡插件实例代码(js tab选项卡)
编辑：rootadmin推荐整理分享JavaScript tab选项卡插件实例代码(js tab选项卡)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js tab切换效果,js tabs,js tab页面切换,js中tab栏切换,jquery tab选项卡,js中tab栏切换,js中tab栏切换,js中tab栏切换,内容如对您有帮助，希望把文章链接给更多的朋友！
今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。
原生函数写法
将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面
我们先来看看最原始的使用函数写法的代码：
tab.html
h.css
上面两份代码为基本代码，之后我们后一步步在这份代码的基础上进行改进。
原生插件写法
好，现在，我们就来将这个方法改写成挂载在window对象下的插件：
tab.html
h_tabs.js
但是，我们发现这样的写法虽然很简单，但也有问题：window作为一个全局对象，如果我们把自己的方法都挂载到它下面作为插件使用的话，插件一多，就容易产生命名空间冲突，另一方面，使用原生js虽然可以减少对外部的依赖，但代码量相对还是很大，写法比较繁琐。
jquery写法
我们尝试引入jquery库，将此插件改写为jquery插件。
jquery插件有三种形式：类级别的形式，对象级别的形式，jquery UI组件的形式
jquery 类级别插件写法?单个方法
我们先来看类级别插件的形式。
第一种类级别插件的形式，直接把该方法挂载到jquery的根空间下，作为一个工具方法：
tab.html
h_tabs.js
jquery类级别插件写法-多个方法
如果你想要将多个方法绑定到jquery根空间上面，那么像下面这样写：
tab.html
h_tabs.js
虽然使用$.extend()工具方法将自己的功能函数直接挂载到jquery根命名空间下，简单，省事儿，但很不幸的是，这样的方式不能利用jquery强大的sizzle引擎，即你选择到的DOM元素无法运用这个方法。
所以我们要用到对象级别的插件开发方式。
jquery对象级别插件写法
对象级别的插件开发方式是利用$.fn.extend()方法将自己的方法绑定到jquery原型上去，这样所有jquery对象队可以应用该方法来执行相应操作了
代码如下：
tab.html
h_tabs.js
这里，我们利用一个闭包封装了插件，避免了命名空间污染
在这里，还有一些问题，就是我们的方法必须传参数才可以运行，这就导致调用的时候我们使用$(‘#tab')选择了id为tab的div，然后在插件里我们又根据传入的ID获取了一遍该元素。
既然我们已经使用了jquery的选择器，那么我们就可以引入this来解决重复获取元素的冗余问题。
jquery对象级别插件写法-引入this
tab.html
h_tabs.js
这里需要注意的是，我们调用该插件的元素对象是(′tab′)，则此时直接使用this.find()就等价于(‘tab').find()，而不是$(this).find()，注意使用代入法来区分这两种写法的差别。
作为一款插件，它应该是可以被开发者控制的，所以还应该提供给使用者一些配置接口。
jquery对象级别插件写法-加入配置项
tab.html
我们这里把一开始的”当前选项卡标签样式类名称“由”cur“改为了”current“，并将其作为配置项传入插件
h.css
我们在样式表中做出了相应的改动。
h_tabs.js
在这里我们使用了jquery的$.extend()方法的合并对象的功能，使用用户传入的配置项覆盖默认配置项并最终合并到一个新的配置项供后面的程序使用。
以上所述是小编给大家介绍的JavaScript tab选项卡插件实例代码，希望对大家有所帮助！
javascript每日必学之封装 朋友们好，前面我们已经讲解了有关javascript的基础，从今天的内容开始，我们就要开始讲有关封装的内容了，这里，我们就一点一点地接触到OOP（面向
学习Javascript面向对象编程之封装 Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中
理解javascript封装 封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏。通过封装可以强制实施信息隐藏。在JavaScript中，并没有显示的声明私有成员的关键
标签: js tab选项卡
本文链接地址:https://www.jiuchutong.com/biancheng/380415.html 转载请保留说明！上一篇：Javascript技术栈中的四种依赖注入详解(web技术栈)
下一篇：javascript每日必学之封装(javascript题)
![[Unity3D]降低向Shader中传值的开销(unity调整地形高度)](https://www.jiuchutong.com/image/20240129/1706502639.jpg)
