jQuery blockUI 使用详解

JS-- jQuery遮罩插件 jquery.blockUI.js   Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。 使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js jquery.blockUI.js插件下... 阅读详情

1、使用场景

发送ajax请求时,禁止用户对浏览器的操作行为。

2、基本操作

发送ajax请求之前

$.blockUI();

ajax请求成功,返回时

这里写代码片

$.unblockUI();

示例、

$.ajax({
   url: url,
        type: 'GET', //GET
         async: false, //或false,是否异步
         data: {

         },
         timeout: 5000, //超时时间
         dataType: 'json', //返回的数据格式:
         beforeSend: function (xhr) { 
             $.blockUI();//请求之前打开
         },
         success: function (data, textStatus, jqXHR) {
             $.unblockUI();//返回关闭
         },
         error: function (xhr, textStatus) { },
         complete: function () {
          }
     });
 }

升级、
自定义样式:

$.blockUI({ css: { backgroundColor: '#f00'; color: '#fff' } })
$.blockUI({ message: '<h1><img src="busy.gif" /> loading...</h1>' });

baseZ:添加定义层,越大在上层

$.blockUI({
        message: "数据加载...",
        baseZ: 3000
      });
优雅强大的jQuery插件:展示弹出窗口的BlockUI jQuery JS BlockUI是一个基于jQuery的插件,提供了一种简单而强大的方式来展示和管理弹出窗口。该插件可以帮助开发人员在网页中创建各种类型的弹出窗口,例如提示信息、加载动画、确认对话框等。你可以根据实际需求,自定义弹出窗口的样式和内容。通过该插件,你可以轻松创建出强大而又优雅的弹出窗口效果,提升用户体验和交互性。现在,当用户点击"显示弹出窗口"按钮时,将展示一个带有标题的弹出窗口。用户可以使用"关闭弹出窗口"按钮来关闭该窗口。接下来,我们可以创建一个按钮,当用户点击该按钮时,将触发展示弹出窗口的事件。 阅读详情

相关推荐

掌握jquery-blockui插件:打造优雅的页面等待体验

本文还有配套的精品资源,点击获取 简介: jQuery BlockUI 插件能有效提升网页异步操作的用户体验,通过自定义提示内容和等待动画,锁定用户界面直至操作完成。了解如何在项目中集成和使用此插件,利用其提供的配置选项和回调函数,可实现从基本到复杂的页面阻塞需求。本文将探讨如何通过安装、配置以及与AJAX事件的结合,来创建专业级的等待提示。同时,读者将学习如...

weixin_42605397的博客 1633

jquery的blockUI遮罩层的使用(1),bootstrap前端开发

javascript是前端必要掌握的真正算得上是编程语言的语言,学会灵活运用javascript,将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识,而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的,直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后,发现暂时没有提升的空间,我们可以暂时放一放。继续下面的学习,javascript贯穿我们前端工作中,在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解,关键是灵活运用。

2401_84094868的博客 1379

xctf攻防世界 MISC高手进阶区 low

1. 进入环境,下载附件 给出的一张bmp图片,没有其他信息 2. 问题分析 扔进binwalk中,没有发现有用信息 使用zsteg,没有有用信息 塞入StegSolve中,发现有点猫腻,如图: 有点二维码的感觉,emmm,需要像素处理,但不知道如何下手,参考网上的wp,发现是让使用lsb隐写,copy代码: from PIL import Image img = Image.open('./pic/low.bmp') img_tmp = img.copy() pix = img_tmp.load()

l8947943的博客 1万+

jquery的blockUI遮罩层的使用

技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。});

2401_85122999的博客 1198

SpringBoot项目整合Knife4j接口文档

写满接口信息的文档,每条接口包括:请求参数,响应参数,接口地址,接口名称,请求类型,请求格式,备注。

诨号无敌鸭的博客 1018

Rust Reqwest+Rustls 自签名证书校验

所以这里必须保证reqwest引用的rustls库和本地工程一致。以上就是实现不校验签名的逻辑,后续自己可以在对应回调进行逻辑判断。

bawomingtian123的专栏 1364

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

jQuery BlockUI Plugin概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。 使用jQuery BlockUI,首先需要添加插件js源码的引用: <script type="text...

weixin_30617695的博客 171

【一张图系列】别再混淆了!5分钟搞懂ERP、MES、PLC的职责边界与数据流》

《ERP、MES、PLC系统边界与协作解析》一文清晰阐述了制造业三大核心系统的角色分工与数据流转。文章将ERP比作企业"大脑"负责战略规划,MES作为车间"指挥官"负责执行调度,PLC则是设备"士兵"执行具体操作。通过一张架构图展示了从计划层到控制层的完整信息流:蓝色箭头表示指令下行(ERP→MES→PLC),橙色箭头代表数据上行反馈(PLC→MES→ERP)。文章强调理清系统边界对数字化转型、部门协作和项目实施的关键作用,并预告下期将深入解析ME

「东哥说MES」 专注于MES制造执行系统,为你拆解核心架构、功能模块及与ERP/PLC的集成逻辑。提供从入门到精通的系列干货、精选行业报告与实用工具,构建你的数字化知识体系,关注我,用实战经验照亮你的数字化之路。 976

Jquery中BlockUI的详解

Jquery中BlockUI的详解

qq_44884300的博客 857

36、转子 - 主动磁轴承系统建模及密封性能研究

本文研究了转子-主动磁轴承(AMBs)系统的动力学建模、稳定性分析及密封性能。通过建立包含转子、电子控制系统和接口接触的机电模型,结合Bernoulli-Euler梁理论与弹簧单元等效法,构建了考虑接口接触的闭环系统模型,并在磁悬浮鼓风机和电机上进行数值模拟与实验验证,结果表明接口接触刚度显著影响系统稳定性,尤其在高预紧扭矩下易激发弯曲模态失稳。同时,对非接触式低温密封进行了CFD仿真与实验测试,发现浮动环密封(FRS)具有最优的泄漏控制和抗磨损性能。研究成果为提升高速旋转机械的稳定性和密封可靠性提供了理论

vim8coder的博客 135

Python经典编程习题100例:第25例:求各个阶乘的和

不要自卑,去提升实力 互联网行业谁技术牛谁是爹 如果文章可以带给你能量,那是最好的事!请相信自己 加油o~ 本人初学Python,只为熟悉语法编写,大神请勿理会 点击下面链接 Python经典编程100例习题汇总 题目描述: 求1+2!+3!+…+20!的和。 解题思路: > 调用math模块中的factorial函数 代码: import math sum=0 for i in range(1,21): sum+=math.factorial(i) print(sum) ..

优快云 精品推荐 2736

Jquery中BlockUI的遮罩效果详解

BlockUI插件需要那个jQuery版本的支持? BlockUI兼容jQuery v1.2.3以上的版本   BlockUI插件的V2版本有那些变化? 解除锁定的时候,用于提示信息的元素不会从DOM中移除 默认的遮罩层为黑色 可用的选项设置进行了统一和清理 设置插件选项的方法改变了 放弃了对Opera 8的支持 提高了源代码的可读性 移除了displayBox功能 (其他

花语者 1452

光学防抖OIS介绍与标定

前言:先看一下有无ois系统的效果。 1. OIS系统的作用就是消除镜头的抖动。 Gyro感受方向,Hall感受位移,Actuator驱动马达来矫正抖动方向和位移。 2.ois系统的结构构成 从上面来看ois系统主要有Hall,...

camerall 1万+

jQuery BlockUI

OverviewjQuery BlockUI插件让你在不锁定浏览器的情况下使用Ajax时模拟同步行为。当被激活的时候,它会阻止用户的行为直到它无效。BlockUI将元素添加到DOM中,并赋予外观和阻止用户动作的行为。用法非常简单:1、to block user activity for the page:$.blockUI();2、blocking with a custom message:$.blockUI({message:"A customer message."});3、blocking with

williamzhengguohui的专栏 759

SAP中关于预测需求的重要载体:计划独立需求

预测,就是为了调节客户需求的波动、不平衡,使企业的生产计划、物料计划尽量平稳、有序的必备工具。计划独立需求,Planned Independent Requirement(PIR)是SAP系统中最常见的预测需求。

saplakes的博客 1880

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

jQuery遮罩插件jQuery.blockUI介绍及使用

jQuery BlockUI Plugin概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。 jquery block ui插件遮罩效果 #testblock { he

wang725的专栏 3792

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

jQuery BlockUI 插件(遮罩层)

部分效果 概述 当使用AJAX时,jQuery BlockUI插件可以模拟同步行为,并且不会锁定浏览器。一旦被激活,它便会防止页面上(或页面的一部分)用户的操作,直到被停用。BlockUI给DOM带来外观和阻止用户交互行为上的变化。 用法很简单;弹出遮罩层: $.blockUI(); 带自定义信息的遮罩层: $.blockUI({ message: ' Just a

兰染 5700

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

ASP.NET Boilerplate 前端 UI Block 与 Busy 指示器 API 完整指南

> 在 ASP.NET Boilerplate(ABP)框架中,`abp.ui` 命名空间提供了一组简洁的前端 API,用于实现页面或元素的"阻塞"(Block)与"忙碌"(Busy)两种交互状态:Block 用半透明遮罩拦截用户点击,Busy 在遮罩之上叠加旋转加载指示器。本文基于官方文档 [UI-Block-Busy.md](https://link.gitcode.com/i/8abd628

gitblog_00494的博客 91
上一篇: 运行build.xml出现异常: Cause: Could not load a dependent class com/jcraft/jsch/Logger..........
下一篇: 腾讯QQ、新浪微博第三方登录接口申请说明
bloxed
博客等级 码龄10年 263粉丝 192原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值