dojo loading over lay

最新推荐文章于 2014-04-09 16:24:00 发布
最新推荐文章于 2014-04-09 16:24:00 发布
阅读量134 收藏
点赞数
分类专栏： web前台开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiangtie/article/details/84360204
版权 


<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Demo: Loading Overlay</title>
		<!--<link rel="stylesheet" href="../../../resources/style/demo.css" media="screen">
		<link rel="stylesheet" href="style.css" media="screen">
		<link rel="stylesheet" href="layout.css" media="screen">
		-->
		<link rel="stylesheet" href="../dojolib/dijit/themes/claro/claro.css" media="screen">
		<!-- load dojo and provide config via data attribute -->
		<script src="../dojolib/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad:true"></script>
		<style type="text/css">
		* {
    outline: none !important;
}

body {
    margin: 0;
    padding: 2em;
    font-family: Lucida Sans,Lucida Grande,Arial !important;
    font-size: 13px !important;
    background: white;
    color: #333;
}

button {
	-webkit-transition: background-color 0.2s linear;
	border-radius:4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
	background-color: #E4F2FF;
	background-image: url("../dojolib/dijit/themes/claro/form/images/button.png");
	background-position: center top;
	background-repeat: repeat-x;
	border: 1px solid #769DC0;
	padding: 2px 8px 4px;
	font-size:1em;
}

button:hover {
	background-color: #AFD9FF;
	color: #000000;
}

h1 {
	font-size:1.5em;
}

.break
{
float:none;
clear:both;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.pageOverlay {
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1001;
    display: block;
}

#loadingOverlay {
    background:  #fff url('../dojolib/dijit/themes/claro/images/loadingAnimation.gif') no-repeat 10px 23px;
}

.loadingMessage {
    padding: 25px 40px;
    color: #999;
}


#appLayout {
    height: 100%;
}
#leftCol {
    width: 14em;
}

.claro .demoLayout .edgePanel {
    background-color: #d0e9fc;
}


		</style>
</head>
<body class="claro">
	<div id="loadingOverlay" class="loadingOverlay pageOverlay">页面加载中，请稍候。。。</div>
	<script>
		// demo is the object used to control the loading effects
		var demo;
		require(["dojo/dom-style", "dojo/_base/fx", "dojo/_base/declare", "dijit/registry", "dojo/dom"],
		function(domStyle, fx, declare, registry, dom){
			var Demo = declare(null,{
				overlayNode:null,

				// store a reference to the overlay node
				constructor:function(){
					this.overlayNode = dom.byId('loadingOverlay');
				},

				// called to hide the loading overlay
				endLoading: function()
				{
					// fade the overlay gracefully
					fx.fadeOut({
						node: this.overlayNode,
						onEnd: function(node){
							domStyle.set(node, 'display', 'none');
						}
					}).play();
				}
			});
			demo = new Demo();
		});

		// require layout widgets
		require(["dojo/_base/lang", "dojo/domReady!",
			"dijit/layout/BorderContainer",
			"dijit/layout/TabContainer",
			"dijit/layout/ContentPane"],
		function(lang){
			// layout is ready, hide the loading overlay
			demo.endLoading();
			// initialize the editor, after a half-second delay for older browsers
			// page is ready to run
		});
	</script>
	<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
		<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">
			<h1>Demo: Loading Overlay</h1>
		</div>
		<div class="centerPanel" data-dojo-type="dijit/layout/TabContainer" id="tabs" data-dojo-props="region: 'center', tabPosition: 'bottom'">
			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Group 1'">
				<h4>Group 1 Content</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Group Two'">
				<h4>Group 2 Content</h4>
			</div>
			<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Long Tab Label for this One'">
				<h4>Group 3 Content</h4>
			</div>
		</div>
		<div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
	</div>
</body>
</html>


jiangtie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用dojo实现页面控件阻塞的几种方法
沧海一粟 —— 技术随手记
04-28 2767
经常碰到这样一种需求，当点击某个按钮向服务器发送请求时，需要将整个页面或页面的某些控件阻塞住，直到请求返回，才允许用户操作。 要实现这个功能，dojo中提供了多种方法。这儿就列举几种出来。（dojo 1.7.3）   1 阻塞整个页面 dijit/Dialog Loading... on(dom.byId("show_dialog"), "click", funct
很棒的一个加载等待特效框架
07-01
很棒的一个加载等待特效框架,支持多种自定义方式
使用dojo遮罩加载进度。
weixin_34318956的博客
04-09 126
使用dojox.widget.Standby来实现类似视频缓冲加载时候转圈的效果。 转载于:https://www.cnblogs.com/shuishuowobushihuiyuan/p/3654477.html
dojo 自动加载页面 --- 按需要加载
flash8627的专栏
07-02 3940
点击菜单才会去加载页面，非iframe实现，感觉效果还可以； 有些地方不尽人意，例如解析其它的库如fusionchart就有点问题。 还有就是在IE下运行要注意，不知道为什么，dojo api官网地址在IE下运行也有问题。这是一件雷人的事； COUNT-Magic Application
Dojo loader 文档 <3>
robin xiong的专栏
01-23 2105
Dojo 最强大的一个库，从企业级应用到Mobile上的使用，库的大小也可以根据需求来定制（比Jquery小）。因为它的全面，很适合于我们了解他的源代码而提升自己的能力。 下载的Dojo的源代码，本来想着直接学习Dojo.js 这个加载器源代码，但发现很难看懂，还是先从Dojo要实现的功能及其机制，在带着如果让自己去实现这些功能，去看源代码，可能会更好的掌握。 看本文档的时候还是遇到很多不懂的
dojo教程 dojo 教程大全
06-05
精通Dojo(中文版)，之前自己学习的时候看的，质量挺高,百度网盘地址
AJAX架构之Dojo篇
10-30
【Dojo Toolkit】是本文的重点，它是一种开源的JavaScript工具包，主要针对客户端的AJAX应用。自2004年9月起，由Alex Russell领导的JotSpot团队创立，Dojo因其强大的功能和灵活性受到广泛的关注。Dojo的核心在于其...
Dojo 学习要点
12-11
Dojo 是一个强大的 JavaScript 库，它为开发 Web 应用程序提供了丰富的功能，包括模块化、用户界面组件、数据管理、异步通信等。在深入学习 Dojo 之前，了解 JavaScript 的基础知识至关重要，特别是 JSON...
系统优化之Dojo优化策略--页面加载机制优化
weixin_34137799的博客
11-29 108
    随着Dojo的名声越来越大，更多的开发者选择使用Dojo作为前端开发的框架。虽然Dojo是一种异步框架，能够借助各种ContentPane快速的搭建起开发框架，并实现异步通信，但有时一个模块包含的内容过多，造成此页面的内容过多，打开该页时就会导致内存飙升，长时间没有响应等问题。下图所示为一业务模块的页面结构图。                在View区域中，包含了多个Widg...
Dojo 控件性能优化最佳实践
技术风向标
08-03 171
什么是 Dojo ？ Dojo 是一个用 JavaScript 语言实现的开源 DHTML 工具包，是基于 CSS 和 JavaScript 实现的一个通用类库。Dojo 的目标是解决开发 DHTML 应用程序遇到的那些，长期存在 、历史问题。Dojo 在内部处理了 DHTML 在不同浏览器上显示的差异，这让程序员大大节省了开发过程针对不同浏览器进行调试和容错的开销。Dojo 让你更容易使 ...
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp38-cp38-win_amd64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
[毕设]高效人事考勤管理系统.zip
07-27
[毕设]高效人事考勤管理系统
Dojo入门指南
"GETTING STARTED WITH DOJO" 会引导读者了解Dojo的基础知识，包括如何设置开发环境，引入Dojo库，以及理解Dojo的加载机制（如 dojo.require 和 dojo.provide）。 3. **模块化开发** Dojo采用了AMD（Asynchronous...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值