緣起

我們知道在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?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:'',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:'',departName:''},{....}]
 //以下編寫接收到所選人員後自己的業務邏輯
 }
});

可以看到其實是對layui的一個彈窗進行了封裝，其中$.extend是JQuery裡面擴充套件外掛的一個方法，會用後面的同名變數替換前面的。在上訴程式碼中的作用是用來如果你沒有傳某個屬性，就用預設的屬性。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。