使用方法

将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. Axure9 9.0.0.3648 秘钥亲测可用

    用户名: thisProEdition秘钥:PkgeOGle9dSCMXTAczSrTGQZJLcviUJO1kG6onDIH/C68b+AUItWKdbBrmkJsJ0m

  2. SVN更新冲突文件冲突符号的意思

    带黄色感叹号的文件为冲突文件,内容会发生变化并且会存在一些特殊符号: <<<<<<< .mine#Mon Feb 18 20:10:37 CST 2013== ...

  3. Cross-channel Communication Networks

    Cross-channel Communication Networks 2019-12-13 14:17:18 Paper: https://papers.nips.cc/paper/8411-cr ...

  4. jdk1.8使用枚举类

    package com.mq; import java.util.Arrays; import java.util.HashMap; import java.util.Map; public enum ...

  5. BIO,NIO,AIO到NETTY

    NIO 近期接触了几个产品都触及NIO,要么应用,要么改造项目,听多了也有些了解,但仍然不能真正理解,工期比较赶,还是要潜心下来看看. NIO是什么呢,应该是NOT-BLOCKING IO的意思,不阻 ...

  6. SpringBoot入门-JPA(三)

    什么是JPA JPA全称Java Persistence API.JPA通过JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. pom.xml <par ...

  7. Dubbo的设计结构和工作原理

    (1)设计结构 Provider:暴露服务方称之为“服务提供者”. Consumer:调用远程服务方称之为“服务消费者”. Registry:服务注册与发现中心的目录服务称之为“服务注册中心”. Mo ...

  8. MathML

    MathML https://developer.mozilla.org/en-US/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem Mathe ...

  9. SVN中“txn-current-lock:拒绝访问”错误

    SVN服务器使用的是Visual SVN,重装系统后,使用SVN commit是遇到:不能打开文件“XX:\XXXXX\db\txn-current-lock”: 拒绝访问这样的错误. 原因分析: u ...

  10. GhostVLAD for set-based face recognition

    GhostVLAD for set-based face recognition 中提到了文章解决的是template-based face recognition. VLAD: vector of ...