JavaScript DHTML/Dojo toolkit/TabContainer

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

Close tab event

   <source lang="html4strict">

<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()>
One
Two
Three
       <script type="dojo/method" event="onClose" args="evt">
           alert("Closing", this.title);
           return true; //must return true for close to occur!
       </script>
       four

</body> </html>

 </source>
   
  


Create TabContainer

   <source lang="html4strict">

<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">
 
 </body>

</html>

 </source>
   
  


Set Tab position

   <source lang="html4strict">

<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()>

</body> </html>

 </source>
   
  


Set tab title

   <source lang="html4strict">

<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()>
One
Two
Three
       <script type="dojo/method" event="onClose" args="evt">
           alert("Closing", this.title);
           return true; //must return true for close to occur!
       </script>
       four

</body> </html>

 </source>
   
  


Tabbed pane with title

   <source lang="html4strict">

<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">
       A
       B
       C
 </body>

</html>

 </source>
   
  


Three tabs

   <source lang="html4strict">

<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">
     First Tab
     Second Tab
     Third Tab
 </body>

</html>

 </source>