比较好用的jquery loading (jquery.blockUI.js)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(function(){
$("#t1").click(function(){
$.blockUI({
css: {
border:'solid green 2px'
},
message:'正在处理，请等待...'
});
setTimeout(function(){$.unblockUI(); },3000);
});
$("#t2").click(function(){
$('#div1').block({
message:'正在处理，请等待...',
css: {
border:'solid green 2px'
}
});
setTimeout(function(){$('#div1').unblock(); },3000);
});
$("#t3").click(function(){
$.growlUI('Hi','Have a nice day!');
});
});
</script>
</head>
<body>
<input id="t1" type="button" value="全屏loading"/>
<input id="t2" type="button" value="某区域loading"/>
<input id="t3" type="button" value="通知"/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="div1" style="height:100px;widht:100px;border:1px solid #ccc;">test1</div>
</body>
</html>
- 大小: 2.7 KB
分享到：
相关推荐
1. **引入资源**：首先，你需要在页面中引入jQuery库和jQuery BlockUI插件的JavaScript文件。例如： ```html <script src="path/to/jquery.min.js"> <script src="path/to/jquery.blockUI.js"> ``` 2. **初始化...
2. 插件使用：jQuery有许多现成的加载插件，如`blockUI`、`spin.js`等，它们提供了丰富的加载效果和简单易用的API。 ```javascript $.blockUI({ message: '<img src="loading.gif" />' }); // 数据加载完成后解除...
`jquery.js`是JQuery的核心库，而`jquery-1.3.2.js`可能是一个特定版本的JQuery，用于确保Blockui的兼容性。确保这两个文件已经正确地引入到HTML文档的`<head>`部分，例如： ```html <script src="jquery.js"> ...
`blockUI`通常是一个JavaScript库，如`jquery.blockUI.js`，它的主要功能是将整个页面或特定区域“锁定”，显示一个遮罩层，让用户知道当前页面正在进行后台操作，防止他们误操作。使用`blockUI`可以显著提升用户...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> $(document).ready(function() { // 页面加载完成后隐藏loading $('#loading').hide(); // 当点击链接时，显示loading并开始跳转 $...
jQuery库是JavaScript中最广泛使用的库之一，它简化了DOM操作、事件处理、动画制作以及Ajax交互。"jQuery插件"是指开发者为了扩展jQuery功能而编写的自定义代码，通常以独立模块的形式存在，方便其他开发者在自己的...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="jquery.blockUI.js"> $(function() { // 开始加载 $.blockUI({ message: '请稍候...</h3>' }); // 模拟加载操作 ...
jQuery BlockUI 是一款功能强大的JavaScript库，用于在网页上实现遮罩效果，它与jQuery库紧密结合，提供了简单易用的API来控制页面区域的“冻结”或遮罩，以达到用户交互时的提示或者加载等待体验。这款插件在开发...
BlockUI 是一个JavaScript库，主要用于在网页上实现页面部分或者整个页面的加载效果，它可以模拟一个正在处理事务的“锁定”界面，防止用户在后台数据处理时进行其他操作，提高用户体验。在这个"BlockUI完成Demo"中...
`jquery-1.5.2.min.js`是jQuery的压缩版本，它是一个轻量级、高性能的JavaScript库，简化了DOM操作、事件处理、动画效果以及Ajax交互。在这个例子中，jQuery是实现Ajax功能的核心工具。 `jquery.validate.js`是...
4. **库与插件**：利用现成的JavaScript库，如jQuery的`blockUI`插件，或专门的加载库如`NProgress`，它们提供了丰富的配置和自定义选项。 **四、设计考虑** 1. **可见性**：图标应放置在明显的位置，如页面中央或...