一、示例代码
<!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>
浙公网安备 33010602011771号