1、设计思路 （1）利用TabContainer设计出三个Tab页，分别显示三种水果； （2）根据dijit中的Dialog，设计出三个弹窗出来。 2、设计步骤 （1）设计总体Tab页框架 div data-dojo-type="dijit/layout/
1、设计思路
（1）利用TabContainer设计出三个Tab页，分别显示三种水果；
（2）根据dijit中的Dialog，设计出三个弹窗出来。
2、设计步骤
（1）设计总体Tab页框架
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width:300px;height:310px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"苹果"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"梨子"'>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"橘子"'>
</div>
</div>
（2）设计出弹窗
<div id="apple" data-dojo-type="dijit/Dialog">苹果</div> <div id="pear" data-dojo-type="dijit/Dialog">梨子</div> <div id="orange" data-dojo-type="dijit/Dialog">橘子</div>（3）调用弹窗
<script type="text/javascript">
dojo.addOnLoad(function(){
dijit.byId("apple").show();
dijit.byId("pear").show();
dijit.byId("orange").show();
});
</script>
3、设计结果
（1）初始化时
（2）选择“苹果”时
（3）选择“梨子”时
（4）选择“橘子”时
4、附录
源码：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Tab页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../script/dojoroot/dijit/themes/tundra/tundra.css"/>
<script type="text/javascript" src="../script/dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<style type="text/css">
body{
width:100%;
height:100%;
font-size:12px;
text-align:center;
}
</style>
<script type="text/javascript">
dojo.addOnLoad(function(){
dijit.byId("apple").show();
dijit.byId("pear").show();
dijit.byId("orange").show();
});
</script>
</head>
<body class="tundra">
<div data-dojo-type="dijit/layout/TabContainer" data-dojo-props='style:"width:300px;height:310px;"'>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"苹果"'>
<img alt="苹果" src="../images/apple.png" style="width:270px;height:274px;cursor:pointer;background-color:#FFFFFF;"/>
<div id="apple" data-dojo-type="dijit/Dialog">苹果</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"梨子"'>
<img alt="梨子" src="../images/pear.png" style="width:270px;height:274px;cursor:pointer;background-color:#FFFFFF;"/>
<div id="pear" data-dojo-type="dijit/Dialog">梨子</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"橘子"'>
<img alt="橘子" src="../images/ora.png" style="width:270px;height:274px;cursor:pointer;background-color:#FFFFFF;"/>
<div id="orange" data-dojo-type="dijit/Dialog">橘子</div>
</div>
</div>
</body>
</html>