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>

dojo之TabContainer篇

猜你在找的Dojo相关文章