<!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 dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程
一、 Dojo学习笔记(1. 模块与包) 1 二、 Dojo学习笔记(2. djConfig解说) 4 三、 Dojo学习笔记(3. Dojo的基础对象和方法) 6 四、 Dojo学习笔记(4. dojo.string & dojo.lang) 9 五、 Dojo学习笔记(5. dojo.lang.array ...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
dojo js dojo js dojo js dojo js dojo js dojo js dojo js
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱,它为开发富客户端Ajax应用提供了一套完整的小部件和一些特效操作。曾经有人这样说:“对于一个Web开发者而言,如果没有Dojo,他将是一个“残废”的...
DOJO中文手册【出自dojo中国】 页数60+ 简单介绍: Dojo 是一个用javascript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets, Burstlib, f(m)), 这也是为什么叫它a \"unified\" toolkit的...
dojo.js.核心jsDojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库Dojo.js核心dojo的javaScript类库
学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源学习dojo的绝好资源...
dojo中文文档下载。dojo中文文档下载。
dojo资料dojo资料dojo资料dojo资料dojo资料
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
Dojo学习笔记-- dojo.event & dojo.event.topic & dojo.event.browser Dojo学习笔记--DateTextbox Dojo学习笔记--Dojo的基础对象和方法 Dojo学习笔记--FisheyeList鱼眼效果 Dojo学习笔记--TabContainer Dojo...
dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记dojo笔记
精通Dojo(中文版),之前自己学习的时候看的,质量挺高,百度网盘地址
dojo中文文档dojo中文文档
1.OReilly.Dojo.The.Definitive.Guide.Jun.2008.pdf 2.IntroToDojo.pdf 3.Using the Dojo .pdf 4.Mastering Dojo.pdf
1 Introduction 9 1.1 Key Aspects of Dojo . 12 1.2 Using the Book . . ....1.3 Acknowledgments . ....I Ajax the Dojo Way 19 2 Powerful Web Forms Made Easy 20 2.1 What Customers Are Saying ...4.3 Loading Dojo 78
dojo常用方法总结,主要是元素的获取,事件的监听,数组的遍历等
dojo 开发指南, 讲述如何用dojo技术构建web应用