使用方法

将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. Incorrect string value: '获取...' for column 'result' at row 1

    错误详情信息: ### Error updating database. Cause: java.sql.SQLException: Incorrect ### The error may invol ...

  2. MyBatis(六):Mybatis Java API编程实现一对多、一对一

    最近工作中用到了mybatis的Java API方式进行开发,顺便也整理下该功能的用法,接下来会针对基本部分进行学习: 1)Java API处理一对多.多对一的用法: 2)增.删.改.查的用法: 3) ...

  3. C++11版本不能使用一个单行命名空间方式特化一个函数的bug

    warning: specialization of ‘template<class _Iterator> struct std::iterator_traits’ in differen ...

  4. 什么是依赖注入 IoC

    设计原则:依赖注入原则 依赖倒置原则,是一种程序设计模式的原则 高层模块不应该依赖底层模块,二者都应该依赖其抽象. 抽象不应该依赖细节,细节应该依赖抽象.依赖导致原则很好的体现了“面向接口编程”的思想 ...

  5. 分布式事务二TCC

    分布式事务解决方案之TCC 4.1.什么是TCC事务 TCC是Try.Confirm.Cancel三个词语的缩写,TCC要求每个分支事务实现三个操作:预处理Try.确认Confirm.撤销Cancel ...

  6. phpstorm2019.1 实现保存(ctrl+s)同时格式化代码

    1.选择Edit(编辑)->Macros(宏)->Start Macro Recording(开始录制宏),如下图: 2.直接按想要录制的快捷键,先按Ctrl+ALT+L,然后键盘按Ctr ...

  7. node.js执行shell命令进行服务器重启

    nodejs功能强大且多样,不只是可以实现 服务器端 与 客户端 的实时通讯,另一个功能是用来执行shell命令 1.首先,引入子进程模块var process = require('child_pr ...

  8. SpokenEnglish01_ When's it due?

    1 Pronunciation and Intonation When's it due? 解析:When’s it due? 2 Key Points 2.1 Due adj: 到期的,截止的 It ...

  9. java:字符串的split方法,使用多个分隔符,分割一个字符串

    java语言中,多个分隔符,分割一个字符串: String[] tmpAuthors=tempAuthorStr.split(";|,|:|,"); 可以在线测试:java代码 在 ...

  10. Android组件化aar躺坑记:ButterKnife 报 元素值必须为常量表达式错误

    背景: 项目有需求,将自己写的模块作为一个module给到大项目使用,所以准备把自己的项目打包成aar包. 一.如何将独立项目打包成aar: 1.修改module下的application 为libr ...