一、示例代码
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jquery插件制作</title><style>* {margin: 0;padding: 0;}.loading-box{width: 100%;height: 100%;position: fixed;left: 0;top: 0;z-index: 10000;background: rgba(255, 255, 255, .4);}.loading-box .loading{color: #AD7D42;width: 0.8em;height: 0.8em;border: .2em solid currentColor;border-bottom-color: transparent;border-radius: 50%;animation: 1s loading linear infinite;position: absolute;left: 50%;top: 50%;margin-left: -0.4em;margin-top: -60px;}@keyframes loading{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style> </head><body><button id="select">选择</button><script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script><script>(function ($) {function selectUser(sobj, settings) {var obj = sobj;var rand = '' + parseInt(Math.random() * 9999999) + '';var me = this;this.rand = rand;this._init = function () {for (var i in settings) this[i] = settings[i];this.show();}this.show = function () {this.creatediv();}this._clickcancel = function () {this.hide();};this._queding = function () {var name = 'changeuserinput_' + rand;var o = $("input[name='" + name + "']");var res = [];for (i = 0; i < o.length; i++) {o1 = $(o[i]);if (o[i].checked) {res.push({ id: o1.val(), name: o1.parent().prev().text() });}}this.onSelect(res);this.hide();}this.hide = function () {$('#selectuser_' + rand + '').remove();this.onCancel();};this.creatediv = function () {var s = '<div style="position: fixed;width:100%;height:100%;left:0;top:0;overflow: hidden; z-index: 9999;background:#fff;" id="selectuser_' + rand + '">';var len = this.changerange.length;for (var i = 0; i < len; i++) {console.log(this.changerange[i])s += '<div style="display:flex;align-items: center;"><div style="flex:1;">' + this.changerange[i].name + '</div><div><input name="changeuserinput_' + rand + '" type="' + this.changetype + '" value="' + this.changerange[i].id + '"/></div></div>'}s += '<div><button id="changeok_' + rand + '">确定</button><button id="changecancel_' + rand + '">取消</button></div>';s += '</div>';obj.append(s);$("#changeok_" + rand).click(function () {me._queding();});$("#changecancel_" + rand).click(function () {me._clickcancel();})}}$.fn.SelectUser = function (options) {var defaults = {changerange: '',changetype: 'checkbox',onSelect: function () { },onCancel: function () { }};var settings = $.extend({}, defaults, options);console.log(settings);var func = new selectUser($(this), settings);func._init();return func;}})(jQuery);var data = [{id: 1,name: '张飞'},{id: 2,name: '关羽'},{id: 3,name: '赵子龙'}]$("#select").on('click', function () {$('body').SelectUser({changerange: data,changetype: 'radio',onSelect: function (res) {console.log(res);}});});function sortBy(array, key) {return array.sort((a, b) => {if (a[key] < b[key]) return -1;if (a[key] > b[key]) return 1;return 0;});}(function($){function test1(sobj, settings){var obj = sobj;var rand = '' + parseInt(Math.random() * 9999999) + '';var me = this;this.__init = function() {for(var i in settings) this[i] = settings[i];this.show();}this.show = function() {console.log('show')}}$.fn.Test = function(options) {var func = new test1($(this), options);func.__init();return func;}})(jQuery);$('body').Test({a: '123'})$.extend({showLoading: function() {var html = '<div class="loading-box"><div class="loading"></div></div>';$("body").append(html);},hideLoading() {$(".loading-box").remove();}});$.showLoading();setTimeout(function() {$.hideLoading();}, 3000);</script> </body></html>