使用方法

将jquery.mloading.js和jquery.mloading.css引入到页面,调用:

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

方法:

$(element).mLoading("show");//显示loading组件
$(element).mLoading("hide");//隐藏loading组件

比如点击按钮,出现加载中:

js代码
<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap-loading.css"/> <script type="text/javascript" src="~/Scripts/jquery-1.11.3.js"></script>
<script type="text/javascript" src="src/jquery.mloading.js"></script>
<script>
$(function(){
$("#loadingBtnTest").click(function(){
$("body").mLoading();
});
});
</script>

效果:背景会有白色蒙层,弹出“正在加载”的遮罩。

Bootstrap 遮罩插件jquery.mloading的更多相关文章

  1. jQuery遮罩插件 jquery.blockUI.js

    Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...

  2. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  3. Jquery遮罩插件,想罩哪就罩哪!

    一  前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下 1 可以全屏遮 用于提交数据时 2 ...

  4. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  5. Juqery遮罩插件

    Juqery遮罩插件,想罩哪就罩哪!   一  前言 在项目开发时发现没有一个用起来 爽一点的遮罩插件,看起来觉得不难 好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能 ...

  6. Twitter Bootstrap JavaScript插件

    Twitter Bootstrap JavaScript插件本文收集了10款非常不错的JavaScript Twitter bootstrap扩展插件,利用Boostrap开发者可以节省大量的时间修复 ...

  7. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  8. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  9. Bootstrap 遮罩层实现方式

    直接上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

随机推荐

  1. kalman滤波原理

    2017拜拜啦,怎么过元旦呢?当然是果断呆实验室过... 应该是大二的时候首次听说kalman,一直到今天早上,我一看到其5条“黄金公式”,就会找各种理由放弃,看不懂呀...但是研究lidar定位需要 ...

  2. Redis(一) 数据结构与底层存储 & 事务 & 持久化 & lua

    参考文档:redis持久化:http://blog.csdn.net/freebird_lb/article/details/7778981 https://blog.csdn.net/jy69240 ...

  3. 初识RSA

    基础知识:http://www.guideep.com/read?guide=5676830073815040# python实现:https://blog.csdn.net/bian_h_f6127 ...

  4. centos7安装hadoop2.7.7

    下载hadoop-2.7.7 网址如下 https://www-eu.apache.org/dist/hadoop/core/ 移动到/opt 路径下 在/opt下新建一个文件夹,名为app mkdi ...

  5. [Web Pdf] flying-saucer + iText + Freemarker生成pdf 跨页问题

    转载于: https://blog.csdn.net/qq_31980421/article/details/79662988 flying-saucer + iText +  Freemarker实 ...

  6. systemctl enable rc-local.service error

    /******************************************************************************* * systemctl enable ...

  7. 使用JSP的fmt标签实现国际化支持 - smart-framework ; smart-plugin-i18n

    使用JSP的fmt标签实现国际化支持   Smart-framework框架使用smart-plugin-i18n插件来完成国际化处理,原理相同,使用过滤器进行参数设置. ============== ...

  8. PL/SQL【32位】连接Oracle 11g【64位】

    下载64位Oracle安装: 下载PL/SQL安装:下载instantclient-basic-win32-12.1.0.1.0.zip,解压后剪切instantclient_12_1文件夹,粘贴到O ...

  9. [转]TrueType字体结构

    TrueType字体通常包含在单个TrueType字体文件中,其文件后缀为.TTF. OpenType字体是以类似于TrueType字体的格式编码的POSTSCRIPT字体.OPENTYPE字体使用. ...

  10. [问题解决]Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock

    写了一个脚本读取docker日志,发生报错:Got permission denied while trying to connect to the Docker daemon socket at u ...