<!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>
分享到：
相关推荐
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，涵盖了从DOM操作、事件处理到AJAX通信等多个方面。Dojo的核心在于它的模块化系统，这使得开发者可以按需加载代码，提高应用的性能和可维护...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
Dojo 是一个功能丰富的 JavaScript 库，它提供了一系列模块化、面向对象的工具，用于构建高性能的 Web 应用程序。在 Dojo 中，模块和包的概念是核心组成部分，它们帮助开发者组织和管理代码，使其更易于维护和重用。...
dojo js dojo js dojo js dojo js dojo js dojo js dojo js
《dojo中文文档-dojo手册》提供了全面而深入的Dojo框架知识，这是一份非常有价值的资源，对于想要理解和掌握Dojo JavaScript库的开发者来说至关重要。Dojo是一个强大的JavaScript工具包，它提供了丰富的功能，包括...
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱，它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说：“对于一个Web开发者而言，如果没有Dojo，他将是一个“残废”的...
### Dojo常用方法总结 Dojo是一个开源的JavaScript框架，用于构建高性能的富客户端Web应用程序。它提供了一系列功能强大的工具和API，可以帮助开发者更轻松地处理DOM操作、AJAX调用、用户界面组件构建等任务。本文...
DOJO中文手册是针对JavaScript库Dojo的详细指南，源自中国的本地化版本，旨在帮助开发者理解和使用这个强大的工具包。Dojo是一个开源的DHTML工具集，由nWidgets、Burstlib和f(m)等多个项目的合并发展而来，因此被...
学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源...
Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能和组件，涵盖了从DOM操作、事件处理到AJAX通信、动画效果等各个方面。在深入理解Dojo之前，我们需要了解JavaScript在网页开发中的核心地位以及它...
### Dojo 快速入门知识点详解 #### 一、Dojo 概览 Dojo 是一个功能强大且灵活的开源 JavaScript 库，主要用于构建高性能的富客户端 Web 应用程序。Dojo 提供了一系列工具和组件，使得开发者能够轻松创建交互式 Web...
**DOJO权威指南+DOJO1.1源码** DOJO是一个开源的JavaScript库，它提供了丰富的工具和功能，用于构建交互式Web应用程序。这个资源集合包括了《DOJO权威指南》的中文版以及DOJO 1.1的源代码，为深入理解和应用DOJO...
Dojo 是一个强大的JavaScript工具库，它为开发者提供了丰富的功能，包括对Array对象的处理。在Dojo中，数组操作是一大亮点，因为它们提供了一系列高效且易用的方法，使得处理数组变得更加便捷。 首先，`dojo....
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
### Dojo 开发指南知识点详解 #### 一、概述 Dojo 开发指南是一本详细介绍如何使用 Dojo 技术构建高效、灵活的 Web 应用程序的手册。该指南适用于不同层次的开发者：服务器端开发者可以利用“无编码的小部件”快速...
Dojo 是一个强大的JavaScript工具库，专为构建富互联网应用程序（RIA）而设计。它提供了一个全面的开发框架，包括AJAX、DOM操作、动画效果、数据存储、模块化代码管理等多个方面，使得Web开发者能够更高效地创建交互...
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
Dojo工具包是一个广泛使用的JavaScript库，主要用于构建交互式的Web应用程序。这个压缩包包含了你在学习Dojo时可能需要用到的各种资源，旨在提供一个完整的开发环境，同时也作为一种备份手段。现在，让我们深入了解...
Dojo事件处理框架是JavaScript库Dojo Toolkit中的一个重要组成部分，它提供了一种统一的方式来管理和处理DOM事件以及JavaScript对象之间的交互。这个系统深受面向切面编程（AOP）思想的影响，尤其是其advice机制，...
Dojo的DOM操作库提供了一组高效且易于使用的API，如`dojo/query`用于选择元素，`dojo/dom`用于获取和设置元素属性，`dojo/dom-geometry`用于获取元素的位置和尺寸，以及`dojo/dom-class`和`dojo/dom-style`用于处理...