自己尝试封装的一个在工作当中使用的多级弹窗插件:

;(function ($, window, document) { //用一个自调用匿名函数把插架代码包裹起来,防止代码污染
$.fn.multi = function (options, callback) {
let defaults = { //defaults 使我们设置的默认参数。
trigger: '', //触发事件的class
popClass1: '', //第一个弹窗的class
popClass2: '', //第二个弹窗的class
};
options = $.extend(defaults, options); //将传入参数和默认参数合并
let $this = $(this); //响应事件对象 //触发弹窗
$this.on('click', options.trigger, function () { //功能代码部分,绑定事件
//关闭页面上的弹窗
$(options.popClass1).parent().hide();
$(options.popClass2).parent().hide();
//打开新触发的弹窗
$(this).next().show();
}); let levelValue = ''; //每层选择的值
//第一层 事件代理
$this.on('click', options.popClass1 + ">li", function () {
//控制背景颜色高亮
$(this).addClass("active").siblings().removeClass("active");
// 获取当前点击的li的子元素的HTML节点 将获取的节点放到页面显示的第二级中
let html = $(this).children("ul").html();
$(this).parent().parent().next().children(".multi-level-ul2").html(html);
$(this).parent().parent().next().show(); });
//第二层 事件代理
$this.on('click', options.popClass2 + ">li", function () {
$(this).addClass("active").siblings().removeClass("active");
levelValue = $(this).children("span").text();
$(this).parent().parent().prev().prev().text(levelValue);
let level = $this.attr('data-level');
//把选择的值和层级通过回调函数传递回去
callback(levelValue, level);
$(this).parent().parent().prev().hide();
$(this).parent().parent().hide();
});
//点击空白处隐藏div
$(document).click(function (event) {
let targetArea = $('.multi-level-wrap'); // 设置目标区域
if (!targetArea.is(event.target) && targetArea.has(event.target).length === 0) {
$(options.popClass1).parent().hide();
$(options.popClass2).parent().hide();
}
});
}
})(jQuery, window, document);

在页面当中调用:

$('.multi-level-wrap').each(function() {
$(this).multi({
trigger: '.multi-level-input', //触发事件的class
popClass1: '.multi-level-ul1', //第一个弹窗的class
popClass2: '.multi-level-ul2', //第二个弹窗的class
}, function(params, level) { })
})

  

参考链接:https://blog.csdn.net/weixin_39398244/article/details/81539486

参考链接:https://www.cnblogs.com/cbzg/p/5713232.html

参考链接:https://www.jianshu.com/p/5196cb659fb6

封装自己的jquery插件的更多相关文章

  1. 如何将Js代码封装成Jquery插件

    很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...

  2. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

  3. 做了一个jquery插件,使表格的标题列可左右拉伸

    示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table ...

  4. jQuery编写插件--封装全局函数的插件(一些常用的js验证表达式)

    上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...

  5. 自己做jQuery插件:将audio5js封装成jQuery语音播放插件

    日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以下的封装. 首先先简单介绍一下Audio5js吧. Audio5js是一个能够 ...

  6. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  7. jquery插件封装

    HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...

  8. 最简单的原生js和jquery插件封装

    最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成  $.extend 方法,其他都一样. 总结一下实现原理: 将 ...

  9. 【jQuery】jquery插件封装

    扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn ...

随机推荐

  1. js自定义事件CustomEvent、Event、TargetEvent

    1.Event Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! Event的事件都是系统自 ...

  2. VUE: 移动端长按弹出确认删除地址(后面测试发现IOS有BUG,后面有更新随笔,更新后的亲测有效)

    收货地址的删除方式可能有很多种,我目前见过的暂时只有两种(1.在编辑页删除  2.长按某一条收货地址弹出是否删除地址) 在开发的项目上要求第二种删除方法,于是记录一下我写的代码 ~ 1.首先,在移动端 ...

  3. MD5 加密 字符串

    //获取字符串的MD5码 public string CreateMD5Hash(string input) { // Use input string to calculate MD5 hash S ...

  4. js拖拽文件夹上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  5. TTTTTTTTTTTTTT hdu 5763 Another Meaning 哈希+dp

    Another Meaning Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  6. vscode编辑器

    插件 Auto Close Tag   自动关闭标签 Auto Rename Tag 自动修改标签 Bracket Pair Colorizer  多层括号不同颜色显示 EditorConfig fo ...

  7. 数据分析师面经一(bk)

    2019年第一个数据分析面试: 先说一下心理感受,在BOSS多次看到这个岗位了,但是 呢一直没勇气去投这个岗位.首先毕竟是一个知名企业一万+人的公司,心里多少底气不足(小公司待习惯了吧),而且看岗位要 ...

  8. PTA 二叉树路径

    二叉树的路径 (25 分) 二叉树是一种普通的数据结构.给出一棵无限的二叉树,节点被标识为一对整数,构造如下:     (1)树根被标识为整数对(1,1).     (2)如果一个节点被标识为(a,b ...

  9. Java线程之ThreadLocal

    翻译:https://www.journaldev.com/1076/java-threadlocal-example?utm_source=website&utm_medium=sideba ...

  10. TCP层recvmsg系统调用的实现分析

    概述 recvmsg系统调用在tcp层的实现是tcp_recvmsg函数,该函数完成从接收队列中读取数据复制到用户空间的任务:函数在执行过程中会锁定控制块,避免软中断在tcp层的影响:函数会涉及从接收 ...