快活林资源网 Design By www.csstdc.com
缘起
我们知道在JQ中,是允许我们自定义一些插件与扩展的。定义的方式也比较简单,采用$.extend就行,那么下面就来看看在JQ中自定义一个插件的实例
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"htmlcode">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里面扩展插件的一个方法,会用后面的同名变量替换前面的。在上诉代码中的作用是用来如果你没有传某个属性,就用默认的属性。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- 张国荣.2011-极品天碟LPCD45II(雨果版)【环球】【WAV+CUE】
- 张学友《醒着做梦》[DFF][1.1G]
- 刘惜君 《如我》[WAV分轨][403M]
- 白玛多吉《梦》限量1:1母盘直刻[低速原抓WAV+CUE][508M]
- 魏金栋-金歌新曲-梦里全是桂花香2CD[天凡之音][WAV+CUE]
- 鲛岛有美子-樱花赋HQCD[天龙][WAV+CUE]
- [In-Akustik7506]ReferenceSoundEdition-GreatWomenOfSong(2014)HQCD[WAV+CUE]
- 日本EMI超级名盘TOGE-11035-36BeethovenFidelio-Furtwngler
- 宝丽金50周年2010《古典篇》3CD限定盘[低速原抓WAV+CUE]