- 浏览: 2259894 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (423)
- FileNet相关 (3)
- 应用服务器相关 (22)
- Java综合 (77)
- 持久层 (24)
- struts (11)
- webservice (8)
- 虚拟机 (2)
- 光盘刻录 (0)
- AD及AD集群 (1)
- JS (33)
- F5 (0)
- loadrunner8.1 (0)
- Java 反编译工具 (2)
- DataBase (62)
- ant (1)
- 操作系统 (29)
- 我的任务 (3)
- 平台架构 (16)
- 业务规则引擎 (2)
- 模板 (1)
- EJB (5)
- spring (24)
- CMMI (1)
- 项目管理 (20)
- LDAP (13)
- JMS (10)
- JSP (19)
- JBPM (2)
- web MVC框架设计思想 (2)
- 第三方支付平台 (2)
- BUG管理工具 (1)
- 垃圾站 (2)
- php (1)
- swing (1)
- 书籍 (1)
- QQ qq (2)
- 移动互联网 (26)
- 爱听的歌曲 (0)
- hadoop (4)
- 数据库 (9)
- 设计模式 (1)
- 面试经验只谈 (1)
- 大数据 (9)
- sp (1)
- 缓存数据库 (8)
- storm (2)
- taobao (2)
- 分布式,高并发,大型互联网,负载均衡 (6)
- Apache Ignite (0)
- Docker & K8S (0)
最新评论
-
wangyudong:
新版本 Wisdom RESTClienthttps://gi ...
spring rest mvc使用RestTemplate调用 -
wangyudong:
很多API doc生成工具生成API文档需要引入第三方依赖,重 ...
spring rest mvc使用RestTemplate调用 -
zhaoshijie:
cfying 写道大侠,还是加载了两次,怎么解决啊?求。QQ: ...
spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) -
xinglianxlxl:
对我有用,非常感谢
spring容器加载完毕做一件事情(利用ContextRefreshedEvent事件) -
k_caesar:
多谢,学习了
利用maven的resources、filter和profile实现不同环境使用不同配置文件
关键字:界面遮罩层例子
一、自己写的遮罩层例子
附件遮罩层.rar为普通js界面遮罩层例子。
二、jQuery遮罩层例子(引入附件 jquery.zip中的两个插件)
1、下面一句话即可搞定
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>',css: { backgroundColor: '#f00', color: '#fff'} });
2、解除锁定
$.unblockUI();
全屏锁屏例子:
js代码:
$(function(){
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>正在进行通信...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click($.unblockUI);
});
html代码:
<input id="test" type="submit" value="显示对话框" />
...
<div id="question" style="display:none; cursor: default">
<h1>你确信要继续么?.</h1>
<input type="button" id="确认" value="Yes" />
<input type="button" id="取消" value="No" />
</div>
局部锁屏例子:
js代码:
$(function() {
$('#blockButton').click(function() {
$('#question').block({ message: null });
});
$('#blockButton2').click(function() {
$('#question').block({
message: '<h1>处理中...</h1>',
css: { border: '3px solid #a00' }
});
});
$('#unblockButton').click(function() {
$('#question').unblock();
});
});
html代码:
<input type="button" id="blockButton" value="blockButton" />
<input type="button" id="blockButton2" value="blockButton2" />
<input type="button" id="unblockButton" value="unblockButton" />
<div id="question" >
<input type="text" class="userText" value="nicole"/><br>
<input type="password" class="passText" value=" "/><br>
<input type="button" value="Yes" /><br>
<input type="button" value="No" /><br>
<input type="button" value="dddddddddddddddddddddddddddddd" /><br>
</div>
一些设置:
//设置遮罩层颜色
$.blockUI.defaults.overlayCSS.backgroundColor = '#ff0';
// 设置锁定时默认的提示信息(这里将覆盖jquery默认的提示消息)
//$.blockUI.defaults.message = "Please be patient... .......";
// 设置遮罩层更透明
$.blockUI.defaults.overlayCSS.opacity = '.2';
//如果要使用默认设置来同步所有的AJAX请求动作,代码如下:
$().ajaxStart($.blockUI).ajaxStop($.unblockUI);
更多相关知识:
http://www.cssrain.cn/demo/blockUI-V2/jQuery/blockUI/jQueryBlockUI.html
- 遮罩层.rar (1.3 KB)
- 下载次数: 127
- jquery.zip (32.7 KB)
- 下载次数: 81
发表评论
-
treeTable
2015-03-25 00:36 764jqgrid中文官网:http://blog.mn886.ne ... -
web网页直接触发发邮件办法(Email)
2014-12-10 15:36 1405关键字:web网页直接触发发邮件办法(Email) < ... -
Highcharts漂亮大气的图表(纯JS)
2013-12-14 12:09 5976关键字:Highcharts漂亮大气的图表(纯JS) ... -
智能搜索提示功能
2013-11-23 20:12 1232关键字:智能搜索提示功能 推荐一:http://site518 ... -
Java MVC框架性能比较 jsp、struts1、struts2、springmvc3
2013-10-30 17:41 2283关键字:Java MVC框架性能比较 jsp、struts1 ... -
from表单新窗口打开并提交
2013-08-02 04:03 19002关键字:from表单新窗口打开并提交(参数通过post方式提交 ... -
支持选择和输入的select下拉列表
2013-07-17 17:33 8963关键字:支持选择和输入的select下拉列表 需求:有时下 ... -
文件上传框样式
2013-07-11 18:15 10474关键字:文件上传框样式 附件是已经实现的现成的文件框的 ... -
jquery操作iframe中的js函数
2013-01-06 10:39 13036关键字:jquery操作iframe中的js函数 1 ... -
网页QQ和阿里巴巴交流
2013-01-05 09:29 3142关键字:网页QQ交流 附件是 网页QQ和阿里巴巴交流 例子 ... -
我的心情 我做主
2012-12-31 11:13 14关键字:试试我的博客 哈哈 -
网页特效网址大全
2012-12-28 16:01 942关键字:网页特效网址大全 1、http://js.ali ... -
flush动物
2011-09-06 14:56 892flush动物 -
拍照功能实现(java、php、.net)
2011-08-04 22:17 1545关键字:拍照功能实现(java、php、.net) 但前提是 ... -
首页显示放大放小效果
2011-05-01 13:21 997关键字:首页显示放大放小效果 说明:附件是相关例子,可直接下 ... -
页面菜单(左侧菜单)
2011-03-19 19:28 1124附件为:页面菜单一个完整的例子。 -
国家城市菜单(包括世界级和国家级的两种菜单)
2011-02-15 14:18 1549关键字:国家城市菜单(包括世界级和国家级的两种菜单) 包 ... -
地图相关
2011-02-15 00:26 1368第一种效果:可搜索,可以计算 参考: ... -
网页模板样式
2011-02-14 13:24 999附件是:网页模板样式,是一个工程,里面有关于JSP编程的很多模 ...
相关推荐
遮罩层是一种常见的用户界面元素,它在网页上创建一个半透明或全黑的覆盖层,突出显示特定内容,同时防止用户与页面其他部分交互。在jQuery中,我们可以利用CSS和JavaScript轻松实现这一功能。 1. **基本结构**:...
在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于暂时遮盖页面内容,引导用户注意力或者在加载数据时提供视觉反馈。在本主题中,我们将深入探讨如何使用JavaScript来实现遮罩层的打开和关闭,并...
在C#编程中,创建一个自定义的半透明遮罩层是常见的需求,尤其是在开发桌面应用或者游戏界面时,为了实现部分区域的视觉隔离或加载等待效果。本教程将介绍如何利用C#来构建这样的功能。 首先,我们需要理解遮罩层的...
在这个例子中,当用户点击一个显示登录的按钮(假设ID为`showLoginBtn`),`showLogin`函数会被调用,显示遮罩层和登录表单。而当用户点击遮罩层或登录表单上的关闭按钮时,`hideLogin`函数会隐藏它们。这种交互式...
在这个例子中,CSS将被用来定义遮罩层的外观,包括颜色、透明度、位置以及动画效果。一个典型的遮罩层CSS样式可能包括以下内容: ```css .mask-layer { position: fixed; top: 0; left: 0; width: 100%; ...
在网页开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于暂时遮盖页面的部分或全部内容,以突出显示特定信息或者进行交互操作。本教程将详细讲解如何使用纯JavaScript实现一个可自定义背景、效果和定位的...
在IT行业中,尤其是在网页开发领域,"遮罩层"是一个常用的设计元素,它用于暂时禁用用户对页面的交互,通常是为了突出显示特定内容或进行某种操作,如加载、提交表单、显示提示等。本案例中,"遮罩层进度显示"是一个...
在ASP.NET开发中,创建一个弹出层带遮罩层的效果是常见的需求,这通常用于显示模态对话框,如登录、确认操作或显示详细信息等。本篇将详细讲解如何实现这一功能,并以"divLogin"作为登录层,"doing"作为遮罩层为例...
这个"jQuery鼠标经过图片遮罩层效果"就是一个典型的例子,它利用jQuery库实现了当鼠标悬停在图片上时,会显示一个覆盖在图片上的遮罩层,并且具有鼠标跟随的效果。下面将详细讲解这个效果的实现原理和相关知识点。 ...
在Android开发中,创建遮罩层(Mask Layer)是一种常见的需求,它通常用于显示半透明覆盖,以达到提示用户、加载数据或者隐藏部分界面的效果。本篇将详细讲解如何使用`FrameLayout`来实现这样的功能。 `FrameLayout...
在网页设计和开发中,jQuery 遮罩层(jQuery Mask)是一种常见且实用的技术,用于在用户界面中创建弹出窗口、加载提示或者进行页面元素的半透明覆盖,以达到突出显示特定内容或交互的目的。jQuery 遮罩层的易用性和...
在这个例子中,悬停事件可能触发遮罩层的显示,同时可能伴有透明度、颜色、动画等视觉变化。 3. **遮罩层**: 遮罩层通常是一个半透明的元素,覆盖在图片上方,用于添加额外信息或效果。在CSS中,可以使用`...
在Android开发中,遮罩层(Mask Layer)是一种常见的用户界面元素,用于在屏幕上覆盖一层半透明或全透明的颜色,通常用于显示加载提示、弹窗提示或者进行界面过渡效果等。"androdid遮罩层的实现"这个主题,旨在探讨...
在网页设计和开发中,"遮罩层"(Mask Layer)是一种常见的用户界面技术,用于在页面上创建半透明或不透明的覆盖层,通常用于显示提示信息、加载动画、弹窗或者新手引导等场景。"js"在这里指的是JavaScript,一种广泛...
最后,你可以根据项目需求调整遮罩层的样式,例如改变背景透明度、调整加载提示的位置和颜色等。在CSS中添加自定义样式: ```css #loading-mask { z-index: 9999; background-color: rgba(0, 0, 0, 0.5); } #...
在这个例子中,MaskWidget可能是一个自定义的QWidget子类,用于创建遮罩层效果。它可能包含设置遮罩透明度、形状、颜色以及是否可见等方法。 2. `frmmaskwidget.cpp` 和 `frmmaskwidget.h`: 这可能是Form-based ...
本资源“遮罩层滤镜文字发光CSS3特效.zip”就是一个很好的例子,它包含了一种利用CSS3实现的遮罩层滤镜与文字发光效果的代码示例,适用于提升网页的视觉吸引力和交互性。 首先,让我们深入理解“遮罩层滤镜”。遮罩...
首先,遮罩是通过将一个显示对象作为另一个对象的遮罩层来实现的。遮罩层通常是黑色和白色的位图图像,其中白色部分表示透明,黑色部分表示不透明。在AS3中,我们可以使用DisplayObject类的mask属性来指定遮罩。 ...
本资源"jquery实现点击按钮弹出带有过渡效果的遮罩层窗口动画效果源码.zip"提供了使用jQuery创建动态、具有过渡效果的遮罩层窗口的代码示例,这对于构建用户友好的网页界面非常有用。 首先,我们要理解jQuery中的...