dojo之TabContainer篇

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>

相关文章

我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易...
我即将开始开发一款教育性的视频游戏.我已经决定以一种我可以...
我正在使用带有Grails2.3.9的Dojo1.9.DojoNumberTextBox小部...
1.引言鉴于个人需求的转变,本系列将记录自学arcgisapiforja...
我正在阅读使用dojo’sdeclare进行类创建的语法.描述令人困惑...
我的团队由更多的java人员和JavaScript经验丰富组成.我知道这...