开发中你有遇到过这样的需求吗?

将页面或者某个区域遮罩,显示 loading 效果,并按照需求变化loading框内容;
本插件致力于解决上述问题。

插件长什么样?

插件预览

我对它的评价是:不是巨丑,是简约而突出的。

怎么使用?

你可以有两种方式获得此插件:

  • github上获取;

  • npm上获取,通过npm install jquery.mloading.js命令安装插件;

获取到插件代码后,将jquery.mloading.js和jquery.mloading.css引入到页面,调用:

$(element).mLoading({
    text:"",//加载文字,默认值:加载中...
    icon:"",//加载图标,默认值:一个小型的base64的gif图片
    html:false,//设置加载内容是否是html格式,默认值是false
    content:"",//忽略icon和text的值,直接在加载框中显示此值
    mask:true//是否显示遮罩效果,默认显示
});
$("body").mLoading();//就是给整个页面添加loading效果
$("#box").mLoading();//就是#box element添加loading效果

当设置mask后,如果觉得遮罩效果不明显或者太强烈,可以修改css文件中的.mloading.mloading-mask``类,改变背景色的透明度即可。

注意:本插件不支持对过小元素的loading,如给某个按钮、某个input添加遮罩;使用时应该尽量在容器上进行loading遮罩。

关于兼容性和jquery版本

本插件支持所有主流浏览器,并支持ie8+,在选择jquery版本时没有过多的限制,主流版本都可以支持。


imingyu
816 声望27 粉丝

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏。


引用和评论

13 条评论
头像
angular

请问怎么设置消失呢?

2016-12-05
头像
imingyu(作者)

$(element).mLoading("hide")

2016-12-05
头像
angular

@imingyu 谢谢了,虽然看不懂源码

2016-12-05
头像
angular

属性icon是要自己准备图片吗?html什么意思,尝试了效果一样的

2016-12-05
头像
imingyu(作者)

@angular icon可配置loading图标,html是配置是否要进行html编码。

2016-12-05
头像
angular

html是配置是否要进行html编码,这个是什么意思

2016-12-05
头像
imingyu(作者)

@angular 自己百度html编码,另外你应该自己多动手尝试,或者勤搜索来解决问题,而不是总询问别人——一个建议。

2016-12-05
头像
angular

@imingyu 好的,谢谢建议

2016-12-05
头像
angular

大神,问一下你css中的@media (max-width: 300px) 是根据谁的最大宽度啊,我调着很奇怪

2016-12-07
头像
imingyu(作者)

@angular 这个只是在测试插件中发现小于300px屏幕时有些小问题,特地针对这个问题加了些css代码。

2016-12-07
头像
溢出的爱L

我想问一下
$(element).mLoading({

text:"",//加载文字,默认值:加载中...
icon:"",//加载图标,默认值:一个小型的base64的gif图片
html:false,//设置加载内容是否是html格式,默认值是false
content:"",//忽略icon和text的值,直接在加载框中显示此值
mask:true//是否显示遮罩效果,默认显示

});
调用这个是在html调用吗 为什么我的说element is not defined

2017-02-28
头像
sophsis

delay timeout callback这样的加一下比较好。

2017-08-06
头像
JohnCoder

请问调用的时候,text要个性化,得怎么传数据?

2017-09-04