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

;(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. BZOJ 2219 数论之神 (CRT推论+BSGS+原根指标)

    看了Po神的题解一下子就懂了A了! 不过Po神的代码出锅了-solve中"d-temp"并没有什么用QwQQwQQwQ-应该把模数除以p^temp次方才行. 来自BZOJ讨论板的h ...

  2. mongodb为集合新增字段、删除字段、修改字段(转)

    新增字段 为atest集合新增一个字段content db.atest.update({},{$set:{content:""}},{multi:1}) 删除uname字段 db. ...

  3. C# List分组

    //分组 8个为一组 List<List<string>> ArrayList = sArray.Select((x, i) => new { Index = i, Va ...

  4. jquery blur()函数 语法

    jquery blur()函数 语法 作用:当元素失去焦点时发生 blur 事件.blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时 ...

  5. js监听transition过渡事件

    html <div id="mydiv"> </div> style #mydiv{ width:100px; height:100px; backgrou ...

  6. AcWing:143. 最大异或对(01字典树 + 位运算 + 异或性质)

    在给定的N个整数A1,A2……ANA1,A2……AN中选出两个进行xor(异或)运算,得到的结果最大是多少? 输入格式 第一行输入一个整数N. 第二行输入N个整数A1A1-ANAN. 输出格式 输出一 ...

  7. SVN如何处理包含@2x or @3x的图片文件

    一般iOS图片文件都会包含@2x,@3x之类的字符比如icon@2x,icon@3x,当你在svn命令行中add或是delete的时候总是报错说file does not exit之类的错误,其实之类 ...

  8. zookeeper系列(八)zookeeper客户端的底层详解

    作者:leesf    掌控之中,才会成功:掌控之外,注定失败.出处:http://www.cnblogs.com/leesf456/p/6098255.html 尊重原创,共同学习进步:  一.前言 ...

  9. leetcode题目5.最长回文子串(中等)

    题目描述: 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad"输出: "bab"注意: ...

  10. JS基础_变量提升和函数提升

    1.在函数中,不使用var声明的变量都会变为全局变量 function fun(){ d=10; //window.d=10; }; console.log(10);//10 2.定义形参就相当于在函 ...