JavaScript Tutorial/Dojo toolkit/TabContainer

Материал из Web эксперт
Перейти к: навигация, поиск

Close tab event

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dijit.layout.TabContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dojo.parser");
            dojo.require("dojo.Button"); 
           
    </script>
  </head>
  <body class="tundra" onload=f()>
    <div dojoType="dijit.layout.TabContainer" style="width:225px; height:100px; margin:5px;">
    <div dojoType="dijit.layout.ContentPane" title="one">One</div>
    <div dojoType="dijit.layout.ContentPane" title="two">Two</div>
    <div dojoType="dijit.layout.ContentPane" title="three" closable="true">Three
        <script type="dojo/method" event="onClose" args="evt">
            alert("Closing", this.title);
            return true; //must return true for close to occur!
        </script>
    </div>
    <div dojoType="dijit.layout.ContentPane" title="blue">
        four
    </div>
</div>
</body>
</html>


Create TabContainer

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
      dojo.addOnLoad(show);
      function show() {
        var myDijit = new dijit.layout.TabContainer({
          style : "width:800px;height:600px;"
        });
        dojo.byId("my").appendChild(myDijit.domNode);
        var myPane1 = new dijit.layout.ContentPane({title : "A", closable : true });
        myPane1.setContent("A");
        myDijit.addChild(myPane1);
        var myPane2 = new dijit.layout.ContentPane({title : "B" });
        myPane2.setContent("B");
        myDijit.addChild(myPane2);
        var myPane3 = new dijit.layout.ContentPane({
          title : "C", selected : true,
          href : "http://www.wbex.ru" });
        myDijit.addChild(myPane3);
        myDijit.startup();
      }
    </script>
  </head>
  <body class="tundra">
        <div id="my">&nbsp;</div>
  </body>
</html>


Set Tab position

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dijit.layout.TabContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dojo.parser");
            dojo.require("dojo.Button"); 
           function f(){
           var container = new dijit.layout.TabContainer({
             tabPosition: "left-h",
             style : "width:200px;height:200px;"
             }, "foo");
           var leftChild = new dijit.layout.ContentPane({title : "tab1"});
           leftChild.domNode.innerHTML="tab 1";
           var rightChild = new dijit.layout.ContentPane({title : "tab2", closable: true});
           rightChild.domNode.innerHTML="tab 2";
           container.addChild(leftChild);
           container.addChild(rightChild);
           container.startup(  );
           }
    </script>
  </head>
  <body class="tundra" onload=f()>
    <div id=foo></div>
</body>
</html>


Set tab title

<html>
  <head>
    <link rel="StyleSheet" type="text/css" href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dijit.layout.TabContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dojo.parser");
            dojo.require("dojo.Button"); 
           
    </script>
  </head>
  <body class="tundra" onload=f()>
    <div dojoType="dijit.layout.TabContainer" style="width:225px; height:100px; margin:5px;">
    <div dojoType="dijit.layout.ContentPane" title="one">One</div>
    <div dojoType="dijit.layout.ContentPane" title="two">Two</div>
    <div dojoType="dijit.layout.ContentPane" title="three" closable="true">Three
        <script type="dojo/method" event="onClose" args="evt">
            alert("Closing", this.title);
            return true; //must return true for close to occur!
        </script>
    </div>
    <div dojoType="dijit.layout.ContentPane" title="blue">
        four
    </div>
</div>
</body>
</html>


Tabbed pane with title

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.TabContainer");
    </script>
  </head>
  <body class="tundra">
    <div dojoType="dijit.layout.TabContainer" style="width:800px;height:600px">
      <div dojoType="dijit.layout.ContentPane" title="A">
        A
      </div>
      <div dojoType="dijit.layout.ContentPane" title="B" closable="true" selected="true">
        B
      </div>
      <div dojoType="dijit.layout.ContentPane" title="C">
        C
      </div>
    </div>
  </body>
</html>


Three tabs

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
            dojo.require("dojo.parser");
           dojo.require("dijit.layout.ContentPane");
           dojo.require("dijit.layout.TabContainer");
           dojo.require("dijit.form.Button");
    </script>
  </head>
  <body class="tundra">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:500px;height:100px">
      <div id="tab1" dojoType="dijit.layout.ContentPane"  title="First Tab"  selected="true" closable="true">
      First Tab
      </div>
      <div id="tab2" dojoType="dijit.layout.ContentPane" title="Second Tab" closable="true">
      Second Tab
      </div>
      <div id="tab3" dojoType="dijit.layout.ContentPane" title="Third Tab" closable="true">
      Third Tab
      </div>
   </div>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Dojo_toolkit/TabContainer&oldid=8541»