jquery自定义组件实例详解


Posted in jQuery onDecember 31, 2020

缘起

我们知道在JQ中,是允许我们自定义一些插件与扩展的。定义的方式也比较简单,采用$.extend就行,那么下面就来看看在JQ中自定义一个插件的实例

JQuery如何封装一个组件

效果

我们先来看封装好的组件的效果图,这是一个根据组织机构选择人员的组件。

jquery自定义组件实例详解

实现原理

我们先定义一个DbwSelectUser函数

DbwSelectUser : function (options) {
 var opt = $.extend({
 //是否多选:true(多选),false(单选)
 multi:true,
 offset:'auto',
 //layerIndex:弹出窗口索引
 //users数据结构:[{userId:'', userName:'', departId:'', departName:''}]
 onOk:function(layerIndex, users){}
 }, options || {});
 $.LoadIframe({
 title: '请选择人员',
 content: 'assets/js/extend/jquery/userSelect/user-select.jsp?multi=' + opt.multi,
 maxmin: false,
 area: ['840px', '500px'],
 resize: false,
 scrollbar:false,
 offset: opt.offset,
 btn: ['确定', '取消'],
 yes: function (index, layero) {
  var iframeWin = $(layero).find('iframe')[0].contentWindow;
  //users:[{userId:'', userName:'', departId:'', departName:''}]
  var users = iframeWin.getSelectedUsers();
  opt.onOk(index, users);
  return false;
 }
 }, false);
}

这里的user-select.jsp就是要弹出的页面

这边调用了LoadIframe方法并传入了参数,我们来看看LoadIframe方法的实现

LoadIframe: function (options, fullScreen) {
 /*layer的默认配置*/
 var _default = {
  type: 2,
  title: '系统窗口',
  content: '',
  area: 'auto',
  shadeClose: false,
  maxmin: true,
  maxWidth: 600,
  maxHeight: 500
 },
 o = $.extend(_default, options || {}),
 index = layui.layer.open(o);
 if (fullScreen) {
 //窗口全屏
 layui.layer.full(index);
 }
 return index;
}

使用

$.DbwSelectUser({
 //offset:弹出框显示位置(空或auto:居中,rb:右下角)
 offset:'rb',
 //选好人员后弹出框的“确定”按钮单击事件回调函数
 onOk:function(layerIndex, users) {
 //layerIndex:弹出框layer的索引
 //users数据结构:[{userId:'', userName:'', departId:'', departName:''},{....}]
 //以下编写接收到所选人员后自己的业务逻辑
 }
});

可以看到其实是对layui的一个弹窗进行了封装,其中$.extend是JQuery里面扩展插件的一个方法,会用后面的同名变量替换前面的。在上诉代码中的作用是用来如果你没有传某个属性,就用默认的属性。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 #jQuery
jQuery实现简单轮播图效果
Dec 27 #jQuery
原生jQuery实现只显示年份下拉框
Dec 24 #jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 #jQuery
jquery实现图片放大镜效果
Dec 23 #jQuery
jQuery实现增删改查
Dec 22 #jQuery
You might like
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python面向对象之继承代码详解
2018/01/29 Python
python图书管理系统
2020/04/05 Python
Python中偏函数用法示例
2018/06/07 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
销售人员自我评价
2014/02/01 职场文书
迟到早退检讨书
2014/02/10 职场文书
保护环境建议书
2014/03/12 职场文书
机械系毕业生求职信
2014/05/28 职场文书
公务员政审材料
2014/12/23 职场文书
个园导游词
2015/02/04 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS