jquery - 插件实现loading

// loading.js
(function ($) {$.fn.loading = function (options) {var $this = $(this);var _this = this;return this.each(function () {var loadingPosition = '';var defaultProp = {direction: 'column',//方向，column纵向   row 横向animateIn: 'fadeInNoTransform', //进入类型title: '请稍等...', //显示什么内容name: 'loadingName', //loading的data-name的属性值type: 'origin', // 加载样式为原型discription: '这是一个描述',//loading的描述titleColor: 'rgba(255,255,255,0.7)',//title文本颜色discColor: 'rgba(255,255,255,0.7)',	loadingWidth: 260,loadingBg: 'rgba(0, 0, 0, 0.6)',borderRadius: 12,loadingMaskBg: 'transparent',zIndex: 1000001,originDivWidth: 60,   originDivHeight: 60,originWidth: 8,originHeight: 8,originBg: '#fefefe',smallLoading: false,// 这是图片的样式   (pic)imgSrc:'http://www.daiwei.org/index/images/logo/dw.png',imgDivWidth: 80,imgDivHeight: 80,flexCenter: false,flexDirection: 'row',			mustRelative: false, };var opt = $.extend(defaultProp, options || {});//根据用户是针对body还是元素  设置对应的定位方式if ($this.selector == 'body') {$('body,html').css({overflow: 'hidden',});loadingPosition = 'fixed';} else if (opt.mustRelative) {$this.css({position: 'relative',});loadingPosition = 'absolute';} else {loadingPosition = 'absolute';}defaultProp._showOriginLoading = function () {var smallLoadingMargin = opt.smallLoading ? 0 : '-10px';if (opt.direction == 'row') { smallLoadingMargin = '-6px' }//悬浮层_this.cpt_loading_mask = $('<div class="cpt-loading-mask animated ' + opt.animateIn + ' ' + opt.direction + '" data-name="' + opt.name + '"></div>').css({'background': opt.loadingMaskBg,'z-index': opt.zIndex,'position': loadingPosition,}).appendTo($this);//中间的显示层_this.div_loading = $('<div class="div-loading"></div>').css({'background': opt.loadingBg,'width': opt.loadingWidth,'height': opt.loadingHeight,'-webkit-border-radius': opt.borderRadius,'-moz-border-radius': opt.borderRadius,'border-radius': opt.borderRadius,}).appendTo(_this.cpt_loading_mask);if (opt.flexCenter) {_this.div_loading.css({"display": "-webkit-flex","display": "flex","-webkit-flex-direction": opt.flexDirection,"flex-direction": opt.flexDirection,"-webkit-align-items": "center","align-items": "center","-webkit-justify-content": "center","justify-content": "center",});}//loading标题_this.loading_title = $('<p class="loading-title txt-textOneRow"></p>').css({color: opt.titleColor,}).html(opt.title).appendTo(_this.div_loading);//loading中间的内容  可以是图片或者转动的小圆球_this.loading = $('<div class="loading ' + opt.type + '"></div>').css({'width': opt.originDivWidth,'height': opt.originDivHeight,}).appendTo(_this.div_loading);//描述_this.loading_discription = $('<p class="loading-discription txt-textOneRow"></p>').css({color: opt.discColor,}).html(opt.discription).appendTo(_this.div_loading);if (opt.type == 'origin') {_this.loadingOrigin = $('<div class="div-loadingOrigin"><span></span></div><div class="div-loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div>').appendTo(_this.loading);_this.loadingOrigin.children().css({"margin-top": smallLoadingMargin,"margin-left": smallLoadingMargin,"width": opt.originWidth,"height": opt.originHeight,"background": opt.originBg,});}if (opt.type == 'pic') {_this.loadingPic = $('<img src="' + opt.imgSrc + '" alt="loading" />').appendTo(_this.loading);}//关闭事件冒泡  和默认的事件_this.cpt_loading_mask.on('touchstart touchend touchmove click', function (e) {e.stopPropagation();e.preventDefault();});};defaultProp._createLoading = function () {//不能生成两个loading data-name 一样的loadingif ($(".cpt-loading-mask[data-name=" + opt.name + "]").length > 0) {// console.error('loading mask cant has same date-name('+opt.name+'), you cant set "date-name" prop when you create it');return}defaultProp._showOriginLoading();};defaultProp._createLoading();});}})(jQuery)

 // 加载条 - 显示$('#operaApplicationForm').loading({loadingWidth: 240,title: '查询中，请稍等',name: 'test',discription: '',direction: 'column',type: 'origin',originDivWidth: 40,originDivHeight: 40,originWidth: 6,originHeight: 6,smallLoading: false,loadingMaskBg: 'rgba(0,0,0,0.2)'});

// 加载条 - 显示
$(".cpt-loading-mask").remove();

参考链接：https://www.jq22.com/jquery-info14633

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！