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查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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
收音机术语解释
2021/03/01 无线电
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php获取错误信息的方法
2015/07/17 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
jquery 笔记 事件
2011/11/02 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
js分页工具实例
2015/01/28 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
Python字符串详细介绍
2015/05/09 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python快速排序算法实例分析
2017/11/29 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python的re正则表达式实例代码
2018/01/24 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
详解KMP算法以及python如何实现
2020/09/18 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
《爱如茉莉》教后反思
2014/04/12 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
oracle数据库去除重复数据
2022/05/20 Oracle