资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/一个简单的选项卡js插件

一个简单的选项卡js插件

aikin / 2776人阅读

摘要：今天写一个简单的选项卡插件，这个我也是看别人博文学习实现的，然后加一些自己的理解。一实现效果虽说有点简陋，但是可以看到在文件中，引入我们写的插件后，实现选项卡切换，就只需一行代码就可以实现了。

</>复制代码 
  1. 估计大概两三个月没有这类的关于前端的文章了，一来是觉得自己太菜，二来也是因为自己的懒散，浑浑噩噩的消耗时间却没有收获什么成果。今天因为和一些同学的聊天，突然自己的心情很低落，有一种看不到未来在哪的感觉，所以强行让自己学习，去看js插件怎么写。今天写一个简单的选项卡插件，这个我也是看别人博文学习实现的，然后加一些自己的理解。
一.实现效果


虽说有点简陋，但是可以看到在html文件中，引入我们写的tab.js插件后，实现选项卡切换，就只需一行代码就可以实现了。

二.tab.js结构

先整体看下结构大概是怎样

</>复制代码 
  1. //一开始当然是创建一个构造函数tab
  2. function Tab(){
  3.   //里面只有一行代码，就是调用自身的初始化方法
  4.   this.init.apply(this,arguments);
  5. }
  6. //需要的属性和方法全部写在prototype里面
  7. Tab.prototype = {
  8.   //属性
  9.   //some code
  10.   //方法
  11.   //some code
  12. }
三.一些方法的实现

我们在这里没有使用闭包然后立即执行，所以才需要一个初始化函数将属性都初始化，在init中：

</>复制代码 
  1.   init:function(ela,elb,paramObj){
  2.   //一般在插件中都会有个配置对象，并且有默认值
  3.   this.defaultOptions = {
  4.     curClass:"current",
  5.     type:"mouseover",
  6.     delay:150
  7.   }
  8.   //然后我们会去检测用户有没有传入配置参数，有的话就要使用用户的配置，这里使用到一个extend方法
  9.   this.options = this.extend(this.defaultOptions, paramObj || {})
  10. }

extend实际是一个对象拓展方法，将b对象的属性覆盖到a对象中，在JQ里直接写好了这种方法，但js里没有，需要我们自己去模拟，我们将这个方法写在init外面

</>复制代码 
  1. extend:function(a,b){
  2.   for(var i in b){
  3.     //这个是检测for循环到的属性是不是b自身的
  4.     if(b.hasOwnProperty(i)){
  5.       a[i] = b[i]
  6.     }
  7.   }
  8.   return a;
  9. }

后面init里就是一些基本的属性，比如获取导航栏的DOM，内容块的DOM，以及他们的子元素还有子元素的个数，后面遍历会用到，具体可在文章附的源码里去看。最后我们要在init中给每个导航绑定事件，一个是触发，一个是取消，取消自然就是onmouseout，触发的话可以传入参数来制定，使用中括号可以解决这个问题

</>复制代码 
  1. for(var i=0;i
  2. 添加类名和消除类名方法
    实现这种切换效果一般采用的方法都是使用类名的添加和消除来实现的，那么对类名的操作方法就很重要了
  3. </>复制代码 
    1. addClass:function(el,name){
    2.   var arr = [],
    3.        str = el.className,
    4.        arr = str.split(/s+/),
    5.        len = arr.length,
    6.        name = this.trim(name),
    7.   for(var i=0;i
    8. 消除类名方法类似，主要是用到了一个splice方法。
    9. change选项卡切换函数
      这个就是给每个导航栏绑定的函数
    10. 这里也是使用了一个闭包，每次都返回一个新函数
    11. </>复制代码 
      1. change:function(index){
      2.   var self = this;
      3.   return function(){
      4.     self.timer = setTimeout(function(){
      5.         for(var i=0;i
      6. 四.总结
      7. 其实这个是非常简单的一个封装，刚开始学习前端的肯定是都做过这种切换效果的，而这个封装就是利用对象原型链的继承，来达到一些方法的复用。其中主要的知识点：
        1.每新建一个对象都需要init初始化
        2.将需要的属性和方法写在prototype中
        3.利用闭包去给dom绑定事件
        4.类名的处理要注意细节，比如检测是否已存在，是否有空格等
        5.对于一些事件要做延迟处理，事件完成后要注意清理现场
      8. 五.最后再说两句
      9. 这篇文章实际上没有什么有价值的内容，但我希望它对我而言是一个学习开始，就像刚刚开始学习前端的时候一样，那种纯粹的技术的渴望。还有几个月就要毕业了，才意识到自己的大学真的就这么过去了。就像当时读大一大二的时候，回家和高中同学聚会也才意识到高中真的就这么过去了，哪怕那个人站在面前，你也感觉和当初的他不同了。可没办法这就是成长。当时还想着要是能重来，一定要好好读书，一定要追到同桌妹子。现在大学要过去了，遗憾当然是有，但不会再有那种想重来的想法了，因为哪怕重来也一定差不多，真正重要的是自己心智的变化。不重来照样可以好好读书，不重来照样可以去追求自己喜欢的人，何必把自己限定在一种环境，一种身份上呢。尽管这段时间以来受刺激很多，心情有点低落，但还是要好好努力，好好生活。就像以前一直以为自己写文章肯定没人看的，结果偶尔会有人给你点赞，有人给你回复，也许只是寥寥数语，但对我而言确实莫大的鼓励。希望新的一年自己能不断成长，越来越强大！
      10. 源码地址：https://coding.net/u/ly550275...
      11.            
      12.                
      13.                                            
      14.                        
      15.
云服务器 GPU云服务器 js纵向选项卡 js实现选项卡 js选项卡切换 js删除下拉选项卡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50469.html

相关文章

  • 一个简单的选项卡js插件

    摘要：今天写一个简单的选项卡插件，这个我也是看别人博文学习实现的，然后加一些自己的理解。一实现效果虽说有点简陋，但是可以看到在文件中，引入我们写的插件后，实现选项卡切换，就只需一行代码就可以实现了。 估计大概两三个月没有这类的关于前端的文章了，一来是觉得自己太菜，二来也是因为自己的懒散，浑浑噩噩的消耗时间却没有收获什么成果。今天因为和一些同学的聊天，突然自己的心情很低落，有一种看不到未来在哪...

    WelliJhon 评论0 收藏0

  • 一个简单的选项卡js插件

    摘要：今天写一个简单的选项卡插件，这个我也是看别人博文学习实现的，然后加一些自己的理解。一实现效果虽说有点简陋，但是可以看到在文件中，引入我们写的插件后，实现选项卡切换，就只需一行代码就可以实现了。 估计大概两三个月没有这类的关于前端的文章了，一来是觉得自己太菜，二来也是因为自己的懒散，浑浑噩噩的消耗时间却没有收获什么成果。今天因为和一些同学的聊天，突然自己的心情很低落，有一种看不到未来在哪...

    funnyZhang 评论0 收藏0

  • 前端面试复盘

    摘要：从上面那段代码可以看到，下的上外边距只占了两个距离的一半，所以两个的间距是。下面分别对第和第个条件进行了测试。关于这一点，两个元素的间距是这样计算的上的下外边距包裹上的下内边距下的上外边距可以看下面这个例子印证第三点。 昨天面了html5前端。下面是其中3个问题： 双外边距叠加。 用原生js怎么实现div选项卡。 如何去实现一个插件。 一、双外边距折叠 问题描述 一上一下两个di...

    Jason 评论0 收藏0

  • 前端面试复盘

    摘要：从上面那段代码可以看到，下的上外边距只占了两个距离的一半，所以两个的间距是。下面分别对第和第个条件进行了测试。关于这一点，两个元素的间距是这样计算的上的下外边距包裹上的下内边距下的上外边距可以看下面这个例子印证第三点。 昨天面了html5前端。下面是其中3个问题： 双外边距叠加。 用原生js怎么实现div选项卡。 如何去实现一个插件。 一、双外边距折叠 问题描述 一上一下两个di...

    tomener 评论0 收藏0

  • 前端面试复盘

    摘要：从上面那段代码可以看到，下的上外边距只占了两个距离的一半，所以两个的间距是。下面分别对第和第个条件进行了测试。关于这一点，两个元素的间距是这样计算的上的下外边距包裹上的下内边距下的上外边距可以看下面这个例子印证第三点。 昨天面了html5前端。下面是其中3个问题： 双外边距叠加。 用原生js怎么实现div选项卡。 如何去实现一个插件。 一、双外边距折叠 问题描述 一上一下两个di...

    hufeng 评论0 收藏0

发表评论

登陆后可评论

0条评论

aikin

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<