【blockUI】简单的jquery遮罩插件 jquery.blockUI.js 使用

一、简述

        JQuery.BlockUI是JQuery的一个遮罩插件,它小巧(原版20k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,BlockUI可以在使用AJAX时模拟同步行为,为浏览器增加遮罩,避免不必要的操作。当被激活时,它会防止用户活动的页面(或页面的一部分),直到被关闭。 BlockUI可以添加元素的DOM,可以修改炫酷的外观和阻止用户交互行为。

更多请移步:http://jquery.malsup.com/block/

二、准备

jquery.blockUI.js需要jquery支持因此需要引入jquery。【如果有对应的js,请忽略此步,直接看第二步】

1、jquery.min.js (v_1.8.3):

        百度网盘:https://pan.baidu.com/s/1XGUzI8bvGNwFAbOlgScNTw

        提取码:4mq5

2、jquery.blockUI.min.js

        百度网盘:https://pan.baidu.com/s/1X-NPZMd6ZCBKP6sG4YN1ag

        提取码:psz9

3、CDN加速

        推荐一个网站: https://www.bootcdn.cn/

        直接搜索想要的js,查找对应的版本即可。(此处搜索 :jquery和blockUI即可)

二、html中引入两个js

这里提供两种方式

1、下载了js,直接引用

<script src="jquery.min.js"></script>

<script src="jquery.blockUI.min.js"></script>

注意:引用顺序,需要jquery在前。

2、cdn加速引用

<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery.blockUI/2.70.0-2014.11.23/jquery.blockUI.min.js"></script>

三、使用

1、js

$(function() {

    $('#Button1').click(function() {

        //阻止页面的用户的活动 $.blockUI();

        });

    $('#Button2').click(function() {

        //自定义信息内容

        $.blockUI({ message: "加载中..." });

    });

$('#Button3').click(function() {

    //自定义样式

    $.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

});

$('#Button4').click(function() {

    //定义弹出的信息为页面的某一个元素

    $.blockUI({ message: $('#domMessage') });

});

$('#btnClose').click(function() {

    //关闭弹出层

    $.unblockUI();

});

$('#Button5').click(function() {

    //设置淡入,淡出,自动关闭时间

    $.blockUI({ fadeIn: 700, fadeOut: 700, timeout: 2000 });

});

//简单的气泡提示

$.growlUI('提示', '删除成功!');

});


2、HTML

<body>

<ol>

    <li>阻止页面的用户的活动,不会自动消失,请刷新: $.blockUI();

        <input id="Button1" type="button" value="测试" />

    </li>

    <li>自定义消息:

        <input id="Button2" type="button" value="测试" />

    </li>

    <li>自定义样式:

        <input id="Button3" type="button" value="测试" />

    </li>

    <li>弹出指定的元素,并关闭弹出层(该层可以为隐藏):

        <input id="Button4" type="button" value="测试" />

    </li>

    <li>设置淡入,淡出,自动关闭时间:

        <input id="Button5" type="button" value="测试" />

    </li>

</ol>

<div id="domMessage" style="text-align: center; width: 200px; height: 50px; border:1px solid #9cf; padding: 25px; display: none;">

    <h3>

        Message</h3>

    <input id="btnClose" type="button" value="关闭" />

</div>

</body>

四、结束

        希望能帮到你,谢谢查看。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,341评论 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,748评论 1 45
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,202评论 0 1
  • 1、主题是什么? 用吃撑了来对抗自己的愧疚 2、事件是什么? 一阶答应张妍说男生分开坐,这样吃饭时候就不会出现有的...
    九型观心临在践行阅读 466评论 1 2