资讯专栏INFORMATION COLUMN

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

立即前往
首页/文章专栏/动手写一个jquery插件(实践)

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

Kylin_Mountain / 1606人阅读

摘要：自己实践写一个基于的插件面向对象的写法这里我就不写和了，主要就是分析插件代码代码我上传到上了，如果你们想看结构及样式的话，可以去把源码下来看看地址地址目录结构以及基本结构搭建首先搭建一个插件的框架里调用构造函数配置默认参数及参数获取然后我们

自己实践写一个基于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构造函数

配置默认参数及参数获取

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

tab.js

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

用户(使用者)配置参数的方法

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

index.html


    

        
    
            li*4
        

    

    

        img*4

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

获取用户的配置参数
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

参数处理
在解决了用户参数配置的问题后，我们就要处理参数了

tab.js

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

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

绑定事件

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

this.tabItems = $(this.target).find(".title ul.tab-list li")
this.contentItems = $(this.target).find(".content img")

为每个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标签的样式

该变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()添加选中状态的同时，要将其它非选中状态标签页的样式清除

默认显示的标签页

配置组件初始化时默认显示的标签页
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

云服务器 GPU云服务器 自己动手写爬虫 自己动手写网路爬虫 自己动手写网络爬虫 自己动手写开发工具

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

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

相关文章

  • GridManager 开源历程

    摘要：历程启动于年月日不曾想这一坚持已经多天了。每个午饭后晚饭前。期间对的认知与实践提升明显，并沉淀下名为的类库。每次发布前的，成为一种风险把控。在此之前从没有如此的认同单元测试，也相信这终将会成为一种大家都遵守的契约。 GridManager历程 GridManager 启动于2015年02月10日, 不曾想这一坚持已经1200多天了。总想为此记录些什么，但一直未曾动手。午饭后，公司很安静...

    honhon 评论0 收藏0

  • 看完你也想编写自己的 react 插件

    摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。 副标题----为什么我要写这个 react 插件 图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点： 没有只针对 image 懒加载组件。多...

    Vixb 评论0 收藏0

  • 看完你也想编写自己的 react 插件

    摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。 副标题----为什么我要写这个 react 插件 图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点： 没有只针对 image 懒加载组件。多...

    zhou_you 评论0 收藏0

  • 看完你也想编写自己的 react 插件

    摘要：清楚自己想要什么样的组件，就自己动手撸呗。咱们先来看看它的效果吧如果大家有时间，窝还是鼓励大家自己动手实现一些小插件。于是自己就琢磨能否继承使用方法同时保持特有组件特性。需要确保已安装。 副标题----为什么我要写这个 react 插件 图片懒加载是项目中常用的功能，然而现有 react 懒加载组件库，用着都不是很爽了 ?。概括一下有如下几点： 没有只针对 image 懒加载组件。多...

    xingpingz 评论0 收藏0

  • 一个JS效果竟然要研究一天，我是不是不适合做前端？

    摘要：紧接着就是导航栏的特效编写，殊不知，就是这个效果，让原本计划上午完成的事情，愣是被我研究了大半天才解决。刚开始我的布局是，导航栏是一个，下面有八个，分别是八个栏目。 showImg(https://segmentfault.com/img/bVYUar?w=720&h=537); 前言 今天这篇文章的标题，显然是要搞事情。一个JS交互效果，居然花费了一天的宝贵时间才研究出来，我是不是不...

    ztyzz 评论0 收藏0

发表评论

登陆后可评论

0条评论

Kylin_Mountain

男|高级讲师
我要私信

TA的文章

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