动手写一个jquery插件(实践)

自己实践写一个基于jquery的tab插件,面向对象的写法
这里我就不写index.html,和index.css了,主要就是分析插件代码tab.js
代码我上传到github上了,如果你们想看DOM结构及CSS样式的话,可以去把源码下来看看
github地址:github地址
目录结构:index.html,index.css以及tab.js

基本结构搭建

首先搭建一个jquery插件的框架
tab.js

;(function ($) {
    var Tab = function (target) {
    }

    Tab.prototype = {  
    }
   
    window.Tab = Tab
    
}(jQuery))

index.html 里调用Tab构造函数

<script>
$(function () {
    var tab1= new Tab('#box')
})
</script>

配置默认参数及参数获取

  1. 然后我们先配置一些默认参数

    tab.js

    
       ```
       var Tab = function (target) {
           //保存Tab类自身
           var _this_ = this
           //保存当前Tab组件的对象
           this.target = target
           //默认配置参数
           this.config={
               "tiggerType": "mouseover", //鼠标交互方式
               "effect":null,  //切换效果,默认为无
               "default":1,    //默认展示第几个标签
               "auto":false,    //自动切换时长,若指定了时长则表示开启自动切换
           }
       }
       ```
    
    
  2. 用户(使用者)配置参数的方法

    默认参数配置好以后,我们需要获取用户的配置参数,
    函数传参的方式大家应该都很熟悉了,在这里我们不用传参的方式获取,我们采用设置DOM属性的方式设置参数。这种配置方法很常见,比如Element-ui

    index.html

    <div class="box" id="box1" config='{"tiggerType":"click","auto":5000}'>
        <div class="title">
            <ul class="tab-list">
                li*4
            </ul>
        </div>
        <div class="content">
            img*4
        </div>
    </div>

    在最外层的div即我们选中的DOM节点上设置了一个名为config的属性,config的值为一串JSON
    这样子我们就设置了参数,那么怎么获取呢?我们写一个函数来获取

  3. 获取用户的配置参数
    tab.js

    Tab.prototype = {
        //获取用户的配置参数
        getConfig: function () {
            var config = $(this.target).attr("config")
            if(config&&config!==""){
                //将用户json格式的config转为对象格式
                return $.parseJSON(config)
            }else{
                return null
            }
        },
    }

    函数我们写在Tab.prototype{}里,这里的逻辑是:
    1、attr()获取我们在DOM节点里的配置参数
    2、如果有的话就将我们获取到的值转换为js对象,没有的话就返回null
    这里要注意的是我们的宿主DOM,即我们在调用 new Tab('#box1')传入的对象要用jquery包裹一下,这样才能正常获取到该节点,因为我传入的仅仅是宿主DOM的ID,当然也可以在调用时直接将这个ID包装一下,在这里就可以省去这一步而直接使用传过来的对象。
    index.html

    <script>
    $(function () {
        //var tab1= new Tab('#box')
        //var tab1= new Tab($('#box')) //调用时将ID包裹
    })
    </script>
    
  4. 参数处理
    在解决了用户参数配置的问题后,我们就要处理参数了

    tab.js

    var Tab = function (target) {
        //如果存在用户的参数
        if(this.getConfig()){
            $.extend(this.config,this.getConfig())
        }
    }

    这里用到$.exten的()方法,如果有用户的配置参数则会追加修改this.config,如果用户没有配置参数,那么程序就会使用我们的默认参数

绑定事件

  1. 获取具体节点
    tab.js / var Tab = function (){}

    this.tabItems = $(this.target).find(".title ul.tab-list li")
    this.contentItems = $(this.target).find(".content img")
  2. 为每个Tab标签页绑定节点
    tab.js / var Tab = function (){}

    var config = this.config
    //绑定鼠标交互事件
    if(config.tiggerType==="click"){
        this.tabItems.bind("click",function () {
            //这里的this指向每个每个具体的节点
            _this_.changeStyle($(this))
        })
    }
    else if(config.tiggerType==="click"||config.tiggerType!=="click"){
        this.tabItems.bind("mouseover",function () {
            _this_.changeStyle($(this))
        })
    }
    
    /* this.tabItems.bind(config.tiggerType,function () {
        _this_.changeStyle($(this))
    })*/

    1、在config配置里获取到鼠标交互的方式,我在这里写了'click'和'mouseover'两种,并且考虑到用户配置参数时可能会写错所以在else if 判定了一下,如果用户写错了那么默认的交互方式是mouseover
    2、当然也可以向我下面注释的那样直接绑定参数里的方法,然后你们可以自己加一些错误提示什么的
    3、在绑定了交互方式后调用改变Tab 样式的函数changeStyle()

改变tab标签页样式

我们给每个Tab节点绑定了交互事件,在事件触发后就调用changeStyle()函数来该变Tab标签的样式

  1. 该变tab选中的样式

    tab.js / Tab.prototype={}

    
    changeStyle:function (currentTab) {
        var index = currentTab.index()
        currentTab.addClass('select').siblings().removeClass('select')
        //切换效果
        if(this.config.effect === "fade"){
            this.contentItems.eq(index).fadeIn().siblings().fadeOut()
        }else{
          this.contentItems.eq(index).addClass('current').siblings().removeClass('current')
        }
        }

    1、我们在调用的时候将目标节点传参传进来了
    2、index()方法获取当前索引,用与匹配下面的content内容区
    3、去配置参数里找有没有配置切换效果,这里我只配置看一种淡入淡出效果,如果有的话则淡入淡出的切换,如果没有配置切换方式,那么就是默认参数null则直接切换无效果
    4、在给标签页addClss()添加选中状态的同时,要将其它非选中状态标签页的样式清除

默认显示的标签页

  1. 配置组件初始化时默认显示的标签页
    tab.js / var Tab = function (){}

    //默认显示的Tab
    if(config.default<=this.tabItems.length){
        this.changeStyle(this.tabItems.eq(config.default-1))
    } else {
        console.log("default 参数配置错误")
    }

    拿到参数里的default之后走一遍changeStyle()流程这样就完成了默认标签页的设置
    这里要注意的就是因为数组是从0开始的,但我们的习惯是从1开始,配置的时候想要第几个标签页默认显示就用第几个,所以实际上这里选中标签页时要将default-1

自动切换功能

我在配置参数里有写,auto这个参数,本来是想写自动切换这个功能的,但因为我在之前写面向对象Tab标签页时已经写过了,这里写的有点烦就不写了,无非就是加个定时器

注册为jquery方法

终于走到了最后一步,将我们写的构造函数注册为jquery方法
之前我们使用方法是new 一个新对象
tab.js / var Tab = function (){}

$.fn.extend({
    tab:function () {
      return new Tab(this)
    }
})

这样子注册一下,我们就可以按照jquery的方法去操作这个组件了
index.html

<script>
$(function () {
    $('#box1').tab()
    $('#box2').tab()
})
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值